{% extends "base.html" %}
{% load static %}

{% block content %}
<style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;500;600;700&family=Amiri+Quran&display=swap');
    
    body {
        background-color: #ECFDF5; /* emerald-50 */
    }

    .font-arabic { 
        font-family: 'Amiri Quran', serif; 
    }
    .font-urdu { 
        font-family: 'Noto Nastaliq Urdu', serif; 
    }

    .bg-gradient-custom-header {
        background-image: linear-gradient(to right, #10B981, #0D9488);
    }
    
    .bg-gradient-custom-freq {
        background-image: linear-gradient(to right, #0D9488, #10B981);
    }

    .bg-gradient-custom-bar {
        background-image: linear-gradient(to right, #34D399, #0D9488);
    }
    
    .card-hover-effect {
        transition: all 0.3s ease;
        border: 2px solid #A7F3D0; /* emerald-100 */
    }

    .card-hover-effect:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

</style>

<div class="bg-gradient-custom-header text-white shadow-lg">
    <div class="container-fluid max-w-7xl mx-auto px-4 py-6">
      <div class="flex items-center space-x-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
        <div>
          <h1 class="h2 font-weight-bold">Quran Phrases</h1>
          <p class="text-white-50 mb-0">Frequently repeated phrases from the Holy Quran</p>
        </div>
      </div>
    </div>
</div>

<main class="container-fluid max-w-7xl mx-auto px-4 py-8">
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
        {% for phrase in phrases %}
        <div class="col">
            <div class="card h-100 p-4 rounded-xl shadow-lg card-hover-effect">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div class="text-xl text-right flex-grow-1 text-success-emphasis font-arabic" dir="rtl" style="line-height: 1.6;">
                        {{ phrase.a }}
                    </div>
                    <span class="badge bg-gradient-custom-freq text-white fs-6 fw-bold px-3 py-1 rounded-pill ms-2">
                        {{ phrase.f }}&times;
                    </span>
                </div>
                
                <div class="mb-3">
                    <div class="d-flex align-items-start">
                        <span class="text-muted small fw-bold" style="width: 80px;">English:</span>
                        <span class="text-dark fw-semibold">{{ phrase.e }}</span>
                    </div>
                    <div class="d-flex align-items-start">
                        <span class="text-muted small fw-bold" style="width: 80px;">اردو:</span>
                        <span class="text-dark font-urdu fs-6" dir="rtl">{{ phrase.u }}</span>
                    </div>
                    <div class="d-flex align-items-start">
                        <span class="text-muted small fw-bold" style="width: 80px;">தமிழ்:</span>
                        <span class="text-dark fw-semibold">{{ phrase.t }}</span>
                    </div>
                </div>
                
                <div class="progress rounded-pill" style="height: 8px;">
                    <div class="progress-bar bg-gradient-custom-bar" role="progressbar" style="width: {{ phrase.f_width }}%" aria-valuenow="{{ phrase.f_width }}" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</main>
{% endblock %}
