{% extends "base.html" %}

{% from "components/alert.html" import Alert %}
{% from "components/delete_confirmation.html" import DeleteConfirmation %}
{% from "components/icon.html" import Icon %}
{% from "components/modal.html" import Modal %}

{% block content %}
  <div class="ccpo-panel-container">
    <div class='col'>
      <div class="h2">
        {{ "ccpo.users_title" | translate }}
      </div>

      {% include "fragments/flash.html" %}

      <table>
        <thead>
          <tr>
            <th>{{ "common.name" | translate }}</th>
            <th>{{ "common.email" | translate }}</th>
            <th>{{ "common.dod_id" | translate }}</th>
            {% if user_can(permissions.DELETE_CCPO_USER) %}
              <th></th>
            {% endif %}
          </tr>
        </thead>
        <tbody>
          {% for user, form in users_info %}
            {% set modal_id = "disable_ccpo_user_{}".format(user.dod_id) %}
            {% set disable_button_class = 'button-danger-outline' %}
            {% if user == g.current_user %}
              {% set disable_button_class = "usa-button-disabled" %}
            {% endif %}

            <tr>
              <td>{{ user.full_name }}</td>
              <td>{{ user.email }}</td>
              <td>{{ user.dod_id }}</td>
              {% if user_can(permissions.DELETE_CCPO_USER) %}
                <td>
                  <a v-on:click="openModal('{{ modal_id }}')" class='usa-button {{ disable_button_class }}'>
                    {{ "common.disable" | translate }}
                  </a>
                </td>
              {% endif %}
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    {% if user_can(permissions.CREATE_CCPO_USER) %}
      <a class="icon-link" href="{{ url_for('ccpo.add_new_user')}}">
        {{ "ccpo.add_user" | translate }} {{ Icon("plus") }}
      </a>
    {% endif %}

    {% if user_can(permissions.DELETE_CCPO_USER) %}
      {% for user, form in users_info %}
        {% set modal_id = "disable_ccpo_user_{}".format(user.dod_id) %}
        {% call Modal(name=modal_id) %}
          <h1>Disable CCPO User</h1>
          <hr>
          {{
            Alert(
              title=("components.modal.destructive_title" | translate),
              message=("ccpo.disable_user.alert_message" | translate({"user_name": user.full_name})),
              level="warning"
            )
          }}
          {{
            DeleteConfirmation(
              modal_id=modal_id,
              delete_text='Remove Access',
              delete_action=(url_for('ccpo.remove_access', user_id=user.id)),
              form=form,
              confirmation_text='remove'
            )
          }}
        {% endcall %}
      {% endfor %}
    {% endif %}
  </div>
{% endblock %}