<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Workout Tracker</title>
    <link rel="icon" type="image/svg+xml"
        href='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="currentColor"><title>Workout Favicon</title><g><rect x="20" y="28" width="24" height="8" rx="4"/><circle cx="16" cy="32" r="8"/><circle cx="48" cy="32" r="8"/></g></svg>'>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
    <link rel="stylesheet" type="text/css"
        href="https://cdn.rawgit.com/dreampulse/computer-modern-web-font/master/fonts.css">
    <link type="text/css" rel="stylesheet" href="/static/css/tail.select.min.css">
    <script src="/static/js/tail.select.min.js"></script>
    <script src="/static/js/tailwindcss@3.2.4.js"></script>
    <link href="/static/css/style.css" rel="stylesheet">
    <script src="/static/js/htmx.min.js" defer></script>
    <script src="/static/js/hyperscript.min.js"></script>
    <script src="/static/js/sweetalert2@11.js" defer></script>
    <!-- Mermaid -->
    <script src="/static/js/mermaid.min.js"></script>
    <script>
        // Initialize Mermaid with startOnLoad set to false
        mermaid.initialize({
            startOnLoad: false, // Prevent automatic rendering
            theme: 'neutral',
            er: {
                diagramPadding: 20,
                layoutDirection: 'TB',
            }
        });
    </script>
</head>

