{% extends 'default.html' %}

{% set active_page = "dashboard" %}

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

{% block default_content %}

  <div class="bg-white p-6" style="max-width: 60em; margin: auto">
    <h1 class="h3 mb-5">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@{{ EMAIL_DOMAIN }}</b>,
            <b>me@{{ EMAIL_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"
                 type="text"
                 pattern="[0-9a-z-_]{1,}"
                 title="Only lowercase letter, number, dash (-), underscore (_) can be used in alias prefix."
                 placeholder="email alias, for example newsletter-123_xyz"
                 autofocus required>
          <div class="small-text">
            Only lowercase letter, number, dash (-), underscore (_) can be used.
          </div>
        </div>


        <div class="col-sm-6 p-1">
          <select class="form-control custom-select" name="suffix">
            {% for suffix in suffixes %}
              <option value="{{ suffix[1] }}">
                {% if suffix[0] %}
                  {{ suffix[1] }} (your domain)
                {% else %}
                  {{ suffix[1] }}
                {% endif %}
              </option>
            {% endfor %}
          </select>
        </div>
      </div>

      <div class="row mb-2">
        <div class="col p-1">
          <select class="form-control custom-select" name="mailbox">
            {% for mailbox in mailboxes %}
              <option value="{{ mailbox }}">
                {{ mailbox }}
              </option>
            {% endfor %}
          </select>
          <div class="small-text">
            The mailbox 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 create this alias. This field is optional."></textarea>
        </div>
      </div>


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

{% endblock %}