{% extends "base.html" %}

{% block content %}
<div class="container mt-5 pt-5 mb-5">
    <div class="mb-4">
        <a href="{{ url_for('admin.manage_social_networks') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left"></i> Volver a la lista
        </a>
    </div>
    
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">{{ 'Editar Red Social' if network else 'Nueva Red Social' }}</h5>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ url_for('admin.edit_social_network', network_id=network.id) if network else url_for('admin.create_social_network') }}">
                <div class="mb-3">
                    <label for="name" class="form-label">Nombre</label>
                    <input type="text" class="form-control" id="name" name="name" 
                           value="{{ network.name if network else '' }}" required>
                    <div class="form-text">Nombre de la red social (ej. Facebook, Twitter)</div>
                </div>
                
                <div class="mb-3">
                    <label for="icon" class="form-label">Clase de icono</label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i id="icon-preview" class="{{ network.icon if network else 'fab fa-share-alt' }}"></i>
                        </span>
                        <input type="text" class="form-control" id="icon" name="icon" 
                               value="{{ network.icon if network else 'fab fa-share-alt' }}" required>
                    </div>
                    <div class="form-text">
                        Clase de Font Awesome para el icono (ej. fab fa-facebook-f). 
                        <a href="https://fontawesome.com/icons" target="_blank">Ver iconos disponibles</a>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label for="color" class="form-label">Color</label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <input type="color" id="color-picker" 
                                   value="{{ network.color if network else '#3b5998' }}" style="width: 35px; height: 35px;">
                        </span>
                        <input type="text" class="form-control" id="color" name="color" 
                               value="{{ network.color if network else '#3b5998' }}" required>
                    </div>
                    <div class="form-text">Color hexadecimal para el botón (ej. #3b5998)</div>
                </div>
                
                <div class="mb-3">
                    <label for="url_pattern" class="form-label">Patrón URL</label>
                    <input type="text" class="form-control" id="url_pattern" name="url_pattern" 
                           value="{{ network.url_pattern if network else '' }}" required>
                    <div class="form-text">
                        Patrón de URL para compartir. Use {url} para la URL del artículo, {title} para el título y {summary} para el resumen.<br>
                        Ejemplos:<br>
                        - Facebook: https://www.facebook.com/sharer/sharer.php?u={url}&quote={title}<br>
                        - Twitter: https://twitter.com/intent/tweet?text={title}&url={url}<br>
                        - WhatsApp: https://wa.me/?text={title}%20{url}
                    </div>
                </div>
                
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="is_active" name="is_active" 
                           {{ 'checked' if not network or network.is_active else '' }}>
                    <label class="form-check-label" for="is_active">Activo</label>
                </div>
                
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="requires_mobile" name="requires_mobile" 
                           {{ 'checked' if network and network.requires_mobile else '' }}>
                    <label class="form-check-label" for="requires_mobile">Optimizado para móviles</label>
                    <div class="form-text">
                        Marque esta opción para redes como WhatsApp que requieren optimización móvil.
                    </div>
                </div>
                
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Guardar Cambios
                </button>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function() {
        // Actualizar vista previa del icono
        $('#icon').on('input', function() {
            $('#icon-preview').attr('class', $(this).val());
        });
        
        // Sincronizar el selector de color con el input
        $('#color-picker').on('input', function() {
            $('#color').val($(this).val());
        });
        $('#color').on('input', function() {
            $('#color-picker').val($(this).val());
        });
    });
</script>
{% endblock %}