{% extends "admin_base.html" %}
{% 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 %}


{% endblock %}

{% block page_title %}QShare: All Transfers{% endblock %}

{% block admin_content %}
<div class="qshare-admin-reports">
    <div class="mb-5">
        <div class="grid grid-cols-1 gap-4">
            <div class="min-w-0 rounded-xl border border-divider bg-surface p-4 sm:p-5">
                <div class="mb-3 flex items-center gap-2 font-semibold">
                    <i class="fas fa-chart-line mr-1 opacity-70" aria-hidden="true"></i>
                    QShare Overview
                </div>
                <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
                    {% for widget in widgets %}
                    <div class="rounded-lg bg-canvas p-3">
                        <div class="text-xl font-bold text-brand">{{ widget.value }}</div>
                        <div class="text-xs text-muted">{{ widget.label }}</div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    {{ crud::shell_open(config_url="/plugins/qshare/assets/admin/transfers_list.json", mount_id="qshare-transfers-list", custom_mount=true) }}
    <table>
        <thead></thead>
        <tbody>
            {{ spinner::table_skeleton(colspan=7, lines=3, label="Loading transfers…") }}
        </tbody>
    </table>
    {{ crud::shell_close() }}
</div>

{{ modal::modal(id="fileDetailsModal", title='<i class="fas fa-history me-2"></i>Transfer History: <span id="transferDate"></span>', close_attrs='id="closeFileDetailsModalBtn"', body_html='<div id="fileListContent"></div>', footer_html='<button type="button" class="blocks-button blocks-button-secondary close-modal-btn" id="closeFileDetailsModalFooterBtn">Close</button>') }}
{% endblock %}

{% block scripts %}
<script src="/plugins/qshare/assets/js/transfers_list.js"></script>
<script src="/plugins/qshare/assets/js/qshare-admin.js"></script>
{% endblock %}