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

{% block admin_content %}
<main data-plugin="membership" class="membership-admin-container blocks-workspace mx-auto w-full max-w-7xl space-y-5 px-4 py-6 sm:px-6">
    <div class="blocks-workspace-notice" data-membership-feedback data-workspace-notice role="status" aria-live="polite" hidden></div>
    <div class="flex flex-wrap items-center gap-3">
        <a href="/plugins/core-reports/reports" class="btn btn-secondary" target="_blank" rel="noopener">Export Applications PDF</a>
        <span class="text-sm text-muted">Name, phone, status and validity. Daily export quota: 2.</span>
    </div>
    {{ crud::shell_open(config_url="/plugins/membership/assets/admin/applications_list.json", mount_id="membership-applications-list", custom_mount=true) }}
    <div class="overflow-x-auto"><table class="blocks-workspace-table min-w-full">
        <thead></thead>
        <tbody></tbody>
    </table></div>
    {{ crud::shell_close() }}

    <div id="membership-badge-modal" class="crud-modal" data-plugin="membership" aria-hidden="true">
        <div class="modal-content w-[calc(100vw-2rem)] max-w-xl">
            <div class="modal-header">
                <h3>Member Details</h3>
                <button type="button" class="close-btn membership-modal-close" aria-label="Close">&times;</button>
            </div>
            <div class="modal-body membership-badge-modal-body">
                <div id="membership-badge-card-container"></div>
            </div>
        </div>
    </div>

    <div id="membership-application-edit-modal" class="crud-modal" data-plugin="membership" aria-hidden="true">
        <div class="modal-content w-[calc(100vw-2rem)] max-w-xl">
            <div class="modal-header">
                <h3 id="membership-application-edit-title">Edit application</h3>
                <button type="button" class="close-btn membership-modal-close" aria-label="Close">&times;</button>
            </div>
            <div class="modal-body">
                <p id="membership-application-edit-meta" class="mt-0 text-sm text-muted"></p>
                <div id="membership-application-edit-fields" class="membership-apply-fields-wrap"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary membership-modal-close">Cancel</button>
                <button type="button" id="membership-application-edit-save" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</main>
{% endblock %}