{% extends 'default.html' %}

{% set active_page = "dashboard" %}

{% block title %}
  Alias Contact Manager
{% endblock %}

{% block default_content %}
  <div class="page-header row">
    <h3 class="page-title col">
      {{ alias }}
    </h3>
  </div>

  <div class="alert alert-primary" role="alert">
    <p>
      To send an email from your alias to someone, says <b>friend@example.com</b>, you need to: <br>

      1. Create a special email address called <em>reverse-alias</em> for friend@example.com using the form below <br>
      2. Send the email to the reverse-alias <em>instead of</em> friend@example.com
      <br>
      3. SimpleLogin will send this email from the alias to friend@example.com for you
    </p>
    <p>
      This might sound complicated but trust us, only the first time is a bit awkward.
    </p>
    <p>
      {% if gen_email.mailbox_id %}
        Make sure you send the email from the mailbox <b>{{ gen_email.mailbox.email }}</b>.
        This is because only the mailbox that owns the alias can send emails from it.
      {% else %}
        Make sure you send the email from your personal email address ({{ current_user.email }}).
      {% endif %}
    </p>
  </div>

  <form method="post">
    <input type="hidden" name="form-name" value="create">
    {{ new_contact_form.csrf_token }}

    <label class="form-label">Where do you want to send email to?</label>

    {{ new_contact_form.email(class="form-control", placeholder="First Last <email@example.com>") }}
    {{ render_field_errors(new_contact_form.email) }}
    <button class="btn btn-primary mt-2">Create reverse-alias</button>
  </form>

  <div class="row">
    {% for contact in contacts %}
      <div class="col-md-6">
        <div class="my-2 p-2 card {% if contact.id == contact_id %} highlight-row {% endif %}">
          <div>
            <span>
              <a href="{{ 'mailto:' + contact.website_send_to() }}"
                 data-toggle="tooltip"
                 title="You can click on this to open your email client. Or use the copy button 👉"
                 class="font-weight-bold">*************************</a>

              <span class="clipboard btn btn-sm btn-success copy-btn" data-toggle="tooltip"
                    title="Copy to clipboard"
                    data-clipboard-text="{{ contact.website_send_to() }}">
                Copy reverse-alias
              </span>
            </span>
          </div>

          <div>
            <i class="fe fe-mail"></i> ➡ {{ contact.website_from or contact.website_email }}
          </div>

          <div class="mb-2 text-muted small-text">
            Created {{ contact.created_at | dt }} <br>

            {% if contact.last_reply() %}
              {% set email_log = contact.last_reply() %}
              Last email sent {{ email_log.created_at | dt }}
            {% endif %}
          </div>

          <div>
            <form method="post">
              <input type="hidden" name="form-name" value="delete">
              <input type="hidden" name="contact-id" value="{{ contact.id }}">
              <span class="card-link btn btn-link float-right delete-forward-email">
                Delete
              </span>
            </form>
          </div>

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

{% endblock %}


{% block script %}
  <script>
    $(".delete-forward-email").on("click", function (e) {
      notie.confirm({
        text: "Activity history associated with this reverse-alias will be deleted, " +
          " please confirm.",
        cancelCallback: () => {
          // nothing to do
        },
        submitCallback: () => {
          $(this).closest("form").submit();
        }
      });
    });
  </script>
{% endblock %}