{% extends "modal_base.html" %}
{% import "macros/ordering.html" as ordering_macros  %}
{% import "macros/status.html" as status_macros  %}


{% block content %}
  <section>
    <div class="ui segment no-padding transparent">
      <div class="ui grid table-bar">
        <div class="ui six wide column left floated">
          <b>{{ pagination.total }}</b> users affected by <b>{{ affecting_instance }}</b>
        </div>
        <div class="ui six wide column right aligned floated">
          <a id="export-button" class="ui button yellow tiny" href="{{ url_for(".export", search_term=search_term, status=status, resource_group_id=resource_group_id, tag_id=tag_id, order=ordering.order_string, affected=request.args.get("affected"), token_size_violation=token_size_violation) }}"><i class="icon download"></i>Export</a>
        </div>
      </div>
    </div>
    <div class="ui segment no-padding full-height">
      <table id="accounts-table" class="ui striped table">
        <thead>
        <tr>
          <th class="account-first-name">
            {{ ordering_macros.ordering_header("First Name", ordering.links["given_name"]) }}
          </th>
          <th class="account-last-name">
            {{ ordering_macros.ordering_header("Last Name", ordering.links["family_name"]) }}
          </th>
          <th class="account-email">
            {{ ordering_macros.ordering_header("Email", ordering.links["email"]) }}
          </th>
          <th class="account-product">Product</th>
          <th class="account-status">Account Status</th>
          <th class="account-wip">VIP</th>
        </tr>
        </thead>
        <tbody>
        {% for account in accounts %}
          <tr>
            <td class="account-first-name">
              <a href="{{ url_for('.show', account_id=account.id) }}">
                {{ account.given_name|default("N/A", True) }}
              </a>
            </td>
            <td class="account-last-name">
              <a href="{{ url_for('.show', account_id=account.id) }}">
                {{ account.family_name|default("N/A", True) }}
              </a>
            </td>
            <td class="account-email">
              {{ account.email }}
              {% if account.is_external %}
                <div class="ui medium label column-label external">EXTERNAL</div>
              {% endif %}
              {% if account.no_mfa %}
                <div class="ui medium label column-label no_mfa">NO MFA</div>
              {% endif %}
            </td>
            <td class="account-product">
              {% if account.enabled_resource_groups|length > 2 %}
                <span data-tooltip="{% for resource_group in account.enabled_resource_groups %}
                                      {{ resource_group.name }}{% if not loop.last %}, {% endif %}
                                    {%  endfor %}"
                      data-inverted="" data-variation="mini" data-position="bottom center">
                  {% for resource_group in account.enabled_resource_groups|slice(2)|first %}
                    {{ resource_group.name }},
                  {% endfor %}
                  and {{ account.enabled_resource_groups|length - 2 }} more
                </span>
              {%  else %}
                {% for resource_group in account.enabled_resource_groups %}
                  {{ resource_group.name }}
                  {% if not loop.last %}, {% endif %}
                {% endfor %}
              {% endif %}
            </td>
            <td class="account-status">{{ status_macros.text(account.status) }}</td>
            <td class="account-wip">{% if account.is_vip %}VIP{% else %}-{% endif %}</td>
          </tr>
        {% else %}
          <tr>
            <td class="table-no-data-notice center aligned" colspan="6">
              <img src="{{ static_url_for('static', filename='img/no-results.svg') }}">
              <p>No results to show.</p>
              <p>Try changing search parameters.</p>
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="ui divider hidden"></div>
    {% with url_params = {"modal": "True", "affected": request.args.get("affected"), "order": request.args.get("order") }%}
      {% include "components/pagination.html" %}
    {% endwith %}

  </section>
{% endblock %}