{% extends "base.html" %}

{% block title %}{{ super() }} / Settings / Users{% endblock %}

{% block head %}
{% for link in vitejs.css_links_for('settings.users.js') %}{{ link | safe }}{% endfor %}
{% endblock %}

{% block sidebar %}
{% include "settings/menu.html" %}
{% endblock %}

{% block content %}
<div id="vueapp" v-cloak>
  <EditUserDialog ref="userModal"></EditUserDialog>
  {% raw %}
  <DeleteDialog ref="delete_modal" title="Delete user" v-slot="{resource}">
    <p class="fs-5 text-center">Please confirm the deletion of user <strong>{{resource.name}}</strong>.</p>
  </DeleteDialog>
  {% endraw %}

  <div class="row">
    <table class="table table-striped table-bordered table-hover" id="tableUsers" cellspacing="0">
      <thead>
        <tr>
          <th>Username</th>
          <th>Email</th>
          <th>Phone</th>
          <th>Active</th>
          <th>Admin.</th>
          <th>Environments</th>
          <th><!-- actions --></th>
        </tr>
      </thead>
      <tbody>
        {% for role_item in role_list %}
        <tr>
          <td>{{role_item.role_name}}</td>
          <td>{{role_item.role_email or ''}}</td>
          <td>{{role_item.role_phone or ''}}</td>
          <td class="text-center" data-col="is-active">{% if role_item.is_active %}<span class="badge text-bg-success">Active</span>{% else %}<span class="badge text-bg-secondary">Inactive</span>{% endif %}</td>
          <td class="text-center" data-col="is-admin">{% if role_item.is_admin %}<span class="badge text-bg-danger">Admin</span>{% else %}<span class="badge text-bg-success">User</span>{% endif %}</td>
          <td>
          {% for group in role_item.groups %}
          {% if group.environment %}
          <a href="/settings/environments/{{ group.environment.name }}/members"><span class="badge border text-body-secondary m-1">{{group.environment.name}}</span></a>
          {% endif %}
          {% endfor %}
          </td>
          <td class="text-center">
            <button
              type="button"
              class="btn btn-outline-secondary btn-sm m-1"
              data-bs-placement="bottom"
              title="Edit"
              v-on:click.prevent="$refs.userModal.edit('{{ role_item.role_name }}')">
              <i class="fa fa-edit"></i></button>
            <button
              type="button"
              class="btn btn-outline-secondary btn-sm m-1"
              data-bs-toggle="modal"
              data-bs-placement="bottom"
              title="Delete"
              data-bs-target="#modalDeleteUser"
              v-on:click.prevent="$refs.delete_modal.open('/json/users/{{ role_item.role_name }}')">
              <i class="fa fa-trash-o"></i></button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<script type="module" src="{{ vitejs.url_for('settings.users.js') }}"></script>
{% endblock %}
