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

{% block page_title %}Approvals{% endblock %}

{% block extra_head %}
{# User shell (base.html): do not load blocks-admin.bundle.css — its .desktop-only { display:block }
   and .nav-item rules break the storefront header (.nav-links is flex). #}
{% include "partials/storefront_crud_list_head.html" %}
{% endblock %}

{% block content %}
<div data-plugin="membership" class="membership-user-container membership-approvals-page">
    <div class="blocks-workspace-notice" data-membership-feedback data-workspace-notice role="status" aria-live="polite" hidden></div>
    <div class="user-hero-header glass-card mb-4">
        <div>
            <h1>{{ labels.signatory_label | default(value='Authorized signatory') }} — Approvals</h1>
            <p>Review applications and approve {{ labels.entity_plural | default(value='Members') | lower }}.</p>
        </div>
        <div class="membership-approvals-count-wrap" aria-live="polite">
            <span id="membership-approvals-pending-count"
                  class="membership-approvals-count"
                  data-count="0">0</span>
            <span class="membership-approvals-count-label">pending</span>
        </div>
    </div>

    <div id="membership-approvals-config" data-currency="{{ currency_symbol | default(value='₹') }}"></div>

    {{ crud::shell_open(config_url="/plugins/membership/assets/approvals_list.json", mount_id="membership-approvals-list", custom_mount=true) }}
    {# Table is the CRUD insert anchor (header/search go above it). Cards must come after so they sit under search. #}
    <table class="membership-approvals-hidden-table" hidden aria-hidden="true">
        <thead></thead>
        <tbody></tbody>
    </table>
    <div id="membership-approvals-cards" class="membership-approvals-cards"></div>
    {{ crud::shell_close() }}
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/blocks-resource-client.js"></script>
{% include "partials/storefront_crud_list_scripts.html" %}
{% endblock %}