renako/templates/components/user_urls_list.html

<!-- User URLs List Component -->
{% if user_urls %}
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
        <h2 class="text-xl font-semibold text-gray-900 mb-6">
            Tus enlaces <span class="text-gray-500 text-base font-normal">({{ user_urls|length }})</span>
        </h2>
        
        <div class="space-y-3">
            {% for url in user_urls %}
            <div class="border border-gray-100 rounded-xl p-4 hover:bg-gray-50 transition-colors duration-200">
                <div class="flex items-center justify-between">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center space-x-3 mb-2">
                            <code class="text-sm bg-gray-100 text-primary px-3 py-1 rounded-lg font-mono">{{ url[1] }}</code>
                            <button 
                                onclick="copyToClipboard('https://please.checkthis.space/s/{{ url[1] }}')"
                                class="text-gray-400 hover:text-primary transition-colors duration-200"
                                title="Copiar enlace"
                            >
                                <i class="fas fa-copy text-sm"></i>
                            </button>
                            <span class="text-xs text-gray-500">{{ url[3] }} clicks</span>
                            {% if url[4] %}
                                {% set expires_date = url[4][:19] %}
                                <span class="text-xs px-2 py-1 rounded-full bg-orange-100 text-orange-600">
                                    <i class="fas fa-clock mr-1"></i>Expira: {{ expires_date.replace('T', ' ') }}
                                </span>
                            {% else %}
                                <span class="text-xs px-2 py-1 rounded-full bg-green-100 text-green-600">
                                    <i class="fas fa-infinity mr-1"></i>Permanente
                                </span>
                            {% endif %}
                        </div>
                        <p class="text-sm text-gray-600 truncate" title="{{ url[0] }}">
                            {{ url[0] }}
                        </p>
                    </div>
                    
                    <div class="flex items-center space-x-2 ml-4">
                        <a 
                            href="/s/{{ url[1] }}" 
                            target="_blank" 
                            class="text-gray-400 hover:text-primary transition-colors duration-200"
                            title="Visitar enlace"
                        >
                            <i class="fas fa-external-link-alt text-sm"></i>
                        </a>
                        <button 
                            onclick="showDeleteModal('{{ url[1] }}')" 
                            class="text-gray-400 hover:text-red-500 transition-colors duration-200"
                            title="Eliminar enlace"
                        >
                            <i class="fas fa-trash text-sm"></i>
                        </button>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% else %}
<div class="max-w-2xl mx-auto text-center">
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-12">
        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-link text-2xl text-gray-400"></i>
        </div>
        <h3 class="text-lg font-medium text-gray-700 mb-2">No hay enlaces aún</h3>
        <p class="text-gray-500">Acorta tu primer enlace arriba</p>
    </div>
</div>
{% endif %}

<!-- Modal de confirmación de eliminación -->
<div id="deleteModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
            </div>
            <h3 class="text-lg leading-6 font-medium text-gray-900 mt-4">Eliminar enlace</h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500">
                    ¿Estás seguro de que quieres eliminar este enlace? Esta acción no se puede deshacer.
                </p>
            </div>
            <div class="items-center px-4 py-3">
                <button 
                    id="confirmDelete" 
                    class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md w-24 mr-2 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300"
                >
                    Eliminar
                </button>
                <button 
                    id="cancelDelete" 
                    class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md w-24 hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300"
                >
                    Cancelar
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let currentShortCode = null;

// Mostrar modal de confirmación
function showDeleteModal(shortCode) {
    currentShortCode = shortCode;
    document.getElementById('deleteModal').classList.remove('hidden');
}

// Ocultar modal de confirmación
function hideDeleteModal() {
    document.getElementById('deleteModal').classList.add('hidden');
    currentShortCode = null;
}

// Event listeners para el modal
document.getElementById('confirmDelete').addEventListener('click', function() {
    if (currentShortCode) {
        deleteUrl(currentShortCode);
        hideDeleteModal();
    }
});

document.getElementById('cancelDelete').addEventListener('click', hideDeleteModal);

// Cerrar modal al hacer clic fuera de él
document.getElementById('deleteModal').addEventListener('click', function(e) {
    if (e.target === this) {
        hideDeleteModal();
    }
});

// Delete URL function
async function deleteUrl(shortCode) {
    
    try {
        const response = await fetch(`/delete/${shortCode}`, {
            method: 'POST'
        });
        
        const data = await response.json();
        
        if (data.success) {
            showToast('Enlace eliminado exitosamente', 'success');
            // Reload page to update the list
            setTimeout(() => {
                window.location.reload();
            }, 1000);
        } else {
            showToast(data.error || 'Error al eliminar el enlace', 'error');
        }
    } catch (error) {
        showToast('Error de conexión', 'error');
    }
}
</script>