{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% block customCSS %}{% endblock %}
{% block title %}{{ _("Staff Members List") }}{% endblock %}
{% block description %}
    {% trans 'List of all staff members' %}.
{% endblock %}
{% block body %}
    <div class="row">
        <div class="col-6">
            <h3 class="section-header-itm">{% trans 'Staff Members' %}</h3>
            <div class="buttons-container section-header-itm">
                <a href="{{ btn_staff_me_link }}" class="btn btn-sm btn-phoenix-info">{{ btn_staff_me }}</a>
                <a href="{% url 'appointment:add_staff_member_info' %}"
                   class="btn btn-sm btn-phoenix-success">{{ _("Add") }}
                    <i class="fas fa-add"></i>
                </a>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-sm fs-9 mb-0">
                <thead>
                    <tr>
                        <th>{% trans 'Name' %}</th>
                        <th>{% trans 'Email' %}</th>
                        <th>{% trans 'Details' %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for staff_member in staff_members %}
                        <tr>
                            <td>{{ staff_member.get_staff_member_name }}</td>
                            <td>{{ staff_member.user.email|default:"N/A" }}</td>
                            <td>
                                <a href="{% url 'appointment:user_profile' staff_member.user.id %}"
                                   class="btn btn-sm btn-phoenix-primary">{% trans 'View Profile' %}</a>
                                <a href="{% url 'appointment:remove_staff_member' staff_member.user.id %}"
                                   class="btn btn-sm btn-phoenix-danger">{% trans 'Remove' %}</a>
                            </td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan="3">{% trans 'No staff members found' %}.</td>
                        </tr>
                    {% endfor %}
                    <small>{% trans "PS: Remove means, deleting the staff status of the user. The user account is still active." %}</small>
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}
{% block customJS %}
    <script src="{% static 'js/js-utils.js' %}"></script>
{% endblock %}