<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>
            {% block title %}Markdown Editor & Responses{% endblock %}
        </title>
        <link rel="stylesheet"
              href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
        <link rel="stylesheet"
              href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
        {% block head %}{% endblock %}
        <style>
        html,
        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 16px;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }

        .topbar {
            height: 3.5rem;
            background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
            z-index: 1050;
            /* Higher value than most content layers */
            position: relative;
            /* Needed for z-index to work */
        }

        #responsesContainer {
            margin-top: 20px;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 2;
            background-color: #ffffff;
            overflow-y: auto;
        }

        .material-btn {
            display: inline-flex;
            align-items: center;
            padding: 10px 16px;
            border: none;
            border-radius: 0;
            cursor: pointer;
            transition: background-color 0.3s;
            color: white;
            font-size: 16px;
        }

        /* Logo & Navbar */
        .logo {
            position: absolute;
            top: 15px;
            left: 15px;
        }

        .logo-img {
            width: 30px;
            height: auto;
        }


        .navbar-brand {
            color: white;
            font-size: 1.1rem;
        }

        .nav-item {
            font-size: 0.9rem;
            padding-bottom: 0.5rem;
        }

        .nav-item a {
            color: #d7d7d7;
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }

        .navbar-toggler-icon {
            color: white;
        }

        .nav-item a.active {
            background-color: rgba(255, 255, 255, 0.37);
            color: white;
        }

        .nav-item a:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
        }

        .navbar-collapse.collapse.show {
            background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
            padding: 1rem;
            /* Optional: add padding for spacing */
            border-radius: 5px;
            /* Optional: rounded corners */
        }

        .icon {
            margin-right: 8px;
        }
        </style>
    </head>
    <body>
        <!-- Navbar -->
        <nav class="topbar navbar sticky-top navbar-expand-lg navbar-dark">
            <div class="container-fluid">
                <a class="navbar-brand d-flex align-items-center" href="#">
                    <img src="https://companieslogo.com/img/orig/NSIT-65c6ad49.png"
                         alt="Bootstrap"
                         width="35"
                         height="35">
                    <span style="margin-left: 15px">Ingenious - Prompt Tuner</span>
                </a>
                <button class="navbar-toggler"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#navbarNav"
                        aria-controls="navbarNav"
                        aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link"
                               href="{{ url_for('index.home') }}"
                               data-url="{{ url_for('index.home') }}">Home</a>
                        </li>
                        <li class="nav-item" id="editPromptsNav">
                            <a class="nav-link"
                               href="{{ url_for('prompts.list') }}"
                               data-url="{{ url_for('prompts.list') }}">Edit Prompts</a>
                        </li>
                        <li class="nav-item" id="runTestsNav">
                            <a class="nav-link"
                               href="{{ url_for('responses.list') }}"
                               data-url="{{ url_for('responses.list') }}">Run Tests</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Main Content -->
        <div class="container">
            {% block content %}{% endblock %}
        </div>
        {% block scripts %}{% endblock %}
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
        <script>
        document.addEventListener('DOMContentLoaded', function () {
            const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
            const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
            var navLinks = document.querySelectorAll('.nav-link');
            var currentPath = window.location.pathname;
            navLinks.forEach(function (navLink) {
                if (navLink.getAttribute('data-url') === currentPath) {
                    navLink.classList.add('active');
                }
            });
        });

        function init_tooltips() {
            const newTooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]:not([data-bs-initialized])');
            newTooltipTriggerList.forEach(tooltipTriggerEl => {
                new bootstrap.Tooltip(tooltipTriggerEl);
                tooltipTriggerEl.setAttribute('data-bs-initialized', 'true');
            });

        }

        function setActiveNav(element) {
            var navLinks = document.querySelectorAll('.nav-link');
            navLinks.forEach(function (navLink) {
                navLink.classList.remove('active');
            });
            element.classList.add('active');
        }

        function selectNav(element, url) {
            setActiveNav(element);
            // navigate to the selected page
            window.location.href = url;

        }

        function showEdit(element) {
            setActiveNav(element);
            document.getElementById('editSection').style.display = 'block';
            document.getElementById('responsesSection').style.display = 'none';
        }

        // Function to get cookie value by name
        function getCookie(name) {
            var value = "; " + document.cookie;
            var parts = value.split("; " + name + "=");
            if (parts.length == 2) return parts.pop().split(";").shift();
        }

        </script>
    </body>
</html>
