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

{% block page_title %}Customer Accounts{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/customer-accounts/assets/css/customer-accounts-admin.ui.css">
{% endblock %}

{% block admin_content %}
<main class="customer-accounts-app" data-blocks-admin-tabs>
    <header class="customer-accounts-app__header">
        <div class="customer-accounts-app__heading">
            <span class="customer-accounts-app__icon" aria-hidden="true"><i class="fas fa-users"></i></span>
            <div>
                <h1 class="customer-accounts-app__title">Customer Accounts</h1>
                <p class="customer-accounts-app__description">Review customer profiles and the saved delivery addresses they use at checkout.</p>
            </div>
        </div>
        <nav class="customer-accounts-tabs" role="tablist" aria-label="Customer account records">
            <button type="button" class="tab-btn active" id="customer-accounts-profiles-tab" role="tab" aria-selected="true" aria-controls="profiles-tab" data-tab="profiles">
                <i class="fas fa-id-card" aria-hidden="true"></i><span>Profiles</span>
            </button>
            <button type="button" class="tab-btn" id="customer-accounts-addresses-tab" role="tab" aria-selected="false" aria-controls="addresses-tab" data-tab="addresses">
                <i class="fas fa-map-marked-alt" aria-hidden="true"></i><span>Saved addresses</span>
            </button>
        </nav>
    </header>

    <div class="customer-accounts-tab-content">
        <section id="profiles-tab" class="tab-pane active customer-accounts-tab-panel" role="tabpanel" aria-labelledby="customer-accounts-profiles-tab" tabindex="0">
            {{ crud::shell_open(config_url="/plugins/customer-accounts/assets/admin/profiles_list.json", mount_id="customer-accounts-profiles-list", custom_mount=true) }}
            <table>
                <thead></thead>
                <tbody>
                    <tr><td colspan="3" class="crud-empty-state" role="status">Loading profiles…</td></tr>
                </tbody>
            </table>
            {{ crud::shell_close() }}
        </section>

        <section id="addresses-tab" class="tab-pane hidden customer-accounts-tab-panel" role="tabpanel" aria-labelledby="customer-accounts-addresses-tab" tabindex="0" hidden>
            {{ crud::shell_open(config_url="/plugins/customer-accounts/assets/admin/addresses_list.json", mount_id="customer-accounts-addresses-list", custom_mount=true) }}
            <table>
                <thead></thead>
                <tbody>
                    <tr><td colspan="5" class="crud-empty-state" role="status">Loading saved addresses…</td></tr>
                </tbody>
            </table>
            {{ crud::shell_close() }}
        </section>
    </div>
</main>
{% endblock %}

{% block scripts %}
<script src="/plugins/customer-accounts/assets/js/customer_accounts_list.js"></script>
{% endblock %}