{% from "menu.html.j2" import render_menu, render_admin_dropdown %}
{% from "widgets/widget_renderer.html.j2" import render_widget %}
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark" data-theme="dark" data-bs-theme-base="neutral">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>

    <!-- Anti-FOUC: apply saved theme & sidebar state before any paint -->
    <script>
      (function(){
        var t = localStorage.getItem('fp-theme');
        if (!t) {
          t = (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) ? 'light' : 'dark';
        }
        document.documentElement.setAttribute('data-theme', t);
        document.documentElement.setAttribute('data-bs-theme', t);
        if (localStorage.getItem('fp-sidebar') === 'collapsed')
          document.documentElement.classList.add('sidebar-collapsed');
        if (localStorage.getItem('fp-layout') === 'fluid')
          document.documentElement.classList.add('layout-fluid');
      })();
    </script>

    <title>{% block title %}{{ app_name }}{% endblock %}</title>
    <link rel="icon" href="/static/favicon.svg" type="image/svg+xml">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=outfit:300,400,500,600,700|jetbrains-mono:400,500,600&display=swap" rel="stylesheet">
    <!-- Tabler CSS (local) -->
    <link rel="stylesheet" href="/static/vendor/tabler-1.4.0/css/tabler.min.css">
    <link rel="stylesheet" href="/static/vendor/tabler-1.4.0/css/tabler-themes.min.css">
    <!-- Tabler Icons (local) -->
    <link href="/static/vendor/tabler-icons/tabler-icons.min.css" rel="stylesheet">
    <!-- FontAwesome (local, available for plugin authors) -->
    <link href="/static/vendor/fontawesome-6.0.0/all.min.css" rel="stylesheet">
    <!-- Custom CSS (consolidated from 01-tokens through 08-json-modal) -->
    <link href="/static/css/fastpluggy.css?v={{ version }}" rel="stylesheet">

    {% for js_file in extra_js_files %}
        <script defer src="{{ js_file }}{% if js_file.startswith('/') %}?v={{ version }}{% endif %}"></script>
    {% endfor %}
    {% for css_file in extra_css_files %}
        <link href="{{ css_file }}{% if css_file.startswith('/') %}?v={{ version }}{% endif %}" rel="stylesheet">
    {% endfor %}
    {% block extra_css %}{% endblock %}
</head>
<body class="antialiased">
<div id="notifications" class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1055;"></div>

