{% extends 'default.html' %}

{% set active_page = "dashboard" %}

{% block title %}
  Custom Alias
{% endblock %}

{% block default_content %}
  <div class="card">
    <div class="card-body">
      <h1 class="h3">New Email Alias</h1>

      {% if  user_custom_domains|length == 0 and not DISABLE_ALIAS_SUFFIX %}
        <div class="row">
          <div class="col p-1">
            <div class="alert alert-primary" role="alert">
              You might notice a random word after the dot(<em>.</em>) in the alias.
              This part is to avoid a person taking all the "nice" aliases like
              <b>hello@{{ FIRST_ALIAS_DOMAIN }}</b>,
              <b>me@{{ FIRST_ALIAS_DOMAIN }}</b>, etc. <br>
              If you add your own domain, this restriction is removed and you can fully customize the alias. <br>
            </div>
          </div>
        </div>
      {% endif %}

      <form method="post">
        <div class="row mb-2">
          <div class="col-sm-6 mb-1 p-1" style="min-width: 4em">
            <input name="prefix" class="form-control"
                   id="prefix"
                   type="text"
                   pattern="[0-9a-z-_]{1,}"
                   title="Only lowercase letters, numbers, dashes (-) and underscores (_) are currently supported."
                   placeholder="Email alias, for example newsletter-123_xyz"
                   autofocus required>
            <div class="small-text">
              Only lowercase letters, numbers, dashes (-) and underscores (_) are currently supported.
            </div>
          </div>


          <div class="col-sm-6 p-1">
            <select class="form-control" name="suffix">
              {% for suffix_info in suffixes %}
                <option value="{{ suffix_info.signed_suffix }}"
                    {% if suffix_info.is_premium %}
                      title="Only available to Premium accounts"
                    {% elif not suffix_info.is_custom and at_least_a_premium_domain %}
                      title="Available to all accounts"
                    {% endif %}
                >
                  {% if suffix_info.is_custom %}
                    {{ suffix_info.suffix }} (your domain)
                  {% else %}
                    {% if suffix_info.is_premium %}
                      {{ suffix_info.suffix }} (Premium domain)
                    {% else %}
                      {{ suffix_info.suffix }} (Public domain)
                    {% endif %}
                  {% endif %}
                </option>
              {% endfor %}
            </select>
          </div>
        </div>

        <div class="row mb-2">
          <div class="col p-1">
            <select data-width="100%"
                    class="mailbox-select" id="mailboxes" multiple name="mailboxes">
              {% for mailbox in mailboxes %}
                <option value="{{ mailbox.id }}" {% if mailbox.id == current_user.default_mailbox_id %}
                        selected {% endif %}>
                  {{ mailbox.email }}
                </option>
              {% endfor %}
            </select>
            <div class="small-text">
              The mailbox(es) that owns this alias.
            </div>
          </div>
        </div>

        <div class="row mb-2">
          <div class="col p-1">
            <textarea name="note"
                      class="form-control"
                      rows="3"
                      placeholder="Note, can be anything to help you remember why you created this alias. This field is optional."></textarea>
          </div>
        </div>

        <div class="row">
          <div class="col p-1">
            <span id="submit" class="btn btn-primary mt-1">Create</span>
          </div>
        </div>
      </form>
    </div>
  </div>

{% endblock %}

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

    $("#submit").on("click", async function () {
      let that = $(this);
      let mailbox_ids = $(`#mailboxes`).val();
      let prefix = $('#prefix').val();

      if (mailbox_ids.length == 0) {
        toastr.error("You must select at least a mailbox", "Error");
        return;
      }

      if (!prefix) {
        toastr.error("Alias cannot be empty", "Error");
        return;
      }

      that.closest("form").submit();

    })
  </script>
{% endblock %}