{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ project_name }} - Quran Reels Generator</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Amiri&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-emerald: #064E3B;
            --accent-gold: #D4AF37;
            --soft-cream: #FCF8F1;
            --text-dark: #1F2937;
        }
        body {
            background-color: var(--soft-cream);
            font-family: 'Inter', sans-serif;
            color: var(--text-dark);
        }
        h1, h2, h3, .arabic {
            font-family: 'Amiri', serif;
        }
        .navbar {
            background-color: var(--primary-emerald);
            padding: 1rem 0;
            border-bottom: 3px solid var(--accent-gold);
        }
        .navbar-brand {
            color: var(--accent-gold) !important;
            font-weight: 700;
            font-size: 1.5rem;
        }
        .hero {
            background: linear-gradient(135deg, var(--primary-emerald) 0%, #065F46 100%);
            color: white;
            padding: 4rem 0;
            margin-bottom: 3rem;
            text-align: center;
        }
        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            background: white;
            margin-bottom: 2rem;
        }
        .card-header {
            background-color: white;
            border-bottom: 1px solid #F3F4F6;
            font-weight: 600;
            padding: 1.25rem;
            color: var(--primary-emerald);
        }
        .btn-primary {
            background-color: var(--primary-emerald);
            border: none;
            padding: 0.75rem 2rem;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            background-color: #065F46;
            transform: translateY(-1px);
        }
        .status-badge {
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
        }
        .status-pending { background: #FEF3C7; color: #92400E; }
        .status-processing { background: #DBEAFE; color: #1E40AF; }
        .status-completed { background: #D1FAE5; color: #065F46; }
        .status-failed { background: #FEE2E2; color: #991B1B; }
        
        .form-label { font-weight: 600; margin-bottom: 0.5rem; }
        .form-select, .form-control {
            border-radius: 8px;
            border: 1px solid #D1D5DB;
            padding: 0.6rem;
        }
    </style>
</head>
<body>

<nav class="navbar navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="#">
            {{ project_name }}
        </a>
    </div>
</nav>

<div class="hero">
    <div class="container">
        <h1>Create Beautiful Quran Reels</h1>
        <p class="lead">Select verses, pick a reciter, and generate professional videos in seconds.</p>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">Video Settings</div>
                <div class="card-body">
                    <form action="{% url 'generate_video' %}" method="POST" id="genForm">
                        {% csrf_token %}
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Select Surah</label>
                                <select name="surah" id="surahSelect" class="form-select" required>
                                    <option value="">Choose...</option>
                                    {% for s in surahs %}
                                    <option value="{{ s.number }}">{{ s.number }}. {{ s.englishName }} ({{ s.name }})</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Reciter</label>
                                <select name="reciter" class="form-select" required>
                                    {% for r in reciters %}
                                    <option value="{{ r.identifier }}" {% if r.identifier == "ar.alafasy" %}selected{% endif %}>{{ r.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Start Verse</label>
                                <input type="number" name="verse_start" id="verseStart" class="form-control" value="1" min="1" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">End Verse</label>
                                <input type="number" name="verse_end" id="verseEnd" class="form-control" value="5" min="1" required>
                                <small class="text-muted" id="maxAyahs">Max: -</small>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label">Background Video</label>
                                <select name="background" class="form-select" required>
                                    {% for b in backgrounds %}
                                    <option value="{{ b }}">{{ b }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Text Color</label>
                                <input type="color" name="text_color" class="form-control form-control-color w-100" value="#FFFFFF">
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary w-100">Generate Video</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">Recent Generations</div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        {% for task in tasks %}
                        <li class="list-group-item">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <strong class="d-block">{{ task.surah_name }}</strong>
                                    <small class="text-muted">Ayahs {{ task.verse_start }}-{{ task.verse_end }}</small>
                                </div>
                                <span class="status-badge status-{{ task.status }}">
                                    {{ task.status|title }}
                                </span>
                            </div>
                            {% if task.status == 'completed' %}
                            <a href="{{ task.output_path }}" class="btn btn-sm btn-outline-success mt-2 w-100" download>Download</a>
                            {% elif task.status == 'failed' %}
                            <p class="text-danger x-small mt-1 mb-0">{{ task.error_message|truncatechars:50 }}</p>
                            {% endif %}
                        </li>
                        {% empty %}
                        <li class="list-group-item text-center text-muted py-4">No tasks yet</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('surahSelect').addEventListener('change', function() {
        const surahNum = this.value;
        if (!surahNum) return;
        
        fetch(`/surah-details/${surahNum}/`)
            .then(response => response.json())
            .then(data => {
                const max = data.numberOfAyahs;
                document.getElementById('maxAyahs').textContent = `Max Ayahs: ${max}`;
                document.getElementById('verseStart').max = max;
                document.getElementById('verseEnd').max = max;
            });
    });
</script>

</body>
</html>
