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

{% block page_title %}Traefik Manager{% endblock %}

{% block extra_head %}
<meta id="traefik-config-path" data-path="{{ plugin_settings.traefik_yaml_path }}">
<meta id="traefik-tls-dir" data-path="{{ plugin_settings.tls_certificates_directory | default(value='') }}">
<meta id="traefik-tls-basename-extra" data-extra="{{ plugin_settings.tls_cert_basename_extra | default(value='') }}">
{% endblock %}

{% block admin_content %}
<div class="mx-auto max-w-7xl space-y-6 pb-8" data-plugin="traefik-manager">
    {{ crud::shell_open(config_url="/plugins/traefik-manager/assets/admin/mappings_list.json", mount_id="traefik-mappings-list", custom_mount=true) }}

    <div data-crud-toolbar-extra>
        <button class="blocks-button blocks-button-secondary" type="button" id="btn-rectify-config" title="Normalize host rules and reconcile router priorities in the Traefik YAML file">
            <i class="fas fa-wrench"></i> Rectify config file
        </button>
    </div>

    <div class="rounded-2xl border border-divider bg-surface p-4 sm:p-5">
        <h2 class="text-xl font-semibold text-foreground">Unified Mappings</h2>
        <p class="mt-1 text-sm leading-relaxed text-muted">Manage Traefik routers and services via declarative mappings. Use Rectify config file to normalize host rules and reconcile priorities.</p>
    </div>

    <table id="mappings-table">
        <thead></thead>
        <tbody>
            {{ spinner::table_skeleton(colspan=7, lines=3, label="Loading mappings…") }}
        </tbody>
    </table>

    {{ crud::shell_close() }}

    <div id="traefik-mapping-modal" class="crud-modal" role="dialog" aria-modal="true" aria-labelledby="traefik-mapping-modal-title" aria-hidden="true">
        <div class="modal-content w-full max-w-xl">
            <div class="modal-header">
                <h3 id="traefik-mapping-modal-title">Mapping</h3>
                <button type="button" class="close-btn" aria-label="Close">&times;</button>
            </div>
            <div class="modal-body">
                <div id="traefik-mapping-fields"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/traefik-manager/assets/js/traefik_manager.js?v=20260924" defer></script>
{% endblock %}