{% extends "default.html" %}

{% set active_page = "mailbox" %}
{% block title %}Mailboxes{% endblock %}
{% block default_content %}

  <div class="row">
    <div class="col">
      <h1 class="h3">
        Mailboxes
        <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 {% if mailboxes|length == 1 %} show{% endif %}"
           id="howtouse"
           role="alert">
        A <em>mailbox</em> is just another personal email address. When creating a new alias, you could choose
        the
        mailbox that <em>owns</em> this alias, i.e:
        <br/>
        - all emails sent to this alias will be forwarded to this mailbox
        <br/>
        - from this mailbox, you can reply/send emails from the alias.
        <br/>
        <br/>
        When you signed up, a mailbox is automatically created with your email <b>{{ current_user.email }}</b>
        <br/>
        <br/>
        The mailbox doesn't have to be your email: it can be your friend's email
        if you want to create aliases for your buddy.
      </div>
      <div class="row">
        {% for mailbox in mailboxes %}

          <div class="col-12 col-lg-6">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">
                  {{ mailbox.email }}
                  {% if mailbox.verified %}

                    <span class="cursor"
                          data-toggle="tooltip"
                          data-original-title="Mailbox Verified">✅</span>
                  {% else %}
                    <span class="cursor"
                          data-toggle="tooltip"
                          data-original-title="Mailbox Not Verified">🚫</span>
                  {% endif %}
                  {% if mailbox.pgp_enabled() %}

                    <span class="cursor"
                          data-toggle="tooltip"
                          data-original-title="PGP Enabled">🗝</span>
                  {% endif %}
                  {% if mailbox.id == current_user.default_mailbox_id %}

                    <div class="badge badge-primary float-right"
                         data-toggle="tooltip"
                         title="When a new random alias is created, it belongs to the default mailbox">
                      Default Mailbox
                    </div>
                  {% endif %}
                </h5>
                <h6 class="card-subtitle mb-2 text-muted">
                  Created {{ mailbox.created_at | dt }}
                  <br/>
                  <span class="font-weight-bold">{{ mailbox.nb_alias() }}</span> aliases.
                  <br/>
                </h6>
                <a href="{{ url_for('dashboard.mailbox_detail_route', mailbox_id=mailbox.id) }}">Edit
                ➡</a>
              </div>
              <div class="card-footer p-0">
                <div class="row">
                  {% if mailbox.verified %}

                    <div class="col">
                      <form method="post">
                        {{ csrf_form.csrf_token }}
                        <input type="hidden" name="form-name" value="set-default">
                        <input type="hidden" class="mailbox" value="{{ mailbox.email }}">
                        <input type="hidden" name="mailbox_id" value="{{ mailbox.id }}">
                        <button class="card-link btn btn-link {% if mailbox.id == current_user.default_mailbox_id %} disabled{% endif %}">
                          Set As Default Mailbox
                        </button>
                      </form>
                    </div>
                  {% endif %}
                  <div class="col">
                    <form method="post">
                      {{ delete_mailbox_form.csrf_token }}
                      <input type="hidden" name="form-name" value="delete">
                      <input type="hidden" class="mailbox" value="{{ mailbox.email }}">
                      <input type="hidden" name="mailbox_id" value="{{ mailbox.id }}">
                      <select hidden name="transfer_mailbox_id" value="">
                        <option value="-1">
                          Delete my aliases
                        </option>
                        {% for mailbox_opt in mailboxes %}

                          {% if mailbox_opt.verified and mailbox_opt.id != mailbox.id %}

                            <option value="{{ mailbox_opt.id }}">
                              {{ mailbox_opt.email }}
                            </option>
                          {% endif %}
                        {% endfor %}
                      </select>
                      <span class="card-link btn btn-link text-danger float-right delete-mailbox {% if mailbox.id == current_user.default_mailbox_id %} disabled{% endif %}">
                        Delete
                      </span>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
      <form method="post" class="mt-2">
        {{ new_mailbox_form.csrf_token }}
        <input type="hidden" name="form-name" value="create">
        <h2 class="h4">New Mailbox</h2>
        {{ new_mailbox_form.email(class="form-control", placeholder="email@example.com") }}
        {{ render_field_errors(new_mailbox_form.email) }}
        <div class="small-text">A mailbox can't be a disposable or forwarding email address.</div>
        <button class="btn btn-primary mt-2">Create</button>
      </form>
    </div>
  </div>
{% endblock %}
{% block script %}

  <script>
        $(".delete-mailbox").on("click", function (e) {
            let mailbox = $(this).parent().find(".mailbox").val();

            let new_mailboxes = $(this).parent().find("select[name='transfer_mailbox_id']").find("option")
            let inputOptions = new_mailboxes.map((index, option) => { return {["value"]: option.value, ["text"]: option.text}}).toArray()

            let that = $(this);
            let message = `All aliases owned by the mailbox <b>${mailbox}</b> will be also deleted.<br>` +
                "You can choose to transfer them to a different mailbox:<br><br>";

            bootbox.prompt({
                title: '<b>Delete Mailbox</b>',
                message: message,
                value: ["-1"],
                inputType: 'select',
                inputOptions: inputOptions,
                buttons: {
                    confirm: {
                        label: 'Yes, delete it',
                        className: 'btn-danger'
                    },
                    cancel: {
                        label: 'Cancel',
                        className: 'btn-outline-primary mr-auto'
                    }
                },
                callback: function (result) {
                    if (result) {
                        that.closest("form").find("select[name='transfer_mailbox_id']").val(result)
                        that.closest("form").submit();
                    }
                }
            })
        });
  </script>
{% endblock %}