{% extends "base.html" %}
{% block title %}Añadir Feed{% endblock %}

{% block content %}
<div class="card feed-detail-card"
    style="padding: 40px; border-radius: 15px; background-color: var(--glass-bg); box-shadow: 0 10px 30px rgba(0,0,0,0.05); backdrop-filter: blur(10px);">
    <h1
        style="font-family: var(--primary-font); font-weight: 700; margin-bottom: 30px; border-bottom: 2px solid var(--accent-color); display: inline-block; padding-bottom: 10px;">
        Añadir Feed
    </h1>

    <form action="{{ url_for('feeds.add_feed') }}" method="post" id="addFeedForm" class="form-grid">

        <!-- Nombre -->
        <div class="floating-label-group">
            <input type="text" id="nombre" name="nombre" placeholder=" " required>
            <label for="nombre">Nombre del feed</label>
        </div>

        <!-- Descripción -->
        <div class="floating-label-group">
            <textarea id="descripcion" name="descripcion" placeholder=" " rows="3"></textarea>
            <label for="descripcion">Descripción (opcional)</label>
        </div>

        <!-- URL -->
        <div class="floating-label-group">
            <input type="url" id="url" name="url" placeholder=" " required>
            <label for="url">URL del feed</label>
        </div>

        <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
            <!-- Categoria (Searchable) -->
            <div class="form-group">
                <label for="categoria_id"
                    style="display: block; margin-bottom: 8px; font-weight: 600;">Categoría</label>
                <select id="categoria_id" name="categoria_id" class="searchable"
                    placeholder="Selecciona una categoría...">
                    <option value="">— Sin categoría —</option>
                    {% for c in categorias %}
                    <option value="{{ c.id }}">{{ c.nombre }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Pais (Searchable) -->
            <div class="form-group">
                <label for="pais_id" style="display: block; margin-bottom: 8px; font-weight: 600;">País</label>
                <select id="pais_id" name="pais_id" class="searchable" placeholder="Selecciona un país...">
                    <option value="">Global</option>
                    {% for p in paises %}
                    <option value="{{ p.id }}">{{ p.nombre }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <!-- Idioma & Submit -->
        <div class="form-row"
            style="display: grid; grid-template-columns: 1fr 2fr; gap: 20px; align-items: end; margin-top: 20px;">
            <div class="floating-label-group" style="margin-bottom: 0;">
                <input type="text" id="idioma" name="idioma" placeholder=" " maxlength="5">
                <label for="idioma">Idioma (ej: es)</label>
            </div>

            <div class="form-actions" style="text-align: right;">
                <a href="{{ url_for('feeds.list_feeds') }}" class="btn btn-secondary"
                    style="margin-right: 10px; background: transparent; color: var(--text-color); border: 1px solid var(--border-color);">
                    Cancelar
                </a>
                <button class="btn btn-primary" type="submit" id="submitBtn">
                    <i class="fas fa-plus"></i> Añadir Feed
                </button>
            </div>
        </div>
    </form>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Real-time URL Validation
        const urlInput = document.getElementById('url');
        const submitBtn = document.getElementById('submitBtn');

        urlInput.addEventListener('input', function () {
            if (this.value && this.validity.valid) {
                this.style.borderColor = "#2ecc71"; // Green
            } else if (this.value) {
                this.style.borderColor = "#e74c3c"; // Red
            } else {
                this.style.borderColor = ""; // Reset
            }
        });

        // Form Submit State
        document.getElementById('addFeedForm').addEventListener('submit', function () {
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Guardando...';
        });
    });
</script>
{% endblock %}