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

{% block page_title %}Delivery Agents{% endblock %}

{% block admin_content %}
<main class="mx-auto w-full max-w-screen-2xl px-4 py-6" data-plugin="delivery-agent">
    <p id="delivery-agent-admin-feedback" class="mb-3 text-sm text-muted" role="status" aria-live="polite"></p>
    {{ crud::shell_open(config_url="/plugins/delivery-agent/assets/admin/agents_list.json", mount_id="delivery-agents-list", custom_mount=true) }}

    <div class="blocks-responsive-table">
        <table>
            <thead></thead>
            <tbody>
                <tr><td colspan="7" class="crud-empty-state text-center">Loading agents…</td></tr>
            </tbody>
        </table>
    </div>

    {{ crud::shell_close() }}

    {{ crud::shell_open(config_url="/plugins/delivery-agent/assets/admin/assignments_list.json", mount_id="delivery-assignments-list") }}
    <table>
        <thead></thead>
        <tbody>
            <tr><td colspan="6" class="crud-empty-state text-center">Loading assignments…</td></tr>
        </tbody>
    </table>
    {{ crud::shell_close() }}
</main>

<script type="application/json" id="delivery-agent-users-json">{{ users | json_encode | replace(from="</script>", to="<\\/script>") | safe }}</script>

<div id="agentModal" class="crud-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <div class="modal-content w-full max-w-xl">
        <div class="modal-header">
            <h2 id="modalTitle">Delivery agent details</h2>
            <button type="button" class="close-btn" id="closeModalBtn" aria-label="Close">&times;</button>
        </div>
        <div class="modal-body">
            <div id="agent-form-fields"></div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/delivery-agent/assets/js/agents_list.js"></script>
{% endblock %}