{% extends "layouts/base.html" %}

{% block content %}
<!--
  TEMPLATE: awards_vitrine/security_error.html
  CONTEXT: error_type (str), message (str)
  DESIGN: Golden Night Alert Variant | Black background (#050505) + Ruby Red (#8B0000) + Gold (#D4AF37)
  ANIMATIONS: Fade-in (container) + Subtle Shake (security icon)
  ACCESSIBILITY: Mobile-first, centered layout, high contrast, no external files
-->
<style>
  /* ------------------------------
     CUSTOM FONTS (Fallback System)
     Ensures "Cinzel" and "Montserrat" style without external requests
  -------------------------------- */
  .font-cinzel {
    font-family: 'Cinzel', 'Times New Roman', serif;
  }
  .font-montserrat {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
  }

  /* ------------------------------
     FADE-IN ANIMATION (main container)
  -------------------------------- */
  @keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(8px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
  }

  /* ------------------------------
     SHAKE ANIMATION (security icon)
     Subtle vibration on appearance, stops after one cycle
  -------------------------------- */
  @keyframes gentleShake {
    0% { transform: translate(1px, 1px) rotate(0.5deg); }
    10% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    20% { transform: translate(-1px, 0px) rotate(0.3deg); }
    30% { transform: translate(1px, 1px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(0.5deg); }
    50% { transform: translate(-1px, 1px) rotate(-0.3deg); }
    60% { transform: translate(-1px, 0px) rotate(0deg); }
    70% { transform: translate(1px, 1px) rotate(0.5deg); }
    80% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    90% { transform: translate(1px, 0px) rotate(0.3deg); }
    100% { transform: translate(0, 0) rotate(0); }
  }
  .animate-shake {
    animation: gentleShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  }

  /* Optional: subtle glow for ruby/gold accents */
  .glow-ruby {
    box-shadow: 0 0 8px rgba(139, 0, 0, 0.3);
  }
  .border-gold-subtle {
    border-color: rgba(212, 175, 55, 0.25);
  }
</style>

<div class="flex items-center justify-center min-h-screen px-4 py-12 bg-[#050505]">
  <div class="w-full max-w-md text-center animate-fade-in">
    
    <!-- SECURITY ICON: Stylized Shield + Lock (Ruby & Gold) -->
    <div class="flex justify-center mb-6">
      <div class="inline-block animate-shake">
        <svg 
          class="w-28 h-28 md:w-32 md:h-32 drop-shadow-lg" 
          viewBox="0 0 100 100" 
          fill="none" 
          xmlns="http://www.w3.org/2000/svg"
          aria-label="Bouclier de sécurité verrouillé"
          role="img"
        >
          <!-- Shield base (Gold outline, dark fill) -->
          <path 
            d="M50 5 L90 20 L90 50 C90 75 70 90 50 95 C30 90 10 75 10 50 L10 20 L50 5Z" 
            fill="#0a0a0a" 
            stroke="#D4AF37" 
            stroke-width="2.5"
            stroke-linejoin="round"
          />
          <!-- Inner shield highlight (ruby red translucent glow) -->
          <path 
            d="M50 12 L82 24 L82 50 C82 70 66 84 50 88 C34 84 18 70 18 50 L18 24 L50 12Z" 
            fill="rgba(139, 0, 0, 0.25)" 
            stroke="#8B0000" 
            stroke-width="1.2"
            stroke-dasharray="2 2"
          />
          <!-- Lock body (Ruby Red) -->
          <rect x="38" y="48" width="24" height="20" rx="3" fill="#8B0000" stroke="#D4AF37" stroke-width="1.5" />
          <!-- Lock shackle (Gold) -->
          <path 
            d="M45 48 L45 42 C45 37 55 37 55 42 L55 48" 
            fill="none" 
            stroke="#D4AF37" 
            stroke-width="2.5" 
            stroke-linecap="round"
          />
          <!-- Keyhole detail -->
          <circle cx="50" cy="58" r="3" fill="#050505" />
          <rect x="49" y="58" width="2" height="5" fill="#050505" />
          <!-- Gold ornamental corners -->
          <circle cx="22" cy="28" r="2.5" fill="#D4AF37" />
          <circle cx="78" cy="28" r="2.5" fill="#D4AF37" />
          <circle cx="50" cy="90" r="2" fill="#D4AF37" />
        </svg>
      </div>
    </div>

    <!-- MAIN TITLE (Cinzel / Gold) -->
    <h1 class="font-cinzel text-3xl md:text-4xl font-bold text-[#D4AF37] tracking-wider mb-3">
      ACTION INTERROMPUE
    </h1>
    
    <!-- ERROR TYPE BADGE (Ruby red style) -->
    <div class="my-4">
      <span class="inline-block px-5 py-1.5 text-sm font-mono font-semibold tracking-wider uppercase rounded-full 
                   bg-[#8B0000]/20 border border-[#8B0000] text-[#D4AF37] backdrop-blur-sm">
        {{ error_type|default:"SÉCURITÉ" }}
      </span>
    </div>

    <!-- EXPLANATION CARD (Message lisible en Montserrat) -->
    <div class="bg-black/40 border border-[#D4AF37]/30 rounded-xl p-6 my-6 backdrop-blur-sm transition-all">
      <p class="text-gray-200 font-montserrat text-base md:text-lg leading-relaxed tracking-wide">
        {{ message|default:"Action non autorisée ou suspecte. Votre vote n'a pas été enregistré." }}
      </p>
      <div class="w-12 h-px bg-gradient-to-r from-transparent via-[#8B0000] to-transparent mx-auto mt-4"></div>
      <p class="text-gray-400 text-sm font-montserrat mt-3">
        Aucune action frauduleuse n'a été validée.
      </p>
    </div>

    <!-- ACTION BUTTONS (Retour accueil + Assistance) -->
    <div class="flex flex-col sm:flex-row gap-5 justify-center mt-8">
      <!-- RETURN HOME BUTTON (Gold border) -->
      <a 
        href="/" 
        class="inline-flex justify-center items-center px-6 py-3 font-semibold text-center transition-all duration-300 
               border-2 border-[#D4AF37] rounded-md text-[#D4AF37] hover:bg-[#D4AF37] hover:text-black 
               font-montserrat tracking-wider text-sm md:text-base group"
      >
        <svg class="w-4 h-4 mr-2 fill-current group-hover:text-black text-[#D4AF37]" viewBox="0 0 20 20" fill="currentColor">
          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
        </svg>
        RETOUR À L'ACCUEIL
      </a>
      
      <!-- CONTACT SUPPORT LINK (Uses site_config.contact_email from context processor) -->
      <a 
        href="mailto:{{ site_config.contact_email|default:'support@example.com' }}?subject=Alerte%20Sécurité%20Vote&body=Code%20erreur%20:{{ error_type|urlencode }}%0AMessage%20:{{ message|urlencode }}"
        class="inline-flex justify-center items-center px-6 py-3 font-semibold text-center transition-all duration-300 
               border-2 border-gray-600 rounded-md text-gray-300 hover:border-[#D4AF37] hover:text-[#D4AF37] 
               font-montserrat tracking-wider text-sm md:text-base"
      >
        <svg class="w-4 h-4 mr-2 fill-current" viewBox="0 0 20 20" fill="currentColor">
          <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
          <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
        </svg>
        CONTACTER L'ASSISTANCE
      </a>
    </div>
    
    <!-- subtle footnote : reassurance text -->
    <p class="text-[#8B0000]/60 text-[11px] font-montserrat mt-8 tracking-wide">
      🔒 Transaction sécurisée &bull; Journal des événements
    </p>
  </div>
</div>
{% endblock content %}