{% extends "base.html" %}
{% block content %}
<div class="container mx-auto p-4 md:p-8 lg:p-12 relative max-w-7xl">
    <div class="space-y-8 pb-12">
        <div class="flex items-center justify-between gap-4 min-w-0">
            <h1 class="text-3xl font-bold text-white min-w-0 truncate">{{ dashboard_settings.dashboard_title | default('Glimpsy') }}</h1>
            <div class="flex items-center gap-3 flex-shrink-0 ml-auto">
                <div id="header-action-slot" class="header-action-slot relative inline-flex h-9 items-center flex-shrink-0">
                    <span id="monitor-status-badge"
                        class="header-action-badge header-slot-item dashboard-badge dashboard-badge--pill dashboard-badge--sites relative z-[1]">
                        0 Sites
                    </span>
                    <button id="add-site-btn" type="button" onclick="openAddSiteModal()"
                        class="header-action-add header-slot-item absolute inset-0 flex items-center justify-center accent-btn text-3xl font-light active:scale-95">
                        +
                    </button>
                </div>
                {% include 'menu_toggle.html' %}
            </div>
        </div>

        <div id="dashboard-component-stash" class="hidden" aria-hidden="true"></div>

        <div id="dashboard-sortable" data-news-height="{{ dashboard_settings.news_height | default(4) }}">
            {% if dashboard_settings.search_enabled %}
            <div id="search-component" class="dashboard-component dashboard-component--search glass-panel rounded-3xl p-6 md:p-8" data-component-id="search">
                <div class="flex items-start justify-between gap-4 mb-4">
                    <div class="flex items-center gap-3 min-w-0">
                        <div class="w-10 h-10 rounded-xl accent-bg flex items-center justify-center flex-shrink-0">
                            <svg id="search-mode-icon" class="w-5 h-5 accent-text" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                        </div>
                        <div class="min-w-0">
                            <h2 id="search-mode-title" class="text-white font-bold">Web Search</h2>
                            <p id="search-mode-subtitle" class="text-[10px] text-slate-500 uppercase tracking-[0.2em] font-bold truncate">
                                {% if dashboard_settings.search_engine == 'duckduckgo' %}DuckDuckGo
                                {% elif dashboard_settings.search_engine == 'searxng' %}SearXNG
                                {% else %}Google{% endif %}
                                — change in Admin Settings
                            </p>
                        </div>
                    </div>
                    <div class="flex items-center gap-2 flex-shrink-0">
                        <button type="button" id="ai-search-history-btn" class="search-history-btn hidden" title="AI Search History">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </button>
                        <div id="search-mode-toggle" class="search-mode-toggle hidden" role="group" aria-label="Search mode">
                            <button type="button" class="search-mode-toggle-btn is-active" data-mode="web">Web</button>
                            <button type="button" class="search-mode-toggle-btn" data-mode="ai">AI</button>
                        </div>
                    </div>
                </div>
                <form id="dashboard-search-form" class="relative group">
                    <input type="text" id="search-query" placeholder="Search the web..." autocomplete="off"
                        class="w-full bg-slate-900/50 border border-white/5 rounded-2xl py-4 pl-12 pr-32 text-sm text-white transition-all">
                    <svg class="w-5 h-5 accent-text-muted absolute left-4 top-4 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    <button type="submit" id="search-submit-btn" class="absolute right-2 top-2 bottom-2 px-6 accent-btn text-xs font-bold active:scale-95 transition-all">
                        Search
                    </button>
                </form>
            </div>
            {% endif %}

            {% if dashboard_settings.calendar_enabled %}
            <div id="calendar-component" class="dashboard-component dashboard-component--calendar glass-panel rounded-3xl p-4 md:p-5" data-component-id="calendar">
                <div class="calendar-panel">
                    <div id="calendar-body" class="calendar-body">
                        <div class="calendar-main">
                            <div class="calendar-toolbar">
                                <div class="calendar-toolbar-brand">
                                    <svg class="calendar-toolbar-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                    <span class="calendar-toolbar-title">Calendar</span>
                                </div>
                                <button type="button" id="calendar-prev" class="calendar-nav-btn" aria-label="Previous month">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                                    </svg>
                                </button>
                                <h3 id="calendar-month-label" class="calendar-month-label"></h3>
                                <button type="button" id="calendar-next" class="calendar-nav-btn" aria-label="Next month">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                    </svg>
                                </button>
                            </div>
                            <div class="calendar-month-viewport">
                                <div id="calendar-month-track" class="calendar-month-track">
                                    <div class="calendar-month-pane">
                                        <div class="calendar-days-board">
                                            <div class="calendar-weekdays" aria-hidden="true">
                                                <span class="calendar-weekday">Sun</span>
                                                <span class="calendar-weekday">Mon</span>
                                                <span class="calendar-weekday">Tue</span>
                                                <span class="calendar-weekday">Wed</span>
                                                <span class="calendar-weekday">Thu</span>
                                                <span class="calendar-weekday">Fri</span>
                                                <span class="calendar-weekday">Sat</span>
                                            </div>
                                            <div class="calendar-grid"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <aside class="calendar-upcoming" aria-label="Upcoming events">
                            <h4 class="calendar-upcoming-title">Upcoming</h4>
                            <div id="calendar-upcoming-list" class="calendar-upcoming-list">
                                <p class="calendar-upcoming-empty">No upcoming events</p>
                            </div>
                        </aside>
                    </div>
                </div>
            </div>
            {% endif %}

            {% if dashboard_settings.news_enabled %}
            <div id="news-component" class="dashboard-component dashboard-component--news glass-panel rounded-3xl p-6 md:p-8" data-component-id="news">
                <div class="news-panel">
                    <div class="flex items-center gap-3 mb-4 flex-shrink-0">
                        <div class="w-10 h-10 rounded-xl accent-bg flex items-center justify-center">
                            <svg class="w-5 h-5 accent-text" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
                            </svg>
                        </div>
                        <div class="min-w-0 flex-1">
                            <h2 class="text-white font-bold">Daily News</h2>
                            <p id="news-meta" class="text-[10px] text-slate-500 uppercase tracking-[0.2em] font-bold truncate">Loading…</p>
                            <p id="news-timer" class="news-timer text-[10px] text-slate-400 font-medium mt-0.5 hidden"></p>
                        </div>
                    </div>
                    <div id="news-articles" class="news-articles">
                        <p class="text-sm text-slate-500">Loading news…</p>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<button id="edit-mode-done" type="button" class="edit-mode-done-fab lg:hidden accent-btn text-xs font-bold uppercase tracking-widest shadow-lg shadow-black/40">
    Done
