{% extends 'default.html' %}
{% set active_page = "directory" %}

{% block title %}
  Directory
{% endblock %}

{% block default_content %}
  <div class="row">
    <div class="col">
      <h1 class="h3"> Directories
        <a class="ml-3 text-info" style="font-size: 12px" data-toggle="collapse" href="#howtouse" role="button"
           aria-expanded="false" aria-controls="collapseExample">
          How to use <i class="fe fe-chevrons-down"></i>
        </a>
      </h1>


      {% if not current_user.is_premium() %}
        <div class="alert alert-danger" role="alert">
          This feature is only available in premium plan.
        </div>
      {% endif %}

      <div class="alert alert-primary collapse" id="howtouse" role="alert">
        <div>
          Directory allows you to create aliases <b>on the fly</b>.
        </div>
        <div class="mt-2 pb-2">
          1️⃣ Pick a name for your directory, says <em>my_dir</em> <br>

          2️⃣ Quickly use one of the following formats to create an alias on-the-fly <b>without creating this alias
          beforehand</b>
        </div>
        <div class="pl-3 py-2 bg-white">
          <em>my_dir/<b>anything</b>@{{ FIRST_ALIAS_DOMAIN }}</em> or <br>
          <em>my_dir+<b>anything</b>@{{ FIRST_ALIAS_DOMAIN }}</em> or <br>
          <em>my_dir#<b>anything</b>@{{ FIRST_ALIAS_DOMAIN }}</em> <br>
        </div>
        <em><b>anything</b></em> is any string composed of lowercase character.

        <div class="mt-2">
          You can use this feature on the following domains:
          {% for alias_domain in ALIAS_DOMAINS %}
            <div class="font-weight-bold">{{ alias_domain }} </div>
          {% endfor %}
        </div>

        <div class="h4 text-primary mt-3">
          ℹ️
          The alias will be created the first time it receives an email.
        </div>

      </div>

      <div class="row">
        {% for dir in dirs %}
          <div class="col-12 col-lg-6">
            <div class="card" style="">
              <div class="card-body">
                <h5 class="card-title">
                  {{ dir.name }}
                </h5>
                <h6 class="card-subtitle mb-2 text-muted">
                  Created {{ dir.created_at | dt }} <br>
                  <span class="font-weight-bold">{{ dir.nb_alias() }}</span> aliases.
                </h6>
              </div>

              <div class="card-footer p-0">
                <div class="row">
                  <div class="col">
                    <form method="post">
                      <input type="hidden" name="form-name" value="delete">
                      <input type="hidden" class="dir-name" value="{{ dir.name }}">
                      <input type="hidden" name="dir-id" value="{{ dir.id }}">
                      <span class="card-link btn btn-link float-right text-danger delete-dir">
                    Delete
                  </span>
                    </form>
                  </div>
                </div>

              </div>

            </div>
          </div>
        {% endfor %}
      </div>

      <form method="post" class="mt-2">
        {{ new_dir_form.csrf_token }}
        <input type="hidden" name="form-name" value="create">

        <h2 class="h4">New Directory</h2>

        {{ new_dir_form.name(class="form-control", placeholder="my-directory",
            pattern="[0-9a-z-_]{3,}",
            title="Only letter, number, dash (-), underscore (_) can be used. Directory name must be at least 3 characters.") }}
        {{ render_field_errors(new_dir_form.name) }}
        <div class="small-text">
          Directory name must be at least 3 characters.
          Only lowercase letter, number, dash (-), underscore (_) can be used.
        </div>

        <button class="btn btn-lg btn-success mt-2">Create</button>
      </form>

    </div>

  </div>
{% endblock %}

{% block script %}
  <script>
    $(".delete-dir").on("click", function (e) {
      let directory = $(this).parent().find(".dir-name").val();

      let that = $(this);
      let message = `All aliases associated with <b>${directory}</b> directory will also be deleted, ` +
        " please confirm.";

      bootbox.confirm({
        message: message,
        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 %}