{% extends "base.html" %}

{% block title %}Staff{% endblock %}
{% block page_title %}Staff Management{% endblock %}
{% block page_subtitle %}Manage DryClean360 staff accounts{% endblock %}

{% block content %}
{% include "partials/breadcrumb.html" %}

<div class="toolbar-tablet">
    <form method="get" class="toolbar-tablet-filters">
        <input type="text" name="q" value="{{ request.GET.q }}" placeholder="Search staff..." class="form-input" style="min-width:220px">
        <button type="submit" class="btn-secondary">Search</button>
    </form>
    <div class="toolbar-tablet-actions">
        <a href="{% url 'accounts:staff_create' %}" class="btn-primary">Add Staff</a>
    </div>
</div>

<div class="table-scroll-card card">
    {% if page_obj.object_list %}
    <div class="table-scroll">
    <table>
        <thead>
            <tr>
                <th>Name</th><th>Username</th><th>Email</th><th>Role</th>
                <th>Phone</th><th>Active</th><th>Created</th><th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for profile in page_obj %}
            <tr>
                <td>{{ profile.user.get_full_name|default:"—" }}</td>
                <td>{{ profile.user.username }}</td>
                <td>{{ profile.user.email }}</td>
                <td><span class="badge badge-counter">{{ profile.get_role_display }}</span></td>
                <td>{{ profile.phone_number|default:"—" }}</td>
                <td>{% if profile.active %}<span class="text-green-700">Yes</span>{% else %}<span class="text-red-600">No</span>{% endif %}</td>
                <td>{{ profile.created_at|date:"d M Y" }}</td>
                <td>
                    <a href="{% url 'accounts:staff_edit' profile.pk %}" class="table-action-link text-brand-600">Edit</a>
                    {% if profile.active %}
                    <a href="{% url 'accounts:staff_deactivate' profile.pk %}" class="table-action-link text-red-600">Deactivate</a>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
    {% else %}
    {% include "partials/empty_state.html" with title="No staff found" action_url="/accounts/staff/create/" action_label="Add Staff" %}
    {% endif %}
</div>
{% include "partials/pagination.html" %}
{% endblock %}