</button>

<!-- AI Search Modal -->
<div id="ai-search-modal" class="app-modal fixed inset-0 z-[110] hidden p-4 overflow-y-auto">
    <div class="app-modal-panel glass-panel p-6 md:p-8 rounded-3xl max-w-3xl w-full mx-auto border-white/10 shadow-2xl my-8">
        <div class="flex items-start justify-between gap-4 mb-6">
            <div class="min-w-0">
                <h3 class="text-xl font-bold text-white">AI Search</h3>
                <p id="ai-search-modal-query" class="text-sm text-slate-400 mt-1 truncate"></p>
            </div>
            <button type="button" id="ai-search-modal-close" class="text-slate-500 hover:text-white transition-colors p-2" aria-label="Close">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <div id="ai-search-status" class="ai-search-status mb-6">
            <div class="ai-search-status-line">
                <span id="ai-search-status-icon" class="ai-search-status-icon"></span>
                <span id="ai-search-status-text" class="text-sm text-slate-300">Starting…</span>
            </div>
            <p id="ai-search-thinking-timer" class="ai-search-thinking-timer hidden"></p>
        </div>

        <details id="ai-search-plan-wrap" class="ai-search-disclosure hidden mb-4">
            <summary class="ai-search-disclosure-summary">
                Research plan <span id="ai-search-plan-count" class="ai-search-disclosure-count"></span>
            </summary>
            <div class="ai-search-disclosure-content">
                <div class="ai-search-disclosure-inner">
                    <ol id="ai-search-plan-list" class="ai-search-plan-list"></ol>
                </div>
            </div>
        </details>

        <details id="ai-search-reasoning-wrap" class="ai-search-disclosure hidden mb-4">
            <summary class="ai-search-disclosure-summary">Model reasoning</summary>
            <div class="ai-search-disclosure-content">
                <div class="ai-search-disclosure-inner">
                    <div id="ai-search-reasoning" class="ai-search-reasoning"></div>
                </div>
            </div>
        </details>

        <div id="ai-search-answer-wrap" class="hidden">
            <h4 class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] mb-3">Answer</h4>
            <div id="ai-search-answer" class="ai-search-answer markdown-body"></div>
        </div>

        <details id="ai-search-sources-wrap" class="ai-search-disclosure hidden mt-4">
            <summary class="ai-search-disclosure-summary">
                Sources <span id="ai-search-sources-count" class="ai-search-disclosure-count"></span>
            </summary>
            <div class="ai-search-disclosure-content">
                <div class="ai-search-disclosure-inner">
                    <div id="ai-search-sources" class="ai-search-sources"></div>
                </div>
            </div>
        </details>

        <details id="ai-search-debug-wrap" class="ai-search-disclosure hidden mt-4">
            <summary class="ai-search-disclosure-summary">Debug info</summary>
            <div class="ai-search-disclosure-content">
                <div class="ai-search-disclosure-inner">
                    <div class="ai-search-debug-toolbar">
                        <button type="button" id="ai-search-debug-copy" class="ai-search-debug-copy">Copy</button>
                    </div>
                    <pre id="ai-search-debug" class="ai-search-debug"></pre>
                </div>
            </div>
        </details>
    </div>
