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

{% set domain_detail_page = "auto_create" %}
{% block title %}{{ custom_domain.domain }} Auto Create Rules{% endblock %}
{% block domain_detail_content %}

  <h1 class="h2 mb-1">{{ custom_domain.domain }} auto create alias rules</h1>
  <div>
    <span class="badge badge-info">Advanced</span>
    <span class="badge badge-warning">Beta</span>
  </div>
  {% if custom_domain.catch_all %}

    <div class="alert alert-warning mt-3">Rules are ineffective when catch-all is enabled.</div>
  {% endif %}
  <div class="{% if custom_domain.catch_all %}
     disabled-content{% endif %}">
    <div class="mt-3 mb-2">
      For a greater control than a simple catch-all, you can define a set of <b>rules</b> to auto create aliases.
      <br />
      A rule is based on a regular expression (<b>regex</b>): if an alias <b>fully</b> matches the expression,
      it'll be automatically created.
    </div>
    <div class="alert alert-info">
      Only the <b>local</b> part of the alias (i.e. <b>@{{ custom_domain.domain }}</b> is ignored) during the
      regex test.
    </div>
    <div class="alert alert-info">When there are several rules, rules will be evaluated by their order.</div>
    {% if custom_domain.auto_create_rules | length > 0 %}

      <div class="mt-2" id="rule-list">
        {% for auto_create_rule in custom_domain.auto_create_rules %}

          <div class="card">
            <div class="card-body">
              Order: <b>{{ auto_create_rule.order }}</b>
              <br />
              <input readonly value="{{ auto_create_rule.regex }}" class="form-control">
              New alias will belong to
              {% for mailbox in auto_create_rule.mailboxes %}

                <b>{{ mailbox.email }}</b>
                {% if not loop.last %},{% endif %}
              {% endfor %}
              <form method="post" class="mt-2">
                <input type="hidden" name="form-name" value="delete-auto-create-rule">
                <input type="hidden" name="rule-id" value="{{ auto_create_rule.id }}">
                <button class="btn btn-outline-danger btn-sm float-right">Delete</button>
              </form>
            </div>
          </div>
        {% endfor %}
      </div>
    {% endif %}
    <div class="mt-2" id="new-rule">
      <hr />
      <h3>New rule</h3>
      <form method="post" action="#rule-list" data-parsley-validate>
        <input type="hidden" name="form-name" value="create-auto-create-rule">
        {{ new_auto_create_rule_form.csrf_token }}
        <div class="form-group">
          <label>Regex</label>
          {{ new_auto_create_rule_form.regex(class="form-control",
                    placeholder="prefix.*") }}
          {{ render_field_errors(new_auto_create_rule_form.regex) }}
          <div class="small-text">
            For example, if you want aliases that starts with <b>prefix</b> to be automatically created, you can set
            the
            regex to <em data-toggle="tooltip"
     title="Click to copy"
     class="clipboard"
     data-clipboard-text="prefix.*">prefix.*</em>
            <br />
            If you want aliases that ends with <b>suffix</b> to be automatically created, you can use the regex
            <em data-toggle="tooltip"
                title="Click to copy"
                class="clipboard"
                data-clipboard-text=".*suffix">.*suffix</em>
            <br />
            To test out regex, we recommend using regex tester tool like
            <a href="https://regex101.com" target="_blank" rel="noopener noreferrer">https://regex101.com↗</a>
          </div>
        </div>
        <div class="form-group">
          <label>Order</label>
          {{ new_auto_create_rule_form.order(class="form-control", placeholder="10", min=1, value=1, type="number") }}
          {{ render_field_errors(new_auto_create_rule_form.order) }}
        </div>
        <div class="form-group">
          <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.id == current_user.default_mailbox_id %}selected{% endif %}>{{ mailbox.email }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <button class="btn btn-primary mt-2">Create</button>
      </form>
    </div>
    <div id="debug-zone">
      <hr />
      <h3>Debug Zone</h3>
      <p>You can test whether an alias will be automatically created given the rules above</p>
      <div class="alert alert-info">No worries, no alias will be created during the test :)</div>
      <form method="post" action="#debug-zone">
        <input type="hidden" name="form-name" value="test-auto-create-rule">
        {{ auto_create_test_form.csrf_token }}
        <div class="d-flex">
          <div class="form-group d-flex">
            {{ auto_create_test_form.local(class="form-control", type="text", placeholder="local", value=auto_create_test_local) }}
            {{ render_field_errors(auto_create_test_form.local) }}
            <b class="pt-2 ml-1">@{{ custom_domain.domain }}</b>
          </div>
        </div>
        <div class="form-group">
          <button class="btn btn-outline-primary">Test</button>
        </div>
      </form>
      {% if auto_create_test_result %}

        <div class="alert {% if auto_create_test_passed %}
           alert-success {% else %} alert-warning {% endif %}">{{ auto_create_test_result }}</div>
      {% endif %}
    </div>
  </div>
{% endblock %}
{% block script %}<script>$('.mailbox-select').multipleSelect();</script>{% endblock %}