{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}
{% import "macros/user_cell.html" as user_cell %}

{% block page_title %}Gate Passes Administration{% endblock %}

{% block admin_content %}
{% set tz = settings.timezone %}
{% set dt_fmt = '%d %b %Y, %H:%M' %}
{{ crud::shell_open(config_url="/plugins/gate-pass/assets/admin/gate_page.json", mount_id="gate-pass-page-header", custom_mount=true) }}
{{ crud::shell_close() }}

<div class="blocks-section-tabs mb-5" id="gate-pass-admin-tabs" role="tablist" aria-label="Gate Pass administration">
    <button type="button" id="tab-passes-log-tab" class="blocks-section-tab active" role="tab" aria-selected="true" aria-controls="tab-passes-log" data-target="#tab-passes-log" tabindex="0">Guest Passes Log</button>
    <button type="button" id="tab-staff-log-tab" class="blocks-section-tab" role="tab" aria-selected="false" aria-controls="tab-staff-log" data-target="#tab-staff-log" tabindex="-1">Staff Visit Log</button>
    <button type="button" id="tab-security-enroll-tab" class="blocks-section-tab" role="tab" aria-selected="false" aria-controls="tab-security-enroll" data-target="#tab-security-enroll" tabindex="-1">User Enrollment & Roles</button>
</div>

<div id="tab-passes-log" role="tabpanel" aria-labelledby="tab-passes-log-tab" tabindex="0">
    {{ crud::shell_open(config_url="/plugins/gate-pass/assets/admin/passes_list.json", mount_id="gate-pass-passes-list", custom_mount=true) }}
    <table>
        <thead></thead>
        <tbody>
            <tr><td colspan="8" class="crud-empty-state text-center">Loading passes…</td></tr>
        </tbody>
    </table>
    {{ crud::shell_close() }}
</div>

<div id="tab-staff-log" role="tabpanel" aria-labelledby="tab-staff-log-tab" tabindex="0" hidden>
    {{ crud::shell_open(config_url="/plugins/gate-pass/assets/admin/staff_visits_list.json", mount_id="gate-pass-staff-visits-list", custom_mount=true) }}
    <table>
        <thead>
            <tr>
                <th>Staff</th>
                <th>Pass code</th>
                <th>Authorization period</th>
                <th>Check-in</th>
                <th>Exit</th>
                <th>Host</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            {% for pass in staff_visits %}
            <tr>
                <td data-label="Staff" class="font-semibold">{{ pass.guest_name }}</td>
                <td data-label="Pass code"><code>{{ pass.pass_code }}</code></td>
                <td data-label="Valid period" class="text-sm">{{ pass.valid_from | date_in_tz(timezone=tz, format="%d %b %Y") }} – {{ pass.valid_to | date_in_tz(timezone=tz, format="%d %b %Y") }}</td>
                <td data-label="Check-in">{{ pass.check_in_time | date_in_tz(timezone=tz, format=dt_fmt) | default(value="—") }}</td>
                <td data-label="Exit">{{ pass.checkout_time | date_in_tz(timezone=tz, format=dt_fmt) | default(value="—") }}</td>
                <td data-label="Host">
                    {{ user_cell::render(name=pass.owner_name, email=pass.owner_email, avatar=pass.owner_avatar) }}
                </td>
                <td data-label="Status">
                    {% if pass.computed_state == "checked_in" %}
                    <span class="blocks-status-pill is-success">Inside</span>
                    {% else %}
                    <span class="blocks-status-pill is-neutral">Exited</span>
                    {% endif %}
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="7" class="crud-empty-state">No staff visits logged yet.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {{ crud::shell_close() }}
</div>

<div id="tab-security-enroll" role="tabpanel" aria-labelledby="tab-security-enroll-tab" tabindex="0" hidden>
    {{ crud::shell_open(config_url="/plugins/gate-pass/assets/admin/enrollment_list.json", mount_id="gate-pass-enrollment-list", custom_mount=true) }}
    <table>
        <thead></thead>
        <tbody>
            <tr><td colspan="4" class="crud-empty-state text-center">Loading enrollment…</td></tr>
        </tbody>
    </table>
    {{ crud::shell_close() }}
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/gate-pass/assets/js/gate_pass_list.js"></script>
{% endblock %}