{% extends 'base.html' %}

{% block title %}Build Music Quiz - Quizzical Beats{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto px-4 py-8">
    <div class="text-center mb-8">
        <h1 class="text-3xl md:text-4xl font-bold text-navy-800 font-montserrat mb-3">Create Your Music Quiz</h1>
        <p class="text-lg text-gray-600 max-w-2xl mx-auto">Choose your preferred method to generate the perfect music round for your trivia night.</p>
    </div>
    
    <form method="POST" action="{{ url_for('generate.build_music_round') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
        
        <div class="mb-6 bg-white shadow-md rounded-lg p-6">
            <h3 class="text-xl font-semibold text-navy-800 font-montserrat mb-4">Round Details</h3>
            <div class="mb-4">
                <label for="round_name" class="block text-gray-700 text-sm font-bold mb-2">Round Name (Optional)</label>
                <input type="text" name="round_name" id="round_name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Enter a name for this round">
            </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <!-- Random Selection Card -->
            <div class="bg-white shadow-md rounded-lg overflow-hidden border border-gray-200 transition-transform hover:transform hover:scale-[1.02]">
                <div class="h-24 bg-gradient-to-r from-navy-700 to-navy-900 flex items-center justify-center text-white">
                    <i class="fas fa-random text-4xl"></i>
                </div>
                <div class="p-6">
                    <h5 class="text-xl font-semibold text-navy-800 font-montserrat mb-3">Random Selection</h5>
                    <p class="text-gray-600 mb-5 h-20">Create a music quiz with randomly selected songs from different artists and decades for a diverse challenge.</p>
                    <button type="submit" name="round_type" value="Random" class="bg-orange-500 hover:bg-orange-600 text-white py-3 px-4 rounded-md transition-colors w-full font-semibold">
                        <i class="fas fa-dice mr-2"></i> Generate Random Round
                    </button>
                </div>
            </div>
            
            <!-- Decade Card -->
            <div class="bg-white shadow-md rounded-lg overflow-hidden border border-gray-200 transition-transform hover:transform hover:scale-[1.02]">
                <div class="h-24 bg-gradient-to-r from-teal-500 to-teal-700 flex items-center justify-center text-white">
                    <i class="fas fa-calendar-alt text-4xl"></i>
                </div>
                <div class="p-6">
                    <h5 class="text-xl font-semibold text-navy-800 font-montserrat mb-3">By Decade</h5>
                    <p class="text-gray-600 mb-5 h-20">Create a themed music quiz with songs from a specific decade that has been used the least in your quizzes.</p>
                    <button type="submit" name="round_type" value="Decade" class="bg-orange-500 hover:bg-orange-600 text-white py-3 px-4 rounded-md transition-colors w-full font-semibold">
                        <i class="fas fa-hourglass-half mr-2"></i> Generate Decade Round
                    </button>
                </div>
            </div>
            
            <!-- Genre Card -->
            <div class="bg-white shadow-md rounded-lg overflow-hidden border border-gray-200 transition-transform hover:transform hover:scale-[1.02]">
                <div class="h-24 bg-gradient-to-r from-orange-500 to-orange-700 flex items-center justify-center text-white">
                    <i class="fas fa-guitar text-4xl"></i>
                </div>
                <div class="p-6">
                    <h5 class="text-xl font-semibold text-navy-800 font-montserrat mb-3">By Genre</h5>
                    <p class="text-gray-600 mb-5 h-20">Create a themed music quiz with songs from a specific genre that has been used the least in your quizzes.</p>
                    <button type="submit" name="round_type" value="Genre" class="bg-orange-500 hover:bg-orange-600 text-white py-3 px-4 rounded-md transition-colors w-full font-semibold">
                        <i class="fas fa-music mr-2"></i> Generate Genre Round
                    </button>
                </div>
            </div>
            
            <!-- Tag Card -->
            <div class="bg-white shadow-md rounded-lg overflow-hidden border border-gray-200 transition-transform hover:transform hover:scale-[1.02]">
                <div class="h-24 bg-gradient-to-r from-purple-500 to-purple-700 flex items-center justify-center text-white">
                    <i class="fas fa-tags text-4xl"></i>
                </div>
                <div class="p-6">
                    <h5 class="text-xl font-semibold text-navy-800 font-montserrat mb-3">By Tag</h5>
                    <p class="text-gray-600 mb-3 h-20">Create a music quiz with songs that share a specific tag from your collection.</p>
                    <select name="tag_name" class="shadow border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline">
                        <option value="">Select a Tag</option>
                        {% for tag in tags %}
                            <option value="{{ tag }}">{{ tag }}</option>
                        {% endfor %}
                    </select>
                    <button type="submit" name="round_type" value="Tag" class="bg-orange-500 hover:bg-orange-600 text-white py-3 px-4 rounded-md transition-colors w-full font-semibold">
                        <i class="fas fa-tag mr-2"></i> Generate Tag Round
                    </button>
                </div>
            </div>
        </div>
    </form>
    
    <div class="mt-10 flex flex-col md:flex-row gap-6">
        <div class="flex-1 bg-navy-50 rounded-lg p-6 border border-navy-100 text-center">
            <h3 class="text-xl font-semibold text-navy-800 mb-2 font-montserrat">Need more songs?</h3>
            <p class="text-gray-600 mb-4">Import more songs from Spotify or Deezer to create even better music quizzes.</p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="{{ url_for('core.search') }}" class="bg-[#1DB954] hover:bg-[#1AA346] text-white py-2 px-4 rounded-md transition-colors inline-flex items-center">
                    <i class="fab fa-spotify mr-2"></i> Import from Spotify
                </a>
                <a href="{{ url_for('deezer.deezer_search') }}" class="bg-[#a238ff] hover:bg-[#8a30d8] text-white py-2 px-4 rounded-md transition-colors inline-flex items-center">
                    <i class="fab fa-deezer mr-2"></i> Import from Deezer
                </a>
            </div>
        </div>
        
        <div class="flex-1 bg-orange-50 rounded-lg p-6 border border-orange-100 text-center">
            <h3 class="text-xl font-semibold text-navy-800 mb-2 font-montserrat">Import a Playlist</h3>
            <p class="text-gray-600 mb-4">Quickly create a music quiz from an existing Spotify or Deezer playlist.</p>
            <a href="{{ url_for('generate.import_playlist') }}" class="bg-orange-500 hover:bg-orange-600 text-white py-2 px-4 rounded-md transition-colors inline-flex items-center">
                <i class="fas fa-cloud-download-alt mr-2"></i> Import from Playlist
            </a>
        </div>
    </div>
</div>
{% endblock %}