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

{% block content %}
<h1>Añadir Fuente URL</h1>

<div style="margin-bottom: 25px;">
    <div class="tabs" style="display: flex; gap: 10px; border-bottom: 2px solid #ddd; padding-bottom: 1px;">
        <button class="tab-btn active" onclick="switchTab('manual')"
            style="padding: 10px 20px; border: none; background: #fff; cursor: pointer; border-bottom: 3px solid #007bff; color: #007bff; font-weight: bold;">
            <i class="fas fa-edit"></i> Añadir Manualmente
        </button>
        <a href="{{ url_for('feeds.discover_feed') }}" class="tab-btn"
            style="padding: 10px 20px; border: none; background: #f8f9fa; cursor: pointer; text-decoration: none; color: #555; display: flex; align-items: center; gap: 8px;">
            <i class="fas fa-search"></i> Analizar Web (Descubrimiento Automático)
            <span class="badge"
                style="background: #e9ecef; color: #555; font-size: 10px; padding: 2px 6px; border-radius: 4px;">RECOMENDADO</span>
        </a>
    </div>
</div>

<div class="card" id="manual-tab">
    <div
        style="margin-bottom: 20px; padding: 15px; background: #e3f2fd; border-radius: 8px; border-left: 4px solid #1976D2;">
        <i class="fas fa-info-circle" style="color: #1976D2;"></i>
        Utiliza esta opción para añadir una fuente de URL monitorizada manualmente. Si quieres buscar todos los feeds
        RSS dentro de un sitio web, usa la pestaña <strong>Analizar Web</strong>.
    </div>

    <form method="post" action="{{ url_for('urls.add_url_source') }}" autocomplete="off">

        <label for="nombre">Nombre</label>
        <input id="nombre" name="nombre" type="text" required placeholder="Ej. El País">

        <label for="url" style="margin-top:15px;">URL</label>
        <input id="url" name="url" type="url" required placeholder="https://elpais.com">

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:15px;">
            <div>
                <label for="categoria_id">Categoría</label>
                <select id="categoria_id" name="categoria_id">
                    <option value="">— Sin categoría —</option>
                    {% for c in categorias %}
                    <option value="{{ c.id }}">{{ c.nombre }}</option>
                    {% endfor %}
                </select>
            </div>

            <div>
                <label for="pais_id">País</label>
                <select id="pais_id" name="pais_id">
                    <option value="">— Global —</option>
                    {% for p in paises %}
                    <option value="{{ p.id }}">{{ p.nombre }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <label for="idioma" style="margin-top:15px;">Idioma (2 letras)</label>
        <input id="idioma" name="idioma" type="text" maxlength="2" value="es">

        <div style="margin-top:20px;display:flex;gap:10px;justify-content:flex-end;">
            <a href="{{ url_for('urls.manage_urls') }}" class="btn btn-secondary">Cancelar</a>
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i> Guardar Fuente
            </button>
        </div>

    </form>
</div>

<a href="{{ url_for('urls.manage_urls') }}" class="top-link">← Volver</a>
{% endblock %}