{% extends "base.html" %}
{% load i18n %}
{% load render_table from django_tables2 %}

{% block title %}{% trans "Staff" %}{% endblock title %}

{% block content %}
<section class="">

        <div class="row">
        <div class="col-auto">
                <div class="d-md-flex justify-content-between">
                  <div>
                    <a href="{% url 'user_create' %}" class="btn btn-sm btn-phoenix-primary"><i class="fa-solid fa-user-tie"></i> {% trans "Add New Staff" %}</a>
                    <a href="{% url 'group_list' %}" class="btn btn-sm btn-phoenix-success"><i class="fa-solid fa-user-group"></i> {% trans "Manage Groups & Permissions" %}</a>
                  </div>
                </div>
              </div>
<div class="table-responsive scrollbar mx-n1 px-1">

        <table class="table table-hover table-responsive-sm fs-9 mb-0">
            <thead>
                <tr>
                    <th>{% trans 'name'|capfirst %}</th>
                    <th>{% trans 'arabic name'|capfirst %}</th>
                    <th>{% trans 'phone number'|capfirst %}</th>
                    <th>{% trans 'role'|capfirst %}</th>
                    <th>{% trans 'groups'|capfirst %}</th>
                    <th>{% trans 'actions'|capfirst %}</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                <tr>
                    <td>{{ user.name }}</td>
                    <td>{{ user.arabic_name }}</td>
                    <td>{{ user.phone_number }}</td>
                    <td>
                        <span class="badge badge-sm bg-primary"><i class="fa-solid fa-scroll"></i> {% trans user.staff_type|title %}</span>
                    </td>
                    <td>
                        {% for group in user.groups.all %}
                            <span class="badge badge-sm bg-info"><i class="fa-solid fa-user-group"></i> {{ group.name }}</span>
                        {% endfor %}
                    </td>
                    <td>
                        <a class="btn btn-phoenix-success"
                           href="{% url 'user_detail' user.id %}">
                           <i class="fa-solid fa-eye"></i>
                            {% trans 'view'|capfirst %}
                        </a>
                    </td>
                </tr>
                {% endfor %}

            </tbody>
        </table>
</div>
<div class="d-flex justify-content-center">
        {% if is_paginated %}
        {% include 'partials/pagination.html' %}
        {% endif %}
    </div>
        
</div>
</section>
{% endblock %}