{% extends "admin_base.html" %}
{% import "macros/billing_profile_modal.html" as billing_macros %}
{% import "macros/admin_crud_list.html" as crud %}
{% import "macros/user_cell.html" as user_cell %}
{% import "macros/modal.html" as modal %}
{% import "macros/loading_spinner.html" as spinner %}

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

{% block page_title %}User Billing Management{% endblock %}

{% block admin_content %}
<main class="user-billing-admin">
    {{ crud::shell_open(config_url="/plugins/user-billing/assets/admin/billing_page.json", mount_id="billing-page-header", custom_mount=true) }}
    {{ crud::shell_close() }}

    {{ crud::shell_open(config_url="/plugins/user-billing/assets/admin/profiles_list.json", mount_id="billing-profiles-list", custom_mount=true) }}
    <table>
        <thead></thead>
        <tbody id="profiles-table-body">
            {{ spinner::table_skeleton(colspan=6, lines=4, label="Loading profiles…") }}
        </tbody>
    </table>
    {{ crud::shell_close() }}

    {{ crud::shell_open(config_url="/plugins/user-billing/assets/admin/users_status_list.json", mount_id="billing-users-status-list", custom_mount=true) }}
    <table>
        <thead></thead>
        <tbody>
            {{ spinner::table_skeleton(colspan=5, lines=3, label="Loading users…") }}
        </tbody>
    </table>
    {{ crud::shell_close() }}
</main>

{{ billing_macros::billing_profile_modal(
    id="modal-profile",
    form_id="form-profile",
    action="/plugins/user-billing/save-profile",
    tables=tables,
    plugins=active_plugins,
    currency_symbol=settings.currency_symbol
) }}

{{ modal::modal(id="modal-user-status", title='<span id="user-status-modal-title">Manage User Billing</span>', body_html='<div id="user-status-form-fields"></div>') }}

<script type="application/json" id="billing-profiles-data">[]</script>
<div id="billing-config" hidden
    data-active-plugins="{{ active_plugins | json_encode }}"
    data-tables="{{ tables | json_encode }}">
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/billing_profiles_shared.js?v=8"></script>
<script src="/plugins/user-billing/assets/js/profiles_list.js?v=5"></script>
<script src="/plugins/user-billing/assets/js/users_status_list.js"></script>
<script src="/plugins/user-billing/assets/js/admin.js?v=3"></script>
{% endblock %}