<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Ze Prompter{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .loading {
            opacity: 0.6;
            pointer-events: none;
        }
        .version-badge {
            font-size: 0.8em;
        }
        .content-preview {
            max-width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/dashboard">
                <i class="fas fa-code"></i> Ze Prompter
            </a>
            <div class="navbar-nav">
                <a class="nav-link" href="/dashboard">
                    <i class="fas fa-tachometer-alt"></i> Dashboard
                </a>
                <a class="nav-link" href="/prompts">
                    <i class="fas fa-file-alt"></i> Prompts
                </a>
                <a class="nav-link" href="/models">
                    <i class="fas fa-robot"></i> Models
                </a>
                <a class="nav-link" href="#" onclick="logout()">
                    <i class="fas fa-sign-out-alt"></i> Logout
                </a>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <!-- Alert container for notifications -->
        <div id="alertContainer"></div>

        {% block content %}{% endblock %}
    </div>

    <script>
        // Global functions for authentication and notifications
        function getAuthToken() {
            return localStorage.getItem('authToken');
        }

        function setAuthToken(token) {
            localStorage.setItem('authToken', token);
        }

        function removeAuthToken() {
            localStorage.removeItem('authToken');
        }

        function logout() {
            removeAuthToken();
            window.location.href = '/login';
        }

        function showAlert(message, type = 'success') {
            const alertHtml = `
                <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            `;
            $('#alertContainer').html(alertHtml);

            // Auto dismiss after 5 seconds
            setTimeout(() => {
                $('.alert').alert('close');
            }, 5000);
        }

        function makeAuthenticatedRequest(url, options = {}) {
            const token = getAuthToken();
            if (!token) {
                window.location.href = '/login';
                return Promise.reject('No auth token');
            }

            const headers = {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json',
                ...options.headers
            };

            return fetch(url, {
                ...options,
                headers
            }).then(response => {
                if (response.status === 401) {
                    removeAuthToken();
                    window.location.href = '/login';
                    throw new Error('Unauthorized');
                }
                return response;
            });
        }
    </script>
</body>
</html>