<div class="page">

    <!-- ── Sidebar ── -->
    <aside class="navbar navbar-vertical navbar-expand-lg" data-bs-theme="dark" id="sidebar">
        <div class="container-fluid">

            <!-- Logo -->
            <div class="fp-logo">
                <a href="{{ fp_admin_base_url }}" class="fp-logo-link">
                    <div class="fp-logo-icon"><i class="ti ti-puzzle"></i></div>
                    <div class="fp-logo-text">
                        <div class="fp-logo-name">{{ app_name }}</div>
                        <div class="fp-logo-sub">Admin Console</div>
                    </div>
                </a>
            </div>

            <!-- Mobile toggler (custom JS in scripts.js manages #sidebar.show) -->
            <button class="navbar-toggler" type="button" id="mobile-menu-toggle"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Nav items -->
            <div class="navbar-collapse" id="sidebar-menu">
                <ul class="navbar-nav">
                    {{ render_menu(menu_main) }}

                    {# Admin section #}
                    {% if (request.state.current_user and request.state.current_user.is_admin) or (not auth_enable) %}
                        <li><hr class="fp-nav-divider"></li>
                        {{ render_admin_dropdown(menu_admin) }}
                    {% endif %}
                </ul>

                <!-- Sidebar footer: theme toggle + version -->
                <div class="fp-sidebar-footer">
                    <button class="fp-theme-btn" id="theme-toggle" type="button">
                        <i class="ti" id="theme-icon"></i>
                        <span class="fp-btn-text" id="theme-label"></span>
                    </button>
                    <div class="fp-sidebar-version">v{{ version }}</div>
                </div>
            </div>

        </div>
    </aside>
    <div class="fp-sidebar-backdrop" id="sidebar-backdrop"></div>
    <!-- /# Sidebar -->

    <!-- ── Main ── -->
    <div class="page-wrapper">

        <!-- Topbar -->
        <header class="fp-topbar">
            <button class="fp-sidebar-toggle" id="sidebar-toggle" type="button" title="Toggle sidebar">
                <i class="ti ti-layout-sidebar"></i>
            </button>
            <span class="fp-topbar-sep"></span>
            <span class="fp-topbar-label">{{ top_title }}</span>
            {% if title %}
                <span class="fp-topbar-sep"></span>
                <h1 class="fp-topbar-title">{{ title }}</h1>
            {% endif %}

            <div class="ms-auto d-flex align-items-center gap-2">
                <!-- Layout toggle -->
                <button class="fp-icon-btn" id="layout-toggle" type="button" title="Toggle layout width">
                    <i class="ti" id="layout-icon"></i>
                </button>
                {% set _actions = topbar_actions() %}
                <div class="fp-topbar-actions">
                {% for action in _actions %}
                    {% if action.modal_widgets %}
                    <button class="fp-icon-btn {{ action.extra_classes }}"
                            id="{{ action.id }}" type="button" title="{{ action.tooltip }}"
                            data-bs-toggle="modal" data-bs-target="#fp-modal-{{ action.id }}">
                        <i class="{{ action.icon }}"></i>
                    </button>
                    {% elif action.url %}
                    <a href="{{ action.url }}" class="fp-icon-btn {{ action.extra_classes }}"
                       id="{{ action.id }}" title="{{ action.tooltip }}">
                        <i class="{{ action.icon }}"></i>
                    </a>
                    {% else %}
                    <button class="fp-icon-btn {{ action.extra_classes }}"
                            id="{{ action.id }}" type="button" title="{{ action.tooltip }}"
                            {% if action.js_onclick %}onclick="{{ action.js_onclick | e }}"{% endif %}>
                        <i class="{{ action.icon }}"></i>
                    </button>
                    {% endif %}
                {% endfor %}
                </div>

                {% if auth_enable %}
                    <!-- User menu -->
                    <div class="navbar-nav flex-row">
                        <div class="nav-item dropdown">
                            <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown"
                               aria-label="Open user menu">
                                {% if request.state.current_user and request.state.current_user.profile_picture %}
                                    <span class="avatar avatar-sm"
                                          style="background-image: url(/static/samples/avatars/default.jpg)"></span>
                                {% endif %}
                                <div class="d-none d-xl-block ps-2">
                                    {% if request.state.current_user %}
                                        <div>{{ request.state.current_user.display_name }}</div>
                                        {% if request.state.current_user.is_admin %}
                                            <div class="mt-1 small text-secondary">Admin</div>
                                        {% endif %}
                                    {% else %}
                                        <div>Guest</div>
                                    {% endif %}
                                </div>
                            </a>
                            {% if request.state.user_menu %}
                                <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                                    {% for item in request.state.user_menu %}
                                        <a href="{{ item.url }}" class="dropdown-item">
                                            {% if item.icon %}<i class="{{ item.icon }} me-2"></i>{% endif %}
                                            {{ item.label }}
                                        </a>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
            </div>
        </header>

        <!-- Content -->
        <main class="fp-content">
            <div class="container-xl">
                {% if not auth_enable %}
                <div class="alert alert-warning alert-dismissible mb-3" role="alert">
                    <div class="d-flex">
                        <div><i class="ti ti-alert-triangle icon alert-icon"></i></div>
                        <div>
                            <h4 class="alert-title">No authentication enabled</h4>
                            <div class="text-secondary">
                                The admin interface is accessible without login. Install an authentication plugin
                                (e.g. <strong>fastpluggy-auth-user</strong>) to secure access.
                            </div>
                        </div>
                    </div>
                    <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
                </div>
                {% endif %}
                {% include "flash_messages.html.j2" %}
                {% block content %}{% endblock %}
            </div>
        </main>

    </div>
</div>

<!-- Per-action modals (pre-rendered server-side from TopbarAction.modal_widgets) -->
{% for action in _actions %}
{% if action.modal_widgets %}
{% if topbar_modal_widgets is defined and action.id in topbar_modal_widgets %}
{% set processed = topbar_modal_widgets[action.id] %}
{% else %}
{% set processed = process_topbar_widgets(action.modal_widgets, request) %}
{% endif %}
<div class="modal modal-blur fade" id="fp-modal-{{ action.id }}" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ action.tooltip }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body{{ ' ' + action.modal_body_class if action.modal_body_class else '' }}">
        {% for widget in processed %}
          {% call safe_render() %}{{ render_widget(widget, request) }}{% endcall %}
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endfor %}

<!-- Tabler JS (local) — exposes as `tabler`, shim aliases to `bootstrap` for Bootstrap API compat -->
<script src="/static/vendor/tabler-1.4.0/js/tabler.min.js"></script>
<script>window.bootstrap = window.bootstrap || window.tabler;</script>
<!-- Custom JS -->
<script defer src="/static/js/scripts.js?v={{ version }}"></script>
<!-- Service Worker registration (core) -->
<script defer src="/static/js/sw-register.js?v={{ version }}"></script>
<script>
    window.APP_VERSION = "{{ version }}";
    window.global_var = {{ inject_js_global_var() | tojson }};
</script>
{% block extra_js %}{% endblock %}
</body>
</html>
