{% extends "base.html" %}

{% block title %}Añadir Noticia desde URL{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h4 class="mb-0">Añadir Noticia desde URL</h4>
                </div>
                <div class="card-body">
                    <p class="card-text text-muted">Pega la URL de un artículo de noticias. El sistema intentará extraer el título, resumen e imagen automáticamente.</p>
                    <form action="{{ url_for('add_url') }}" method="post" class="mt-3">
                        
                        <!-- Campo para la URL -->
                        <div class="mb-3">
                            <label for="url" class="form-label"><strong>URL de la Noticia</strong></label>
                            <input type="url" class="form-control" id="url" name="url" required placeholder="https://ejemplo.com/noticia-a-scrapear">
                        </div>
                        
                        <!-- Selector de Categoría -->
                        <div class="mb-3">
                            <label for="categoria_id" class="form-label"><strong>Categoría</strong></label>
                            <select class="form-select" id="categoria_id" name="categoria_id" required>
                                <option value="" disabled selected>-- Selecciona una categoría --</option>
                                {% for categoria in categorias %}
                                    <option value="{{ categoria.id }}">{{ categoria.nombre }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- Selector de País -->
                        <div class="mb-3">
                            <label for="pais_id" class="form-label"><strong>País</strong></label>
                            <select class="form-select" id="pais_id" name="pais_id" required>
                                <option value="" disabled selected>-- Selecciona un país --</option>
                                {% for pais in paises %}
                                    <option value="{{ pais.id }}">{{ pais.nombre }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- Botones de Acción -->
                        <div class="d-flex justify-content-end pt-3">
                            <a href="{{ url_for('dashboard') }}" class="btn btn-secondary me-2">Cancelar</a>
                            <button type="submit" class="btn btn-primary">Añadir Noticia</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}