</div>

<!-- AI Search History Modal -->
<div id="ai-search-history-modal" class="app-modal modal-scroll fixed inset-0 z-[110] hidden overflow-y-auto">
    <div class="flex min-h-full items-center justify-center p-4 md:p-6">
    <div class="app-modal-panel glass-panel p-6 md:p-8 rounded-3xl max-w-2xl w-full mx-auto border-white/10 shadow-2xl my-8">
        <div class="flex items-center justify-between gap-4 mb-6">
            <h3 class="text-xl font-bold text-white">AI Search History</h3>
            <button type="button" id="ai-search-history-close" class="text-slate-500 hover:text-white transition-colors p-2" aria-label="Close">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
        <div id="ai-search-history-list" class="ai-search-history-list">
            <p class="text-sm text-slate-500">Loading history…</p>
        </div>
    </div>
    </div>
</div>

<!-- Calendar Event Modal -->
<div id="calendar-event-modal" class="app-modal fixed inset-0 z-[110] hidden p-4 overflow-y-auto">
    <div class="app-modal-panel glass-panel p-8 rounded-3xl max-w-lg w-full mx-auto border-white/10 shadow-2xl my-8">
        <h3 id="calendar-event-modal-title" class="text-xl font-bold text-white mb-6">Add Event</h3>
        <form id="calendar-event-form" class="space-y-5">
            <input type="hidden" id="calendar-event-id" value="">
            <div class="space-y-2">
                <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]" for="calendar-event-title">Event</label>
                <input type="text" id="calendar-event-title" required maxlength="120"
                    class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30"
                    placeholder="Team meeting">
            </div>
            <div class="space-y-2">
                <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]" for="calendar-event-date">Date</label>
                <input type="date" id="calendar-event-date" required
                    class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30">
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div class="space-y-2">
                    <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]" for="calendar-event-start">Start</label>
                    <input type="time" id="calendar-event-start" required
                        class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30">
                </div>
                <div class="space-y-2">
                    <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]" for="calendar-event-end">End</label>
                    <input type="time" id="calendar-event-end" required
                        class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30">
                </div>
            </div>
            <div class="flex gap-3 pt-2">
                <button type="button" id="calendar-event-delete" class="hidden px-4 py-3 bg-rose-500/10 text-rose-400 text-sm font-medium hover:bg-rose-500/20 transition-colors">
                    Delete
                </button>
                <button type="button" onclick="closeCalendarEventModal()" class="flex-1 px-4 py-3 bg-slate-800 text-slate-300 text-sm font-medium hover:bg-slate-700 transition-colors">
                    Cancel
                </button>
                <button type="submit" class="flex-1 px-4 py-3 accent-btn text-sm font-bold active:scale-95 transition-all">
                    Save
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Add/Edit Site Modal -->
<div id="site-modal" class="app-modal fixed inset-0 z-[100] hidden p-4 overflow-y-auto">
    <div class="app-modal-panel glass-panel p-8 rounded-3xl max-w-lg w-full mx-auto border-white/10 shadow-2xl my-8">
        <h3 id="site-modal-title" class="text-xl font-bold text-white mb-6">Add Monitored Site</h3>
        <form id="site-form" class="space-y-5">
            <input type="hidden" id="site-id" value="">
            <input type="hidden" id="site-icon" value="server">
            <div class="space-y-2">
                <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Icon</label>
                <div id="icon-picker-grid" class="grid grid-cols-4 sm:grid-cols-5 gap-2 max-h-48 overflow-y-auto pr-1"></div>
            </div>
            <div class="space-y-2">
                <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Name</label>
                <input type="text" id="site-name" required
                    class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30"
                    placeholder="My Homelab">
            </div>
            <div class="space-y-2">
                <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">URL</label>
                <input type="url" id="site-url" required
                    class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30"
                    placeholder="https://service.example.com">
                <p class="text-[10px] text-slate-600">Public URL — used when you click the service name to open it.</p>
            </div>
            <div class="space-y-2">
                <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Direct Connection</label>
                <input type="text" id="site-direct-url"
                    class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30"
                    placeholder="192.168.1.10:8080">
                <p class="text-[10px] text-slate-600">Optional local IP:port for latency checks — bypasses nginx.</p>
            </div>
            <div class="space-y-2">
                <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Badge Color</label>
                <div class="flex gap-3 items-center">
                    <input type="color" id="site-badge-color"
                        value="{{ theme.sites_badge_color | default('#ffffff') }}"
                        class="w-12 h-12 rounded-lg border-0 cursor-pointer flex-shrink-0">
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" id="site-badge-use-default" class="rounded border-white/10 bg-slate-900" checked>
                        <span class="text-sm text-slate-400">Use default from Admin Settings</span>
                    </label>
                </div>
            </div>
            <div class="flex gap-3 pt-2">
                <button type="button" onclick="closeSiteModal()" class="flex-1 px-4 py-3 bg-slate-800 text-slate-300 text-sm font-medium hover:bg-slate-700 transition-colors">
                    Cancel
                </button>
                <button type="submit" class="flex-1 px-4 py-3 accent-btn text-sm font-bold active:scale-95 transition-all">
                    Save
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
<script src="{{ url_for('static', filename='js/socket-client.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script src="{{ url_for('static', filename='js/site-icons.js') }}"></script>
<script src="{{ url_for('static', filename='js/edit-mode.js') }}"></script>
<script src="{{ url_for('static', filename='js/monitor.js') }}"></script>
<script src="{{ url_for('static', filename='js/floating-windows.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="{{ url_for('static', filename='js/search.js') }}"></script>
{% if dashboard_settings.calendar_enabled %}
<script src="{{ url_for('static', filename='js/calendar.js') }}"></script>
{% endif %}
{% if dashboard_settings.news_enabled %}
<script src="{{ url_for('static', filename='js/news.js') }}"></script>
{% endif %}
{% endblock %}