{% extends 'base.html' %}

{% block title %}Import from {{ service_name }}{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto px-4 py-10">
    <div class="bg-white rounded-lg shadow-md p-8">
        <h2 class="text-3xl font-bold mb-4 text-center text-navy-800 font-montserrat">
            Import {{ item_type }} from {{ service_name }}
            {% if service_name == 'Spotify' %}<i class="fab fa-spotify ml-2 text-sm"></i>{% elif service_name == 'Deezer' %}<i class="fab fa-deezer ml-2 text-sm"></i>{% endif %}
        </h2>
        
        <div class="mb-8 bg-gray-50 rounded-lg p-5 border border-gray-200">
            <h3 class="font-semibold text-lg mb-2 flex items-center text-navy-800">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-teal-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                </svg>
                How to find the {{ service_name }} {{ item_type|lower }} ID
            </h3>
            <ol class="text-gray-700 space-y-2">
                <li>1. Go to the {{ service_name }} website and navigate to your desired {{ item_type|lower }}</li>
                <li>2. Look at the URL in your browser's address bar</li>
                <li>3. Find the ID in the URL format shown below:</li>
            </ol>
            <div class="mt-3 p-3 bg-gray-100 rounded border border-gray-300 font-mono text-sm break-all">
                {{ url_example_prefix }}<span class="font-bold text-teal-600">{{ url_example_id }}</span>
            </div>
        </div>

        <form method="POST" action="{{ form_action }}" class="space-y-6">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
            <div>
                <label for="{{ id_field }}" class="block text-sm font-medium text-gray-700 mb-2">{{ item_type }} ID:</label>
                <input type="text" id="{{ id_field }}" name="{{ id_field }}" placeholder="Enter {{ item_type|lower }} ID..." required 
                       class="w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500" />
            </div>
            
            <div class="flex justify-between items-center pt-2">
                <a href="{{ back_url }}" class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-md transition-colors border border-gray-300">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Back to Search
                </a>
                <button type="submit" class="inline-flex items-center px-6 py-2 rounded-md font-medium text-white transition-colors bg-orange-500 hover:bg-orange-600">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                    </svg>
                    Import {{ item_type }}
                </button>
            </div>
        </form>
    </div>

    <div class="mt-6 text-center text-sm text-gray-500">
        <p>Importing from {{ service_name }} allows you to add songs directly to your music round collection.</p>
        <div class="mt-2">
            {% if service_name == 'Spotify' %}
            <span class="inline-flex items-center text-navy-800">
                <i class="fab fa-spotify mr-1"></i> Spotify Integration
            </span>
            {% elif service_name == 'Deezer' %}
            <span class="inline-flex items-center text-navy-800">
                <i class="fab fa-deezer mr-1"></i> Deezer Integration
            </span>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}