{% extends "base.html" %}
{% set active = "staff" %}
{% block title %}Staff Management{% endblock %}
{% block page_title %}Staff Management{% endblock %}
{% block content %}
{% if msg %}<div class="alert alert-{{ msg[0] }}">{{ msg[1] }}</div>{% endif %}
<div class="page-actions">
    <span class="text-muted">{{ staff|length }} staff members</span>
    <button class="btn btn-primary ml-auto" onclick="openModal('addModal')">➕ Add Staff</button>
</div>
<div class="card">
    <div class="table-wrap">
        <table>
            <thead><tr><th>Name</th><th>Username</th><th>Email</th><th>Gender</th><th>Hire Date</th></tr></thead>
            <tbody>
            {% for s in staff %}
            <tr>
                <td><strong>{{ s.name }}</strong></td>
                <td class="text-muted">{{ s.username }}</td>
                <td>{{ s.email }}</td>
                <td>{{ s.gender or '—' }}</td>
                <td>{{ s.hire_date or '—' }}</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<div class="modal-overlay" id="addModal">
    <div class="modal">
        <div class="modal-header"><span class="modal-title">Add Staff Member</span><button class="modal-close" onclick="closeModal('addModal')">✕</button></div>
        <form method="POST">
            <input type="hidden" name="action" value="add">
            <div class="form-grid">
                <div class="form-group"><label>Full Name *</label><input type="text" name="name" required></div>
                <div class="form-group"><label>Username *</label><input type="text" name="username" required></div>
                <div class="form-group"><label>Password *</label><input type="password" name="password" required></div>
                <div class="form-group"><label>Email *</label><input type="email" name="email" required></div>
                <div class="form-group"><label>Gender</label><select name="gender"><option value="">Select</option><option>Male</option><option>Female</option><option>Other</option></select></div>
                <div class="form-group"><label>Hire Date</label><input type="date" name="hire_date"></div>
            </div>
            <div style="display:flex;gap:.75rem;justify-content:flex-end;margin-top:1rem">
                <button type="button" class="btn btn-secondary" onclick="closeModal('addModal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Add Staff</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}