{% extends 'dashboard/domain_detail/base.html' %}

{% set domain_detail_page = "info" %}

{% block title %}
  {{ custom_domain.domain }} Info
{% endblock %}

{% block domain_detail_content %}
  <h1 class="h2 mb-1"> {{ custom_domain.domain }}  </h1>

  <div class="small-text">Created {{ custom_domain.created_at | dt }}. {{ nb_alias }} aliases</div>

  <hr>
  <h3 class="mb-1">Auto create/on the fly alias </h3>


  <div>
    <form method="post">
      <input type="hidden" name="form-name" value="switch-catch-all">

      <label class="custom-switch cursor mt-2 pl-0"
             data-toggle="tooltip"
          {% if custom_domain.catch_all %}
             title="Disable catch-all"
          {% else %}
             title="Enable catch-all"
          {% endif %}
      >
        <input type="checkbox" class="custom-switch-input"
            {{ "checked" if custom_domain.catch_all else "" }}>

        <span class="custom-switch-indicator"></span>
        <spam class="ml-2">
          Catch All
        </spam>

      </label>
    </form>
    <div class="">
      Simply use <b>anything@{{ custom_domain.domain }}</b>
      next time you need an alias: it'll be <b>automatically</b>
      created the first time it receives an email.
      To have more fine-grained control, you can also define
      <a href="{{ url_for('dashboard.domain_detail_auto_create', custom_domain_id=custom_domain.id) }}">auto create
        rules
        <i class="fe fe-chevrons-right"></i></a>.
    </div>


  </div>

  <div class="{% if not custom_domain.catch_all %} disabled-content {% endif %}">
    <div>Auto-created aliases are automatically owned by the following mailboxes
      <i class="fe fe-corner-right-down"></i></a>.
    </div>
    {% set domain_mailboxes=custom_domain.mailboxes %}
    <form method="post" class="mt-2">
      <input type="hidden" name="form-name" value="update">
      <input type="hidden" name="domain-id" value="{{ custom_domain.id }}">

      <div class="d-flex">
        <div class="flex-grow-1 mr-2">
          <select data-width="100%" required
                  class="mailbox-select" multiple name="mailbox_ids">
            {% for mailbox in mailboxes %}
              <option value="{{ mailbox.id }}" {% if mailbox in domain_mailboxes %}
                      selected {% endif %}>
                {{ mailbox.email }}
              </option>
            {% endfor %}
          </select>
        </div>
        <div>
          <button class="btn btn-outline-primary btn-sm">Update</button>
        </div>
      </div>
    </form>
  </div>


  <hr>
  <h3 class="mb-1">Default Display Name</h3>
  <div class="">
    Default display name for aliases created with <b>{{ custom_domain.domain }}</b>
    unless overwritten by the alias display name.
  </div>

  <div>
    <form method="post" class="form-inline">
      <input type="hidden" name="form-name" value="set-name">
      <div class="form-group">
        <input class="form-control mr-2"
               value="{{ custom_domain.name or "" }}"
               name="alias-name"
               placeholder="Alias Display Name">
      </div>
      <button class="btn btn-outline-primary" name="action" value="save">Save</button>
      {% if custom_domain.name %}
        <button class="btn btn-outline-danger float-right ml-2" name="action" value="remove">Remove</button>
      {% endif %}
    </form>
  </div>

  <hr>
  <h3 class="mb-1">Random Prefix Generation</h3>
  <div class="">
    Add a random prefix for this domain when creating a new alias.
  </div>

  <div>
    <form method="post">
      <input type="hidden" name="form-name" value="switch-random-prefix-generation">
      <label class="custom-switch cursor mt-2 pl-0"
             data-toggle="tooltip"
          {% if custom_domain.random_prefix_generation %}
             title="Disable random prefix generation"
          {% else %}
             title="Enable random prefix generation"
          {% endif %}
      >
        <input type="checkbox" class="custom-switch-input"
            {{ "checked" if custom_domain.random_prefix_generation else "" }}>

        <span class="custom-switch-indicator"></span>
      </label>
    </form>
  </div>

  <hr>
  <h3 class="mb-1">Delete Domain</h3>
  <div class="mb-3">This operation is <b>irreversible</b>.
    All aliases associated with this domain will be deleted.
  </div>

  <form method="post">
    <input type="hidden" name="form-name" value="delete">
    <span class="delete-custom-domain btn btn-danger">Delete domain</span>
  </form>

{% endblock %}

{% block script %}
  <script>
    $('.mailbox-select').multipleSelect();

    $(".custom-switch-input").change(function (e) {
      $(this).closest("form").submit();
    });

    $(".delete-custom-domain").on("click", function (e) {
      let that = $(this);

      bootbox.confirm({
        message: "All aliases associated with <b>{{ custom_domain.domain }}</b> will be also deleted. <br>" +
          "This operation is not reversible, please confirm.",
        buttons: {
          confirm: {
            label: 'Yes, delete it',
            className: 'btn-danger'
          },
          cancel: {
            label: 'Cancel',
            className: 'btn-outline-primary'
          }
        },
        callback: function (result) {
          if (result) {
            that.closest("form").submit();
          }
        }
      })
    });
  </script>
{% endblock %}