<!-- templates/base.html -->
{% load static %}
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8"/>
  <title>{% block title %}Trafoking{% endblock %}</title>

  <!-- Tailwind (CDN) -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body class="min-h-screen flex flex-col">

  {% block navbar %}
  <!-- NAVBAR -->
  <header class="flex items-center gap-4 px-6 py-4">
    <a href="/" aria-label="Inicio">
      <img src="{% static 'img/logo.png' %}" class="logo-small"/>
    </a>
    <nav class="flex-1 flex gap-3">
      <a href="{% url 'participant_new' %}" class="btn btn-secondary hidden sm:inline-block">Concurso</a>
      <a href="{% url 'settings' %}" class="btn btn-secondary hidden sm:inline-block">Administración</a>
    </nav>
  </header>
  {% endblock %}

  <!-- CONTENIDO -->
  <main class="flex-1 flex flex-col items-center justify-center px-4">
    {% block content %}{% endblock %}
  </main>

  <!-- FOOTER -->
  <footer class="text-center text-xs py-3 opacity-50">
    © {{year|default:"2025"}} Trafoking
  </footer>
</body>
</html>
