{% load static %}
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <title>{% block title %}Django Resume{% endblock title %}</title>
  {% block meta %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="index">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            fontFamily: {
              'sans': ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
            },
            animation: {
              'fade-in': 'fadeIn 0.5s ease-in-out',
              'slide-up': 'slideUp 0.3s ease-out',
            },
            keyframes: {
              fadeIn: {
                '0%': { opacity: '0' },
                '100%': { opacity: '1' },
              },
              slideUp: {
                '0%': { transform: 'translateY(10px)', opacity: '0' },
                '100%': { transform: 'translateY(0)', opacity: '1' },
              }
            }
          }
        }
      }
    </script>
    {% if is_editable %}
      <link rel="stylesheet" href="{% static "django_resume/css/edit.css" %}">
    {% endif %}
    {% if show_edit_button %}
      <script src="https://unpkg.com/htmx.org@2.0.3" integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script>
      <script src="{% static "django_resume/js/edit.js" %}"></script>
    {% endif %}
  {% endblock meta %}

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

    /* Custom scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #f1f5f9;
    }
    ::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #94a3b8;
    }

    /* Print styles */
    @media print {
      .print\\:hidden { display: none !important; }
      body { background: white !important; }
      .shadow-lg, .shadow-xl, .shadow-sm { box-shadow: none !important; }
      .bg-gradient-to-br, .bg-gradient-to-r { background: white !important; }
    }

    /* Content editable focus styles */
    [contenteditable="true"]:focus {
      outline: 2px solid #3b82f6;
      outline-offset: 2px;
      border-radius: 4px;
    }

    /* Animation classes */
    .animate-fade-in {
      animation: fadeIn 0.5s ease-in-out;
    }

    .animate-slide-up {
      animation: slideUp 0.3s ease-out;
    }

    /* HTMX loading indicators */
    .htmx-indicator {
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }
    .htmx-request .htmx-indicator {
      opacity: 1;
    }
    .htmx-request.htmx-indicator {
      opacity: 1;
    }

    /* Badge editor styles */
    .skills-badges-container, .project-badges-container {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .skill-badge {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.875rem;
      font-weight: 500;
      background-color: #dbeafe;
      color: #1e40af;
    }
    .project-badge {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.875rem;
      font-weight: 500;
      background-color: #dcfce7;
      color: #166534;
    }
    .skill-name, .project-badge-name {
      margin-right: 0.5rem;
    }
    .badge-delete-button {
      margin-left: 0.25rem;
      padding: 0.125rem;
      border-radius: 50%;
      background-color: transparent;
      color: #64748b;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.25rem;
      height: 1.25rem;
    }
    .badge-delete-button:hover {
      background-color: #f1f5f9;
      color: #ef4444;
    }
    .badge-delete-button svg {
      width: 0.875rem;
      height: 0.875rem;
    }

    /* Badge editor styles - more specific targeting */
    badge-editor ul.cluster.cluster-list {
      margin: 0 !important;
      padding: 0 !important;
      list-style: none !important;
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 0.5rem !important;
      align-items: flex-start !important;
    }
    
    /* Input and Add button container */
    badge-editor ul.cluster.cluster-list li:last-child {
      display: flex !important;
      align-items: center !important;
      gap: 0.25rem !important;
      flex-basis: 100% !important;
      margin-top: 0.5rem !important;
    }
    
    /* Add badge input field */
    badge-editor ul.cluster.cluster-list li:last-child input.small-input {
      width: 80px !important;
      max-width: 80px !important;
      padding: 0.25rem 0.5rem !important;
      border: 1px solid #d1d5db !important;
      border-radius: 0.375rem !important;
      font-size: 0.75rem !important;
      background-color: white !important;
    }
    
    /* Add button */
    badge-editor ul.cluster.cluster-list li:last-child button[type="button"] {
      padding: 0.25rem 0.5rem !important;
      background-color: #3b82f6 !important;
      color: white !important;
      border: none !important;
      border-radius: 0.375rem !important;
      font-size: 0.75rem !important;
      cursor: pointer !important;
      white-space: nowrap !important;
    }
    
    /* Delete buttons in badges */
    badge-editor .badge-delete-button {
      margin-left: 0.25rem !important;
      padding: 0.125rem !important;
      border-radius: 50% !important;
      background-color: rgba(0,0,0,0.1) !important;
      color: #64748b !important;
      border: none !important;
      cursor: pointer !important;
      width: 1.25rem !important;
      height: 1.25rem !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    
    badge-editor .badge-delete-button:hover {
      background-color: #f1f5f9 !important;
      color: #ef4444 !important;
    }
    
    /* Delete button SVG icons */
    badge-editor .badge-delete-button svg {
      width: 0.75rem !important;
      height: 0.75rem !important;
    }
  </style>
</head>

<body class="font-sans antialiased" {% if show_edit_button %}hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'{% endif %}>
  
  <!-- SVG Icon definitions -->
  {% if show_edit_button %}
    {% include "django_resume/pages/plain/icons.svg" %}
  {% endif %}

  {% block content %}
    <div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
      <div class="container mx-auto px-4 py-8">
        <p class="text-center text-slate-600">This is the default content.</p>
      </div>
    </div>
  {% endblock content %}

  <!-- Global HTMX loading indicator -->
  {% if show_edit_button %}
    <div id="htmx-loading" class="htmx-indicator fixed top-4 left-1/2 transform -translate-x-1/2 z-50">
      <div class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center space-x-2">
        <div class="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div>
        <span class="text-sm font-medium">Saving...</span>
      </div>
    </div>
  {% endif %}
</body>
</html>