<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="es">
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>

<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<link rel="stylesheet" href="https://cdn.priet.us/tui-image-editor/tui-icons.css">

    <!-- Awesomplete CSS -->
<link rel="stylesheet" href="https://cdn.priet.us/cdn/css/awesomplete.min.css" integrity="sha512-RT/9M3vzjYojy97YiNTZbyrQ4nJ+gNoinZKTGSVvLITijfQIAIDNicUe+U2KaeOWo9j7IbRzRisx/7eglOc+wA==". crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Awesomplete JS -->
<script src="https://cdn.priet.us/cdn/js/awesomplete.min.js" integrity="sha512-HcBl0GSJvt4Qecm4srHapirUx0HJDi2zYXm6KUKNNUGdTIN9cBwakVZHWmRVj4MKgy1AChqhWGYcMDbRKgO0zg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <link
        rel="stylesheet"
        id="theme-stylesheet"
        data-light="{{ url_for('static', filename='css/bootstraplight.min.css') }}"
        data-dark="{{ url_for('static', filename='css/bootstrap.min.css') }}"
        href="{% if session.get('theme', 'light') == 'dark' %}
                  {{ url_for('static', filename='css/bootstrap.min.css') }}
              {% else %}
                  {{ url_for('static', filename='css/bootstraplight.min.css') }}
              {% endif %}"
    >

    <title>{% block title %}My Pastebin{% endblock %}</title>
    <style>
      /* Oculta el contenido hasta que se ejecute el script */
      .preload {
        opacity: 0;
        transition: opacity 0.3s ease;
      }
    </style>

    <!-- Font Awesome para Iconos -->
    <link rel="stylesheet" href="https://cdn.priet.us/cdn/css/all.min.css">
    
    <!-- Bootstrap CSS (Bootstraplight.min.css para tema claro por defecto) -->
    <!-- Incluye PDF.js desde CDN -->
    <script src="https://cdn.priet.us/cdn/js/pdf.min.js"></script>
   
    <!-- Pygments Styles -->
    {% for style in pygments_styles %}
        <link rel="stylesheet"
              href="{{ url_for('static', filename='css/' + style + '.css') }}" 
              title="{{ style }}" 
              id="pygments-{{ style }}"
              {% if style != default_pygments_style %}disabled{% endif %}
        >
    {% endfor %}
    
    <!-- Estilos Personalizados -->
    {% block head %}
    <!-- Contenido adicional en el head -->
    {% endblock %}
    <style>
        /* Estilos para resaltar código */
        .highlight {
            border-radius: 5px;
            padding: 10px;
            overflow-x: auto;
            white-space: pre-wrap;
        }

        /* Estilos adicionales según el tema */
        body[data-theme="light"] .highlight {
            background: #f8f8f2;
            color: #2d2d2d;
        }

        body[data-theme="dark"] .highlight {
            background: #2d2d2d;
            color: #f8f8f2;
        }

        /* Estilos para el Tooltip Personalizado */
        .tooltip-preview {
            position: absolute;
            background-color: #fff; /* Fondo por defecto para modo claro */
            border: 1px solid #ddd;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            padding: 10px;
            max-width: 300px;
            display: none;
            z-index: 1000;
            min-height: 50px;
            color: #2d2d2d; /* Texto por defecto para modo claro */
            border-radius: 5px;
        }

        /* Estilos para modo oscuro */
        body[data-theme="dark"] .tooltip-preview {
            background-color: #333; /* Fondo oscuro */
            border-color: #555;
            color: #f8f8f2; /* Texto claro */
        }

        /* Estilos para imágenes dentro del tooltip */
        .tooltip-preview img {
            max-width: 100%;
            height: auto;
            border-radius: 3px;
        }
    </style>
</head>
<script>
  // Conviertes la lista (o diccionario) Python en JSON
  var PYGMENTS_STYLES = {{ pygments_styles|tojson }};
</script>

