{% import "macros/forms.html" as forms %}
{% import "macros/icons.html" as icons %}


{% extends "admin/users/get/base.html" %}

{% block tab %}
<form
  hx-boost="true"
  hx-target="#aside"
  method="POST"
  action="{{ url_for('dashboard.users:roles', id=user.id) }}"
  _="on fief:closeModal go back"
  class="space-y-4"
>
  {{ forms.form_field(form.role) }}
  {{ forms.form_csrf_token(form) }}
  <div class="flex justify-end">
    {% call buttons.submit('btn-sm') %}
      Add
    {% endcall %}
  </div>
</form>
<table id="user-roles-table" class="table-fixed w-full">
  <thead class="text-xs uppercase text-slate-400">
    <tr class="flex flex-wrap md:table-row md:flex-no-wrap">
      <th class="w-full block md:w-auto md:table-cell py-2 font-semibold text-left">Name</th>
      <th class="w-full block md:w-auto md:table-cell py-2 font-semibold text-left"></th>
    </tr>
  </thead>
  <tbody class="text-sm">
    {% if user_roles | length == 0 %}
      <tr class="flex flex-wrap md:table-row md:flex-no-wrap border-b border-slate-200 py-2 md:py-0 bg-slate-100">
        <td colSpan="2" class="text-center">No role granted yet</td>
      </tr>
    {% endif %}
    {% for user_role in user_roles %}
      <tr class="flex flex-wrap md:table-row md:flex-no-wrap border-b border-slate-200 py-2 md:py-0">
        <td class="w-full block md:w-auto md:table-cell py-0.5 md:py-2">{{ user_role.role.name }}</td>
        <td class="w-full block md:w-auto md:table-cell py-0.5 md:py-2 text-right">
          <button
            type="button"
            hx-delete="{{ url_for('dashboard.users:delete_role', id=user.id, role_id=user_role.role_id) }}"
            hx-targer="#aside"
          >
            {{ icons.trash('w-4 h-4') }}
          </button>
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>
{% endblock %}
