{% extends "base.html" %}

{% block title %}Ayat Fadhila - Accueil{% endblock %}

{% block content %}
<!-- Header avec logo en background -->
{% set logo_url = url_for('static', filename='images/logo.jpg') %}
<header class="site-header" style="background: linear-gradient(135deg, rgba(4, 81, 4, 0.85), rgba(4, 81, 4, 0.75)), url('{{ logo_url }}') center center / cover no-repeat; min-height: 250px; position: relative; overflow: hidden;">
  <div style="position: relative; z-index: 1; padding: 2rem 0;">
    <div class="grid-container">
      <div class="grid-x align-middle">
        <div class="cell small-12 medium-6">
          <h1 class="site-title" style="color: white; text-align: center; margin: 0; text-shadow: 2px 2px 6px rgba(0,0,0,0.7); font-size: 2.5rem; font-weight: 700;">
            <a href="{{ url_for('index') }}" style="color: white; text-decoration: none; font-family: 'Playfair Display', 'Cormorant Garamond', serif;">Ayat Fadhila</a>
          </h1>
        </div>
        <div class="cell small-12 medium-6">
          <ul class="menu" style="background: transparent; justify-content: center; align-items: center; flex-wrap: wrap;">
            <li><span style="color: white; margin-right: 1rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.7);">Bonjour, {{ username }}</span></li>
            <li style="background: rgba(255, 232, 97, 0.3); border-radius: 20px; padding: 0.25rem 0.75rem; margin-right: 0.5rem;">
              <span style="color: #FFE861; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);">📊 {{ user_progress|round(1) }}%</span>
            </li>
            <li><a href="{{ url_for('logout') }}" style="color: white; text-decoration: underline; text-shadow: 1px 1px 3px rgba(0,0,0,0.7);">Déconnexion</a></li>
            <li><a href="/bilan" style="color: white; text-decoration: underline; text-shadow: 1px 1px 3px rgba(0,0,0,0.7);">📊 Bilan</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- Overlay pour améliorer la lisibilité -->
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(4, 81, 4, 0.3); z-index: 0;"></div>
</header>

<!-- Main Content avec liste de liens -->
<div class="grid-container" style="padding: 2rem 1rem; max-width: 800px;">
  <div class="grid-x align-center">
    <div class="cell small-12 medium-10 large-8">
      <ul class="menu vertical" style="list-style: none; margin: 0; padding: 0;">
        {% for id, s in sourates.items() %}
        <li style="border-bottom: 1px solid #eee; padding: 0;">
          <a href="{{ url_for('sourate', id=id|int) }}" 
             style="display: flex; align-items: center; justify-content: space-between; padding: 1rem; text-decoration: none; color: #222; transition: all 0.2s ease;"
             onmouseover="this.style.background='#f8f8f8'; this.style.paddingLeft='1.25rem';"
             onmouseout="this.style.background='transparent'; this.style.paddingLeft='1rem';">
            <div style="flex: 1;">
              <span class="arabic-text" style="font-size: 2.5rem; direction: rtl; font-family: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif; color: #045104; display: block; line-height: 1.6; margin-bottom: 0.25rem;">{{ s.nom_ar }}</span>
              <span style="color: #555; font-size: 1.5rem;">{{ id }} - {{ s.nom }}</span>
            </div>
            <span style="color: #045104; margin-left: 1rem;">→</span>
          </a>
        </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</div>
{% endblock %}