<body data-theme="{{ session.get('theme', 'light') }}" class="preload">

    <!-- Navbar Mejorada -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">My Pastebin</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="navbar-nav ms-auto">
                    <!-- Enlace a Estadísticas -->
                    <li class="nav-item">
                        <a class="nav-link" href="/stats"><i class="fas fa-chart-bar me-1"></i> Statistics</a>
                    </li>
                    <!-- Enlace para Solicitar Cuenta -->
                    <li class="nav-item">
                        <a class="nav-link" href="/request-account"><i class="fas fa-user-plus me-1"></i> Request an account</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/api/docs"><i class="fas fa-code me-1"></i> Public API</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/contact">
                            <i class="fas fa-envelope me-1"></i> Contact
                        </a>
                    </li>
                    <!-- Enlace al Dashboard (solo para usuarios logueados) -->
                    {% if current_user.is_authenticated %}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('user_dashboard') }}"><i class="fas fa-tachometer-alt me-1"></i> Dashboard</a>
                        </li>
                    {% endif %}
                    <!-- Mostrar Nombre de Usuario y Dropdown si está logueado -->
                    {% if current_user.is_authenticated %}
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" 
                               data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-user me-1"></i> {{ current_user.username }}
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                                <li><a class="dropdown-item" href="{{ url_for('change_password_form') }}"><i class="fas fa-key me-2"></i> Change password</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="{{ url_for('logout') }}"><i class="fas fa-sign-out-alt me-2"></i> Logout</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('create_paste_web') }}">
                                <i class="fas fa-plus-circle me-1"></i> Create Paste
                            </a>
                        </li>
                    {% else %}
                        <!-- Enlace a Login si no está logueado -->
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('login') }}"><i class="fas fa-sign-in-alt me-1"></i> Login</a>
                        </li>
                    {% endif %}
                    <!-- Botón para Alternar Temas -->
                    <li class="nav-item">
                        <a href="#" id="theme-toggle" class="nav-link"><i class="fas fa-adjust me-1"></i> Change theme</a>
                    </li>
                    <!-- Enlace al Panel de Administración -->
                    <li class="nav-item">
                        <a class="nav-link" href="/admin/login"><i class="fas fa-tools me-1"></i> Admin Panel</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <script>
      // En cuanto se decida el tema, remover la clase "preload"
      document.body.classList.remove('preload');
    </script>

    <!-- Contenedor Principal Mejorado -->
    <div class="container my-4">
        {% block content %}{% endblock %}
    </div>

    <!-- Contenedor para Toasts -->
    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1100">
        <div id="liveToast" class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    <!-- Mensaje del toast -->
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>
      
    <!-- Tooltip Preview -->
    <div id="tooltip" class="tooltip-preview"></div>

    <!-- QRCode.js para Generar Códigos QR -->

    <!-- Bloque para scripts específicos de cada plantilla -->
    {% block scripts %}{% endblock %}
</body>

<!-- Scripts globales -->
<script src="https://cdn.priet.us/cdn/js/qrcode.min.js"></script>
<script src="https://cdn.priet.us/cdn/js/bootstrap.bundle.min.js"></script>
<script src="{{ url_for('static', filename='js/base/theme.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/toast-handler.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/copy-url.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/favorites.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/qrcode-handler.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/metadata-toggle.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/remove-gps.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/image-editor.js') }}" defer></script>

<!-- TUI Image Editor -->
{% if load_tui_editor %}
<script src="https://cdn.priet.us/tui-color-picker/tui-color-picker.min.js"></script>
<script src="https://cdn.priet.us/tui-image-editor/tui-image-editor.min.js"></script>

<link rel="stylesheet" href="https://cdn.priet.us/tui-image-editor/tui-image-editor.css">
<script src="https://cdn.priet.us/tui-image-editor/tui-image-editor.js"></script>
<link rel="stylesheet" href="https://cdn.priet.us/tui-image-editor/tui-image-editor.min.css">
{% endif %}
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const toastElement = document.getElementById('liveToast');
        const toastBody = toastElement.querySelector('.toast-body');

        // Definir showToast como una función global
        window.showToast = (message, bgColor = 'bg-primary') => {
            toastBody.textContent = message;
            toastElement.className = `toast align-items-center text-white ${bgColor} border-0`;
            toastElement.style.display = 'block'; // Asegurarse de que sea visible
            const toast = new bootstrap.Toast(toastElement);
            toast.show();
        };

        // Mostrar mensajes flash de Flask como toasts
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    let categoryClass = 'bg-primary';
                    if ("{{ category }}" === 'success') categoryClass = 'bg-success';
                    else if ("{{ category }}" === 'danger') categoryClass = 'bg-danger';
                    else if ("{{ category }}" === 'warning') categoryClass = 'bg-warning text-dark';
                    else if ("{{ category }}" === 'info') categoryClass = 'bg-info';
                    showToast("{{ message }}", categoryClass);
                {% endfor %}
            {% endif %}
        {% endwith %}
    });
</script>

<body {% if paste %}data-paste-id="{{ paste.id }}" 
      data-download-url="{{ url_for('download_paste', id=paste.id, _external=True) }}"{% endif %}>
</body>

<footer style="text-align: center; padding: 1em 0;">
  <p>
    This project is licensed under the 
    <a href="https://opensource.org/licenses/BSD-2-Clause" target="_blank">
      BSD 2-Clause License
    </a>.
  </p>
  <p style="font-size: small; margin-top: 0.5em;">
    This website does not claim ownership of, copyright on,
    and assumes no liability for provided content.
  </p>
</footer>
</html>

