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

{% block title %}Users{% endblock %}

{% block subnav_header %}
  Users
{% endblock %}

{% block subnav_items %}
  {% with url_params = {"resource_group_id": request.args.get("resource_group_id"),
  "tag_id": request.args.get("tag_id"),
  "token_size_violation": request.args.get("token_size_violation"),
  "expire_soon": request.args.get("expire_soon") }%}
    <div class="item {% if status == DNAAccountStatuses.ACTIVE %}active{% endif %}">
      <a href="{{ url_for("dna_accounts.list", status=DNAAccountStatuses.ACTIVE, **url_params) }}">
        {{ DNAAccountStatuses.ACTIVE|capitalize }}
      </a>
    </div>
    <div class="item {% if status == DNAAccountStatuses.PENDING %}active{% endif %}">
      <a href="{{ url_for("dna_accounts.list", status=DNAAccountStatuses.PENDING, **url_params) }}">
        {{ DNAAccountStatuses.PENDING|capitalize }}
      </a>
    </div>
    <div class="item {% if status == DNAAccountStatuses.INVITED %}active{% endif %}">
      <a href="{{ url_for("dna_accounts.list", status=DNAAccountStatuses.INVITED, **url_params) }}">
        {{ DNAAccountStatuses.INVITED|capitalize }}
      </a>
    </div>
    <div class="item {% if status == DNAAccountStatuses.SUSPENDED %}active{% endif %}">
      <a href="{{ url_for("dna_accounts.list", status=DNAAccountStatuses.SUSPENDED, **url_params) }}">
        {{ DNAAccountStatuses.SUSPENDED|capitalize }}
      </a>
    </div>
    <div class="item {% if not status %}active{% endif %}">
      <a href="{{ url_for("dna_accounts.list", **url_params) }}">
        All
      </a>
    </div>
  {% endwith %}
{% endblock %}


{% block content %}
  <section>
    <div class="ui segment no-padding transparent">
      <div class="ui grid table-bar">
        <div class="ui five wide column left floated">
          <a href="{{ url_for('.create') }}" class="ui button pink tiny" id="new-user-button"><img class="icon" src="{{ static_url_for('static', filename='img/icons/plus.svg') }}">New user</a>
            {% if affecting_instance %}
            <div class="ui label affecting-instance-column">
                Affected by
                <div class="detail">{{ affecting_instance }}</div>
                <a href="{{ url_for("dna_accounts.list") }}"><i class="delete icon"></i></a>
            </div>
            {% endif %}
            {% if token_size_violation %}
              <div class="ui label affecting-instance-column">
                  Max token size violation
                {% with url_params = {"resource_group_id": request.args.get("resource_group_id"), "tag_id": request.args.get("tag_id"), "status": request.args.get("status") }%}
                <a href="{{ url_for("dna_accounts.list", **url_params) }}"><i class="delete icon"></i></a>
                {% endwith %}
              </div>
            {% endif %}
            {% if expire_soon %}
              <div class="ui label affecting-instance-column">
                  Expire soon
                {% with url_params = {"resource_group_id": request.args.get("resource_group_id"), "tag_id": request.args.get("tag_id"), "status": request.args.get("status") }%}
                <a href="{{ url_for("dna_accounts.list", **url_params) }}"><i class="delete icon"></i></a>
                {% endwith %}
              </div>
            {% endif %}
        </div>
        <div class="ui column right aligned accounts-filter-column right floated seven wide">
          <form method="get">
            <div class="ui input value custom-widget">
              {% if request.args.get('status') %}
                <input type="hidden" name="status" value={{ request.args.get('status') }}>
              {% endif %}
              {% if request.args.get('token_size_violation') %}
                <input type="hidden" name="token_size_violation" value={{ request.args.get('token_size_violation') }}>
              {% endif %}
              {% if request.args.get('expire_soon') %}
                <input type="hidden" name="expire_soon" value={{ request.args.get('expire_soon') }}>
              {% endif %}
              <select class="ui search dropdown submittable-select" name="resource_group_id">
                <option value="__None">All Products</option>
                {% for resource_group in resource_groups %}
                  <option value="{{ resource_group.id }}" {% if resource_group.id == resource_group_id %}selected{% endif %}>{{ resource_group.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="ui input value custom-widget">
              <select class="ui search dropdown submittable-select" name="tag_id">
                <option value="__None">All Tags</option>
                {% for tag in tags %}
                  <option value="{{ tag.id }}" {% if tag.id == tag_id %}selected{% endif %}>{{ tag.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="ui icon top left pointing dropdown button filter-button">
              <i class="bars icon"></i>
              <div class="menu filter-menu">
                {% with url_params = {"resource_group_id": request.args.get("resource_group_id"), "tag_id": request.args.get("tag_id"), "status": request.args.get("status") }%}
                  <a class="item" href="{{ url_for("dna_accounts.list",  token_size_violation="True", **url_params) }}">Max token size violation</a>
                  <a class="item" href="{{ url_for("dna_accounts.list",  expire_soon="True", **url_params) }}">Expire soon</a>
                {% endwith %}
              </div>
            </div>
            <a id="export-button" 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, expire_soon=expire_soon) }}" class="ui button yellow tiny"><i class="icon download"></i>Export</a>
          </form>
        </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 class="products-tooltip" 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[:2] %}
                    {{ 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) }}
              {% if account.expires_soon %}
                <span class="status-tooltip" data-html="Expires on {{ account.expiration_date|strftime("%m/%d/%y") }}" data-position="bottom center">
                  <img class="icon warning expiration" src="{{ static_url_for('static', filename='img/icons/warning.svg') }}">
                </span>
              {% endif %}
            </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>

    {% include "components/pagination.html" %}

  </section>
{% endblock %}