<body>
    <nav class="bg-white border-b border-gray-200 fixed z-30 w-full">
        <div class="px-3 py-3 lg:px-5 lg:pl-3">
            <div class="flex items-center justify-between">
                <div class="flex items-center justify-start">
                    <button id="toggleSidebarMobile" aria-expanded="true" aria-controls="sidebar"
                        class="lg:hidden mr-2 text-gray-600 hover:text-gray-900 cursor-pointer p-2 hover:bg-gray-100 focus:bg-gray-100 focus:ring-2 focus:ring-gray-100 rounded"
                        _="on click toggle .hidden on #sidebar then toggle .ml-64 on #main">
                        <svg id="toggleSidebarMobileHamburger" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <svg id="toggleSidebarMobileClose" class="w-6 h-6 hidden" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                clip-rule="evenodd"></path>
                        </svg>
                    </button>
                    <a href="#" class="text-xl font-bold flex items-center lg:ml-2.5">
                        <img src="https://demo.themesberg.com/windster/images/logo.svg" class="h-6 mr-2"
                            alt="Windster Logo">
                        <span class="self-center whitespace-nowrap">Workout Tracker</span>
                    </a>
                </div>
                <div class="flex items-center gap-4">
                    {% if current_user.is_authenticated %}
                    <!-- Show logged-in user's name and Logout link -->
                    <span class="text-slate-700">
                        {{ current_user.name }}
                    </span>
                    <a href="{{ url_for('auth.logout') }}"
                        class="text-slate-400 hover:text-slate-500 flex items-center gap-1">
                        <!-- Heroicon: Arrow Left On Rectangle (Logout) -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25a2.25 2.25 0 00-2.25-2.25H6
                       a2.25 2.25 0 00-2.25 2.25v13.5
                       A2.25 2.25 0 006 21h7.5
                       a2.25 2.25 0 002.25-2.25V15m-3-3h10.5m0 0l-3-3m3 3l-3 3" />
                        </svg>
                        Logout
                    </a>
                    {% else %}
                    <!-- Show Login and Sign Up links -->
                    <a href="{{ url_for('auth.login') }}"
                        class="text-slate-400 hover:text-slate-500 flex items-center gap-1">
                        <!-- Heroicon: Arrow Right On Rectangle (Login) -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25a2.25 2.25 0 00-2.25-2.25H6
                       a2.25 2.25 0 00-2.25 2.25v13.5
                       A2.25 2.25 0 006 21h7.5
                       a2.25 2.25 0 002.25-2.25V15m-3-3h10.5
                       m0 0l-3-3m3 3l-3 3" />
                        </svg>
                        Login
                    </a>
                    <a href="{{ url_for('auth.signup') }}"
                        class="text-slate-400 hover:text-slate-500 flex items-center gap-1">
                        <!-- Heroicon: User Plus (Sign Up) -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25a4.5 4.5 0 11-9 0
                       4.5 4.5 0 019 0zm7.5 12c0
                       -3.315-2.685-6-6-6H6c
                       -3.315 0-6 2.685-6 6m17.25-11.25h3m0 0v3m0-3l-3 0" />
                        </svg>
                        Sign Up
                    </a>
                    {% endif %}
                    <a href="https://github.com/GabePope/WorkoutTracker"
                        class="ml-6 block text-slate-400 hover:text-slate-500 dark:hover:text-slate-300"><span
                            class="sr-only">Workout Tracker on GitHub</span><svg viewBox="0 0 16 16" class="w-6 h-6"
                            fill="black" aria-hidden="true">
                            <path
                                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
                            </path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </nav>
    <div class="flex overflow-hidden bg-white pt-14">
        <aside id="sidebar"
            class="fixed hidden z-20 h-full top-0 left-0 pt-14 flex lg:flex flex-shrink-0 flex-col w-64 transition-width duration-75"
            aria-label="Sidebar">
            <div class="relative flex-1 flex flex-col min-h-0 border-r border-gray-200 bg-white pt-0">
                <div class="flex-1 flex flex-col pb-4 overflow-y-auto">
                    <div class="flex-1 px-3 bg-white divide-y space-y-1">
                        <div class="space-y-2 pt-2">
                            <a hx-get="{{ url_for('dashboard') }}" hx-push-url="true" hx-target="#container"
                                class="text-base text-gray-900 font-normal rounded-lg flex items-center p-2 hover:bg-gray-100 group cursor-pointer {{ is_selected_page(url_for('dashboard')) }} page-link"
                                _="on click add .hidden to #sidebar then remove .ml-64 from #main
                                   on htmx:afterRequest go to the top of the body">
                                <svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
                                    fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
                                    <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
                                </svg>
                                <span class="ml-3">Dashboard</span>
                            </a>
                        </div>
                        <ul class="space-y-2 pb-2 relative" hx-get="{{ url_for('get_person_list') }}"
                            hx-trigger="load, updatedPeople from:body" hx-indicator="#person_loader">

                            <!-- Overlay with Animated Spinner -->
                            <div id="person_loader"
                                class="loading-indicator inset-0 flex justify-center items-center opacity-35 p-4">
                                <svg class="animate-spin h-16 w-16 text-white opacity-100"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
                                    <circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="10"
                                        stroke-linecap="round" class="opacity-20"></circle>
                                    <path d="M50,5 A45,45 0 0,1 95,50" stroke="currentColor" stroke-width="10"
                                        stroke-linecap="round" class="opacity-75"></path>
                                </svg>
                            </div>

                        </ul>

                        <div class="space-y-2 pt-2">
                            <a hx-get="{{ url_for('programs.list_programs') }}" hx-push-url="true"
                                hx-target="#container"
                                class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2 cursor-pointer {{ is_selected_page(url_for('sql_explorer.sql_explorer')) }} page-link"
                                _="on click add .hidden to #sidebar then remove .ml-64 from #main
                               on htmx:afterRequest go to the top of the body">
                                <svg xmlns="http://www.w3.org/2000/svg"
                                    class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
                                    viewBox="0 0 24 24" fill="currentColor">
                                    <path
                                        d="M6 5v14h3v-6h6v6h3V5h-3v6H9V5zM3 15a1 1 0 0 0 1 1h1V8H4a1 1 0 0 0-1 1v2H2v2h1v2zm18-6a1 1 0 0 0-1-1h-1v8h1a1 1 0 0 0 1-1v-2h1v-2h-1V9z">
                                    </path>
                                </svg>
                                <span class="ml-3">Programs</span>
                            </a>
                        </div>


                        <div class="space-y-2 pt-2">
                            <a hx-get="{{ url_for('sql_explorer.sql_explorer') }}" hx-push-url="true"
                                hx-target="#container"
                                class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2 cursor-pointer {{ is_selected_page(url_for('sql_explorer.sql_explorer')) }} page-link"
                                _="on click add .hidden to #sidebar then remove .ml-64 from #main
                               on htmx:afterRequest go to the top of the body">
                                <svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
                                    fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M2 5a2 2 0 012-2h12a2 2 0 012 2v1c0 1.105-1.343 2-3 2H5c-1.657 0-3-.895-3-2V5z" />
                                    <path fill-rule="evenodd"
                                        d="M2 11v-1c0-1.105 1.343-2 3-2h10c1.657 0 3 .895 3 2v1c0 1.105-1.343 2-3 2H5c-1.657 0-3-.895-3-2zm0 4v-1c0-1.105 1.343-2 3-2h10c1.657 0 3 .895 3 2v1c0 1.105-1.343 2-3 2H5c-1.657 0-3-.895-3-2z"
                                        clip-rule="evenodd" />
                                </svg>
                                <span class="ml-3">SQL Explorer</span>
                            </a>
                            <a hx-get="{{ url_for('endpoints.list_endpoints') }}" hx-push-url="true"
                                hx-target="#container"
                                class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2 cursor-pointer {{ is_selected_page(url_for('endpoints.list_endpoints')) }} page-link"
                                _="on click add .hidden to #sidebar then remove .ml-64 from #main
   on htmx:afterRequest go to the top of the body">
                                <!-- Server Icon from Heroicons -->
                                <svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
                                    fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M4 5a1 1 0 011-1h10a1 1 0 011 1v1H4V5z" />
                                    <path fill-rule="evenodd"
                                        d="M3 7a1 1 0 011-1h12a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1V7zm1 2v4h12V9H4z"
                                        clip-rule="evenodd" />
                                </svg>
                                <span class="ml-3">Endpoints</span>
                            </a>
                            <a hx-get="{{ url_for('settings') }}" hx-push-url="true" hx-target="#container"
                                class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2 cursor-pointer {{ is_selected_page(url_for('settings')) }} page-link"
                                _="on click add .hidden to #sidebar then remove .ml-64 from #main
                               on htmx:afterRequest go to the top of the body">
                                <svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
                                    fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
                                    data-darkreader-inline-fill="" style="--darkreader-inline-fill:currentColor;">
                                    <path fill-rule="evenodd"
                                        d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
                                        clip-rule="evenodd"></path>
                                </svg>
                                <span class="ml-3">Settings</span>
                            </a>
                            <a hx-get="{{ url_for('changelog.show_changelog') }}" hx-push-url="true"
                                hx-target="#container"
                                class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2 cursor-pointer {{ is_selected_page(url_for('changelog.show_changelog')) }} page-link"
                                _="on click add .hidden to #sidebar then remove .ml-64 from #main
                               on htmx:afterRequest go to the top of the body">
                                <svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
                                    fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                    <!-- Heroicon name: solid/archive-box -->
                                    <path fill-rule="evenodd"
                                        d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 1H8l-1-1H5V5z"
                                        clip-rule="evenodd"></path>
                                </svg>
                                <span class="ml-3">Changelog</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
        <div class="h-full w-full bg-gray-50 relative overflow-y-auto lg:ml-64">
            <main id="main" class="w-full ">
                <div class="pt-3 md:pt-4 px-2 md:px-4" id="container">
                    {% block content %}
                    {% endblock %}
                </div>
                <div id="stats">
                    {% block stats %}
                    {% endblock %}
                </div>
            </main>

        </div>
    </div>

    <div class="absolute top-16 right-4 m-4">
        <div class="bg-white rounded shadow-md w-64" id="notifications-container">

        </div>
    </div>
    <template id="notification-template">
        <div class="bg-white rounded shadow-md w-64" _="init wait 2s then remove me end on click remove me">
            <div class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
                role="alert">
                <div
                    class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
                    <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                        viewBox="0 0 20 20" data-darkreader-inline-fill=""
                        style="--darkreader-inline-fill: currentColor;">
                        <path
                            d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z">
                        </path>
                    </svg>
                    <span class="sr-only">Check icon</span>
                </div>
                <div class="ml-3 text-sm font-normal">${message}</div>
                <button type="button"
                    class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
                    data-dismiss-target="#toast-success" aria-label="Close">
                    <span class="sr-only">Close</span>
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" data-darkreader-inline-stroke=""
                            style="--darkreader-inline-stroke: currentColor;"></path>
                    </svg>
                </button>
            </div>
        </div>
    </template>

    {% block add_workout_button %}
    {% endblock %}

</body>

</html>