{% extends "base.html" %}

{% load socialaccount %}
{% load static %}
{% load relay_tags %}

{% block content %}

{% get_social_accounts request.user as accounts %}

<main id="profile-main" class="container bg-light env-bg dashboard-container container" data-api-token="{{ user.profile_set.first.api_token }}">
  <div class="main-list flx flx-col jst-cntr">
    {% if messages %}
      <div class="messages profile-messages hidden">
          {% for message in messages %}
          <div{% if message.tags %} class="{{ message.tags }} js-notification" {% else %} class="" {% endif %}>
            <span>{{ message }}</span>
            <button class="flx center-value dismiss js-dismiss">
              <svg class="x-close-icon fill-current text-gray hover:text-purple-800" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
            </button>
          </div>
        {% endfor %}
      </div>
    {% endif %}
      <div class="alias-list">
        <div class="dashboard-greeting">
          <span class="dashboard-greeting-message">Welcome, <span class="demi">{{ request.user.email }}</span>!</span>
        </div>
        {% include "includes/banners.html" %}
        <div class="flx flx-row dashboard-header inset">
          <h2 class="section-headline dashboard-headline">Manage your Relay aliases</h2>
          <div class="remaining-aliases-wrapper flx al-cntr jst-cntr hide-750">
            {% include "includes/remaining-aliases.html" %}
          </div>
        </div>
        <div class="flx flx-row flx-end inset wrap-col-600">
          <div class="show-750 flx al-cntr">
            {% include "includes/remaining-aliases.html" %}
          </div>
          <form action="/emails/" class="dash-create" method="POST">
            <input type="hidden" name="api_token" value="{{ user.profile_set.first.api_token }}">
            <button
            class="blue-btn-states dash-create-new-relay flx al-cntr jst-cntr {%if relay_addresses|length == settings.MAX_NUM_FREE_ALIASES %} btn-disabled {% endif %}"
            type="submit" value="Generate new alias" data-event-label="Create New Relay Alias"

            {% if relay_addresses|length == settings.MAX_NUM_FREE_ALIASES %}
              title="You have reached the alias limit."
            {% else %}
              title="Generate new alias"
            {% endif %}
            >
            <span class="generate-new-relay-icon"></span>
            <span class="generate-new-alias-text">Generate New Alias</span>
            </button>
          </form>
        </div>

        {% if relay_addresses|length == 0 %}
          {% include "includes/dashboard_onboarding.html" %}
        {% endif %}

        {% for relay_address in relay_addresses %}
          <div class="relay-email {% if relay_address.enabled %} card-enabled {% endif %}" data-relay-address="{{ relay_address.address }}@{{ RELAY_DOMAIN }}" data-relay-address-id="{{ relay_address.id }}">
            <div class="relay-email-row card-top-row flx flx-row inset">
              <!-- alias label -->
              <div class="additional-notes hide-mobile">
                <input data-label="" type="text" maxlength="50" value="" aria-label="Edit the label for this alias" class="relay-email-address-label ff-Met">
                <span class="saved-confirmation">Label saved!</span>
                <span class="input-error"></span>
              </div>

              <!-- enable/disable email forwarding -->
              <div class="relay-email-column flx flx-row email-forwarding">
                <form action="{% url 'emails-index' %}" method="POST" class="flx flx-row al-cntr email-forwarding-form">
                  <input type="hidden" name="method_override" value="PUT">
                  <input type="hidden" name="api_token" value="{{ user.profile_set.first.api_token }}">
                  <input type="hidden" name="relay_address_id" value="{{ relay_address.id }}">
                  <span class="forwarding-label-wrapper card-small-text">{% if relay_address.enabled %} forwarding {% else %} blocking {% endif %}</span>
                  {% if relay_address.enabled %}
                  <button type="submit" name="enabled" value="Disable" title="Disable email forwarding for this alias" class="text-center forwarding-toggle"></button>
                  {% else %}
                  <button type="submit" name="enabled" value="Enable" title="Enable email forwarding for this alias" class="text-center forwarding-disabled forwarding-toggle"></button>
                  {% endif %}
                </form>
              </div> <!--end enable/disable toggle -->
            </div>
            <div class="relay-email-card drop-shadow-light flx flx-col">
              <div class="relay-email-row card-middle-row card-row flx flx-row">
                <!--relay address-->
                <div class="relay-email-column flx flx-col">
                  <span class="relay-email-address-note"></span>
                  <div class="flx flx-row al-cntr">
                    <button title="Click to copy"
                      data-id="{{ relay_address.id }}"
                      data-clipboard-text="{{ relay_address.address }}@{{ RELAY_DOMAIN }}"
                      class="relay-address click-copy ff-Met flx jst-cntr al-cntr">
                        {{ relay_address.address }}@{{ RELAY_DOMAIN }}
                        <span class="alias-copied-icon"></span>
                        <span class="alias-copied-message">Copied!</span>
                    </button>
                  </div>
                  <button class="toggle-details-visibility card-small-text">
                    <span class="show-details-label detail-label flx">Show Details</span>
                    <span class="hide-details-label detail-label flx">Hide Details</span>
                    <span class="detail-label-icon"></span>
                  </button>
                </div>
                <div class="relay-email-column alias-stats-wrapper">
                  <div class="nested-grid flx flx-row hide-mobile">
                    {% include "includes/alias-stats.html" %}
                  </div>
                </div>
              </div><!-- end row -->
              <div class="relay-email-row card-row details-wrapper flx">
                <div class="show-mobile nested-grid flx flx-row">
                  {% include "includes/alias-stats.html" %}
                </div>
                <div class="details-row">
                  <section class="relay-email-column details-column flx flx-col">
                    <span class="card-small-text created-label">Created:</span>
                    <span class="email-value card-small-text text-dark">{{ relay_address.created_at|date:"M j, Y" }}</span>
                  </section>

                  <!-- forwarding message -->
                  <section class="relay-email-column hide-mobile details-column flx flx-col">
                    <span class="relay-email-label email-forwarding-label card-small-text">Forward emails to</span>
                    <span class="text-dark demi primary-email-address card-small-text">{{ request.user.email }}</span>
                  </section>
                </div>


                <!-- delete email address -->
                <section class="relay-email-column column-delete center-value">
                  <form action="{% url 'emails-index' %}" method="POST" class="delete-email-form flx jst-cntr al-cntr" data-delete-relay="{{ relay_address.address }}@{{ RELAY_DOMAIN }}">
                    <input type="hidden" name="method_override" value="DELETE">
                    <input type="hidden" name="api_token" value="{{ user.profile_set.first.api_token }}">
                    <input type="hidden" name="relay_address_id" value="{{ relay_address.id }}">
                    <button type="submit" name="delete" value="" class="dashboard-delete-button delete-relay-email-button" aria-label="Delete this alias">
                      <span class="remove-label relay-email-label card-small-text">Delete</span>
                    </button>
                  </form>
                </section> <!--end delete-->

              </div><!--row-end-->
            </div> <!-- end card-->
          </div> <!-- end relay-email-->
        {% endfor %}
        <div> <!-- informtaion footer -->
          Firefox Relay supports email forwarding (including attachments) of email up to 150KB in size
        </div> <!-- end informtaion footer -->
      </div><!-- end dashboard-container -->
    </div>
  </div>
</main>

{% endblock %}