{% extends "layout.html" %}
{% block title %}Roles{% endblock %}
{% block head %}
    <meta name="csrf" value="{{ csrf_token }}" />
{% endblock %}
{% block content %}

{% if all_system_role_assignments.keys().__len__() >= 0 %}
<h1 class='text-2xl font-light mb-4'>System role assignments</h1>

<table class='table-auto w-full border border-slate-300 border-collapse font-inter'>
  <thead>
    <tr>
      <th class='h-12 bg-slate-200 text-center font-light border border-slate-300 px-2 w-1/4'>Role name</th>
      <th class='h-12 bg-slate-200 text-center font-light border border-slate-300 px-2 w-1/4'>Permissions</th>
      <th class='h-12 bg-slate-200 text-center font-light border border-slate-300 px-2 w-1/4'>Users</th>
    </tr>
  </thead>
  <tbody>
    {% for role in all_system_role_assignments.keys() %}
    <tr>
      <td class='text-left border border-slate-300 px-2 py-2'>{{ role }}</td>
      <td class='text-left border border-slate-300 px-2 py-2'>
        <ul class='list-disc list-inside'>
          {% for permission in all_system_role_assignments[role]['permissions'] %}
          <li>{{ permission }}</li>
          {% endfor %}
        </ul>
      </td>
      <td class='text-left border border-slate-300 px-2 py-2 align-top'>
        <ul class='list-none pl-0'>
          {% for user in all_system_role_assignments[role]['users'] %}
          <li class='flex items-center mb-1'>
            <button
              name='remove-role-button'
              data-user='{{ user }}'
              data-role='{{ role }}'
              class='mr-2 w-6 flex-shrink-0 text-red-600 hover:text-red-800 transition-colors duration-200 flex items-center justify-center'
              title='Remove {{ role }} role from {{ user }}'
            >
              <svg class='w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
                <path fill-rule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z' clip-rule='evenodd'></path>
              </svg>
            </button>
            <span class='flex-grow text-left'>{{ user }}</span>
          </li>
          {% endfor %}
        </ul>
        <hr class='my-4 border-slate-200'>
        <div class='flex items-center mt-4'>
          <span class='mr-2 flex items-center justify-center'>
            <svg class='w-5 h-5 text-green-600' fill='currentColor' viewBox='0 0 20 20'>
              <path fill-rule='evenodd' d='M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z' clip-rule='evenodd'/>
            </svg>
          </span>
          <input
            type='text'
            id='add-user-{{ role }}'
            placeholder='Enter username'
            autocomplete='off'
            data-lpignore='true'
            class='flex-1 border border-slate-300 rounded px-2 py-1 text-sm mr-2'
          />
          <button
            name='add-role-button'
            data-role='{{ role }}'
            data-username-input-id="add-user-{{ role }}"
            class='bg-blue-600 text-white px-3 py-1 rounded text-sm hover:bg-blue-700 transition-colors duration-200'
            title='Add {{ role }} role to user'
          >
            Add
          </button>
        </div>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<script defer src='{{ auth_base_url }}/auth/static/js/roles.js'></script>
{% endif %}
{% endblock %}