{% extends "appointment/layout.html" %}
{% load i18n %}
{% load static %}
{% block customCSS %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/staff.css' %}"/>
{% endblock %}
{% block title %}
    {% trans 'Staff Members' %}
{% endblock %}
{% block description %}
    {% trans 'List of all staff members' %}.
{% endblock %}
{% block djappt_content %}
    {% translate "Confirm Removal" as modal_title %}
    {% translate "Remove" as remove_btn_modal %}
    {% translate "Are you sure you want to remove this staff member?" as r_modal_message %}
    <div class="djappt-shell djappt-staff content content-wrapper">
        {% include "appointment/_messages.html" %}

        <header class="djappt-page-head">
            <div>
                {% block djappt_heading %}
                <h1 class="djappt-title">{% trans 'Staff Members' %}</h1>
                {% endblock %}
            </div>
            {% block djappt_actions %}
            <div class="djappt-page-tools">
                {# Adds (or removes) the logged-in superuser as a staff member #}
                <form method="post" action="{{ btn_staff_me_link }}">
                    {% csrf_token %}
                    <button type="submit" class="btn djappt-btn djappt-btn-outline">{{ btn_staff_me }}</button>
                </form>
                <a class="btn djappt-btn djappt-btn-primary" href="{% url 'appointment:add_staff_member_info' %}">
                    <svg class="djappt-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                        <path d="M8 2a.75.75 0 0 1 .75.75v4.5h4.5a.75.75 0 0 1 0 1.5h-4.5v4.5a.75.75 0 0 1-1.5 0v-4.5h-4.5a.75.75 0 0 1 0-1.5h4.5v-4.5A.75.75 0 0 1 8 2"/>
                    </svg>
                    {% trans 'Add staff member' %}</a>
            </div>
            {% endblock %}
        </header>

        <div class="djappt-card">
            <ul class="djappt-rows djappt-staff-list">
                {% for staff_member in staff_members %}
                    {% url 'appointment:user_profile' staff_member.user.id as profile_url %}
                    <li class="djappt-row">
                        <span class="djappt-avatar" aria-hidden="true">{{ staff_member.get_staff_member_name|first|upper }}</span>
                        <div class="djappt-row-main">
                            <p class="djappt-row-title"><a href="{{ profile_url }}">{{ staff_member.get_staff_member_name }}</a></p>
                            <p class="djappt-row-meta">{{ staff_member.user.email|default:"N/A" }}</p>
                        </div>
                        <div class="djappt-row-actions">
                            <a class="btn djappt-btn djappt-btn-outline djappt-btn-sm" href="{{ profile_url }}">{% trans 'View Profile' %}</a>
                            <button type="button" class="btn djappt-btn djappt-btn-ghost djappt-btn-sm djappt-text-danger"
                                    data-djappt-confirm="{% url 'appointment:remove_staff_member' staff_member.user.id %}" data-confirm-title="{{ modal_title }}" data-confirm-message="{{ r_modal_message }}" data-confirm-action="{{ remove_btn_modal }}">
                                {% trans 'Remove' %}</button>
                        </div>
                    </li>
                {% empty %}
                    <li class="djappt-row">
                        <p class="djappt-empty">{% trans 'No staff members found' %}.</p>
                    </li>
                {% endfor %}
            </ul>
            <p class="djappt-help mb-0">
                {% trans "PS: Remove means, deleting the staff status of the user. The user account is still active." %}
            </p>
        </div>
    </div>
{% endblock %}

{% block customJS %}
    <script src="{% static 'js/js-utils.js' %}"></script>
{% endblock %}