{% extends 'base.html' %}
{% load branch_tags %}
{% block title %}Staff{% endblock %}
{% block content %}
{% include 'partials/scope_banner.html' %}
<div class="content-card">
    <div class="content-card-header">
        <div><strong class="text-white">Staff / Employees</strong>
            <div class="text-secondary small">{{ employees|length }} shown &middot; monthly gross of active staff: {{ total_gross|floatformat:2 }}</div></div>
        <a href="{% url 'employee_create' %}" class="btn btn-success btn-sm"><i class="fas fa-plus"></i> Add Employee</a>
    </div>
    <div class="content-card-body pb-0">
        <form method="get" class="row g-2 mb-3">
            <div class="col-md-4"><input type="text" name="q" value="{{ q }}" class="form-control" placeholder="Search name, code, phone, designation"></div>
            <div class="col-md-3"><select name="status" class="form-select">
                <option value="">All statuses</option>
                {% for v,l in status_choices %}<option value="{{ v }}" {% if v == status %}selected{% endif %}>{{ l }}</option>{% endfor %}
            </select></div>
            <div class="col-md-3"><select name="department" class="form-select">
                <option value="">All departments</option>
                {% for d in departments %}<option value="{{ d }}" {% if d == department %}selected{% endif %}>{{ d }}</option>{% endfor %}
            </select></div>
            <div class="col-md-2"><button class="btn btn-outline-light w-100">Filter</button></div>
        </form>
    </div>
    <div class="content-card-body p-0"><div class="table-responsive">
    <table class="table mb-0">
        <thead><tr><th>Code</th><th>Name</th>{% if branch_ctx.is_multi %}<th>Branch</th>{% endif %}<th>Designation</th><th>Department</th><th>Joined</th><th class="text-end">Gross Salary</th><th>Status</th><th></th></tr></thead>
        <tbody>
        {% for e in employees %}<tr>
            <td>{{ e.employee_code }}</td>
            <td class="text-white"><a href="{% url 'employee_detail' e.pk %}" class="text-decoration-none" style="color:#10b981">{{ e.full_name }}</a>{% if e.phone %}<div class="text-secondary" style="font-size:11px">{{ e.phone }}</div>{% endif %}</td>
            {% if branch_ctx.is_multi %}<td><span class="branch-chip">{{ e.branch_id|branch_label:branch_map }}</span></td>{% endif %}
            <td>{{ e.designation|default:"-" }}</td><td>{{ e.department|default:"-" }}</td><td>{{ e.join_date|date:"d M Y" }}</td>
            <td class="text-end">{{ e.gross_salary|floatformat:2 }}</td>
            <td><span class="pill pill-{{ e.status }}">{{ e.get_status_display }}</span></td>
            <td><a href="{% url 'employee_update' e.pk %}" class="btn btn-outline-light btn-sm"><i class="fas fa-pen"></i></a></td>
        </tr>{% empty %}<tr><td colspan="9" class="text-center text-secondary py-4">No employees found.</td></tr>{% endfor %}
        </tbody>
    </table></div></div>
</div>
{% endblock %}