{% extends "base.html" %}

{% block title %}Mis Enlaces - Renako{% endblock %}

{% block content %}
<div class="space-y-12">
    <!-- Page Header -->
    <div class="text-center pt-8 opacity-0 transform translate-y-6" id="pageHeader">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">
            <i class="fas fa-link mr-3 text-primary"></i>Mis Enlaces
        </h1>
        <p class="text-lg text-gray-600">
            Gestiona todos tus enlaces acortados
        </p>
    </div>

    <!-- User URLs List Component -->
    <div class="opacity-0 transform translate-y-6" id="urlsList">
        {% include 'components/user_urls_list.html' %}
    </div>

    <!-- Back to Home -->
    <div class="text-center opacity-0 transform translate-y-6" id="backButton">
        <a 
            href="{{ url_for('index') }}" 
            class="inline-flex items-center px-6 py-3 bg-primary hover:bg-secondary text-white font-medium rounded-xl transition-all duration-200"
        >
            <i class="fas fa-arrow-left mr-2"></i>
            Acortar nuevo enlace
        </a>
    </div>
</div>

<script>
// Animación de entrada para la página Mis Enlaces
document.addEventListener('DOMContentLoaded', function() {
    const pageHeader = document.getElementById('pageHeader');
    const urlsList = document.getElementById('urlsList');
    const backButton = document.getElementById('backButton');
    
    // Animar header
    setTimeout(() => {
        pageHeader.style.transition = 'all 0.8s ease-out';
        pageHeader.style.opacity = '1';
        pageHeader.style.transform = 'translateY(0)';
    }, 200);
    
    // Animar lista de URLs
    setTimeout(() => {
        urlsList.style.transition = 'all 0.8s ease-out';
        urlsList.style.opacity = '1';
        urlsList.style.transform = 'translateY(0)';
    }, 400);
    
    // Animar botón de regreso
    setTimeout(() => {
        backButton.style.transition = 'all 0.8s ease-out';
        backButton.style.opacity = '1';
        backButton.style.transform = 'translateY(0)';
    }, 600);
});
</script>
{% endblock %}