{% load dlux_tags %}
<link rel="stylesheet" href="{% dlux_static 'dlux/assets/css/main.css' %}">
<div class="dlux-asset-manager">
    <nav class="mb-4" data-dlux-modal-nav aria-label="{{ DLUX_STRINGS.asset_manager_title|default:'Asset Manager' }}">
        {% dlux_ribbon ribbon %}
    </nav>

    {% if active_tab == 'images' %}
    <form method="post" enctype="multipart/form-data" action="{{ image_action_url }}" data-managed-image-form>
        {% csrf_token %}
        {{ image_form.file }}
        {% if image_form.non_field_errors %}<div class="alert alert-danger">{{ image_form.non_field_errors }}</div>{% endif %}
        {% if image_form.file.errors %}<div class="alert alert-danger">{{ image_form.file.errors }}</div>{% endif %}
        <div data-dlux-modal-footer>
            <button type="submit" class="btn btn-primary" data-managed-image-upload-trigger>
                <i class="bi bi-upload me-1"></i>{{ DLUX_STRINGS.asset_upload_images|default:'Upload images' }}
            </button>
        </div>
    </form>

    <div class="d-flex align-items-center justify-content-between mb-3">
        <h6 class="mb-0">{{ DLUX_STRINGS.asset_images_title|default:'Saved images' }}</h6>
        <span class="badge text-bg-secondary">{{ images|length }}</span>
    </div>
    <div class="dlux-managed-assets-grid">
        {% for asset in images %}
        <article class="glass-profile dlux-managed-asset-card">
            <div class="dlux-managed-asset-preview">
                {% if asset.url %}<img src="{{ asset.url }}" alt="{{ asset.title }}">{% endif %}
            </div>
            <div class="dlux-managed-asset-body">
                <div class="d-flex align-items-start justify-content-between gap-2">
                    <div class="dlux-managed-asset-name">
                        <button type="button" class="dlux-managed-asset-title" data-managed-image-title data-rename-url="{% url 'manage_assets_rename' asset.pk %}" title="{{ DLUX_STRINGS.asset_rename_hint|default:'Rename image' }}">{{ asset.title }}</button>
                        <input type="text" class="form-control form-control-sm glass-input" value="{{ asset.title }}" maxlength="150" data-managed-image-title-input hidden>
                        <code>{{ asset.slug }}</code>
                    </div>
                    <span class="badge text-bg-light">{{ DLUX_STRINGS.asset_kind_image|default:'Image' }}</span>
                </div>
                <p class="small text-muted mt-2 mb-2">{{ asset.filename }} · {{ asset.size_bytes }} B{% if asset.width %} · {{ asset.width }}×{{ asset.height }}{% endif %}</p>
                {% if asset.usage_report %}
                <p class="small text-warning mb-2"><i class="bi bi-shield-lock me-1"></i>{{ DLUX_STRINGS.asset_used_by|default:'Used by' }}: {% for relation, items in asset.usage_report.items %}{{ relation }} ({{ items|length }}){% if not forloop.last %}, {% endif %}{% endfor %}</p>
                {% else %}
                <p class="small text-success mb-2"><i class="bi bi-check-circle me-1"></i>{{ DLUX_STRINGS.asset_unused|default:'Not currently referenced' }}</p>
                {% endif %}
                <button class="archive-file-tool archive-file-tool-clear dynamic-delete-btn" type="button" data-pk="{{ asset.pk }}" title="{{ DLUX_STRINGS.delete_label|default:'Delete' }}" aria-label="{{ DLUX_STRINGS.delete_label|default:'Delete' }}"{% if asset.usage_report %} disabled{% endif %}>
                    <i class="bi bi-trash3"></i>
                </button>
            </div>
        </article>
        {% empty %}
        <div class="dlux-asset-empty text-center text-muted">{{ DLUX_STRINGS.asset_images_empty|default:'No saved images yet.' }}</div>
        {% endfor %}
    </div>
    {% else %}
    <form method="post" enctype="multipart/form-data" class="dlux-form mb-4" action="{{ font_action_url }}" data-managed-font-form>
        {% csrf_token %}
        {% if font_form.non_field_errors %}<div class="alert alert-danger">{{ font_form.non_field_errors }}</div>{% endif %}
        <div class="row g-3" data-managed-font-row="identity">
            <div class="col-md-3"><label class="form-label" for="{{ font_form.title.id_for_label }}">{{ font_form.title.label }}</label>{{ font_form.title }}{{ font_form.title.errors }}</div>
            <div class="col-md-3"><label class="form-label" for="{{ font_form.font_label.id_for_label }}">{{ font_form.font_label.label }}</label>{{ font_form.font_label }}{{ font_form.font_label.errors }}</div>
            <div class="col-md-3"><label class="form-label" for="{{ font_form.font_slug.id_for_label }}">{{ font_form.font_slug.label }}</label>{{ font_form.font_slug }}{{ font_form.font_slug.errors }}</div>
            <div class="col-md-3"><label class="form-label" for="{{ font_form.font_family.id_for_label }}">{{ font_form.font_family.label }}</label>{{ font_form.font_family }}{{ font_form.font_family.errors }}</div>
        </div>
        <div class="row g-3 mt-0" data-managed-font-row="variant">
            <div class="col-md-6"><label class="form-label" for="{{ font_form.font_weight.id_for_label }}">{{ font_form.font_weight.label }}</label>{{ font_form.font_weight }}{{ font_form.font_weight.errors }}</div>
            <div class="col-md-6"><label class="form-label" for="{{ font_form.font_style.id_for_label }}">{{ font_form.font_style.label }}</label>{{ font_form.font_style }}{{ font_form.font_style.errors }}</div>
        </div>
        <div class="row g-3 mt-0" data-managed-font-row="file">
            <div class="col-12"><label class="visually-hidden" for="{{ font_form.file.id_for_label }}">{{ font_form.file.label }}</label>{{ font_form.file }}{{ font_form.file.errors }}</div>
        </div>
        <div class="d-flex justify-content-end mt-3">
            <button type="submit" class="btn btn-primary"><i class="bi bi-upload me-1"></i>{{ DLUX_STRINGS.asset_upload_font|default:'Upload font' }}</button>
        </div>
    </form>

    <div class="d-flex align-items-center justify-content-between mb-2">
        <h6 class="mb-0">{{ DLUX_STRINGS.asset_fonts_title|default:'Registered fonts' }}</h6>
        <span class="badge text-bg-secondary">{{ managed_fonts|length }}</span>
    </div>
    <div class="dlux-managed-font-list">
        {% for font in managed_fonts %}
        <section class="dlux-managed-font-family">
            <div class="dlux-managed-font-heading">
                <div><strong>{{ font.label }}</strong><div class="small text-muted">{{ font.family }}</div></div>
                <code>{{ font.slug }}</code>
            </div>
            <div class="table-responsive">
                <table class="table table-sm align-middle mb-0">
                    <thead><tr><th>{{ DLUX_STRINGS.asset_field_font_weight|default:'Weight' }}</th><th>{{ DLUX_STRINGS.asset_field_font_style|default:'Style' }}</th><th>{{ DLUX_STRINGS.asset_field_file|default:'File' }}</th><th class="text-end">{{ DLUX_STRINGS.asset_size|default:'Size' }}</th></tr></thead>
                    <tbody>
                        {% for variant in font.variants.all %}
                        <tr><td>{{ variant.weight }}</td><td>{{ variant.get_style_display }}</td><td>{{ variant.asset.filename }}</td><td class="text-end">{{ variant.asset.size_bytes }} B</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
        {% empty %}
        <div class="dlux-asset-empty text-center text-muted">{{ DLUX_STRINGS.asset_fonts_empty|default:'No registered fonts yet.' }}</div>
        {% endfor %}
    </div>
    {% endif %}
</div>
<script src="{% dlux_static 'dlux/assets/js/main.js' %}" nonce="{{ request.csp_nonce }}"></script>