{% extends "base.html" %}

{% block title %}Mi Panel - LIBEROS{% endblock %}

{% block content %}
<div class="section">
    <div class="container pt-5">
        <div class="row">
            <div class="col-12 mb-4">
                <h1>Mi Panel Personal</h1>
                <hr>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-12">
                <p class="mb-0">Bienvenido a tu panel personal en LIBEROS. Aquí puedes gestionar tu cuenta y acceder a las funciones disponibles para tu perfil.</p>
            </div>
        </div>

        <!-- Información del Usuario -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">Mi Información</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>Usuario:</strong> {{ current_user.username }}</p>
                                <p><strong>Email:</strong> {{ current_user.email }}</p>
                                <p><strong>Estado:</strong>
                                    <span class="badge bg-{{ 'success' if current_user.is_active else 'warning' }}">
                                        {{ 'Activo' if current_user.is_active else 'Pendiente de aprobación' }}
                                    </span>
                                </p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Fecha de Registro:</strong> {{ current_user.created_at.strftime('%d/%m/%Y %H:%M') if current_user.created_at else 'N/A' }}</p>
                                <p><strong>Mis Roles:</strong>
                                    {% for role in current_user.roles %}
                                        <span class="badge bg-info">{{ role.name }}</span>
                                    {% endfor %}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Funciones Disponibles -->
        <div class="row mb-4">
            <div class="col-12">
                <h3>Funciones Disponibles</h3>
            </div>
        </div>

        <div class="row">
            <!-- Blog -->
            <div class="col-md-6 col-lg-4 mb-3">
                <div class="card shadow-sm">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="fas fa-newspaper fa-2x text-primary"></i>
                        </div>
                        <h5 class="card-title">Blog</h5>
                        <p class="card-text text-muted">Lee nuestros últimos artículos y noticias</p>
                        <a href="{{ url_for('blog.list_articles') }}" class="btn btn-primary btn-sm">Ver Blog</a>
                    </div>
                </div>
            </div>

            <!-- Servicios -->
            <div class="col-md-6 col-lg-4 mb-3">
                <div class="card shadow-sm">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="fas fa-cogs fa-2x text-success"></i>
                        </div>
                        <h5 class="card-title">Servicios</h5>
                        <p class="card-text text-muted">Conoce nuestros servicios especializados</p>
                        <a href="{{ url_for('public.servicios_static_page') }}" class="btn btn-success btn-sm">Ver Servicios</a>
                    </div>
                </div>
            </div>

            <!-- Recursos -->
            <div class="col-md-6 col-lg-4 mb-3">
                <div class="card shadow-sm">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="fas fa-book fa-2x text-info"></i>
                        </div>
                        <h5 class="card-title">Recursos</h5>
                        <p class="card-text text-muted">Accede a materiales y recursos útiles</p>
                        <a href="{{ url_for('public.recursos_static_page') }}" class="btn btn-info btn-sm">Ver Recursos</a>
                    </div>
                </div>
            </div>

            <!-- Contacto -->
            <div class="col-md-6 col-lg-4 mb-3">
                <div class="card shadow-sm">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="fas fa-envelope fa-2x text-warning"></i>
                        </div>
                        <h5 class="card-title">Contacto</h5>
                        <p class="card-text text-muted">Ponte en contacto con nosotros</p>
                        <a href="{{ url_for('contact_bp.contact') }}" class="btn btn-warning btn-sm">Contactar</a>
                    </div>
                </div>
            </div>

            <!-- Plataforma LIBEROS -->
            <div class="col-md-6 col-lg-4 mb-3">
                <div class="card shadow-sm">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="fas fa-external-link-alt fa-2x text-secondary"></i>
                        </div>
                        <h5 class="card-title">Plataforma</h5>
                        <p class="card-text text-muted">Accede a la plataforma LIBEROS</p>
                        <a href="{{ config.APP_SITE_URL }}" class="btn btn-secondary btn-sm" target="_blank">Ir a Plataforma</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Acciones Rápidas -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">Acciones Rápidas</h5>
                        <div class="d-flex flex-wrap gap-2">
                            <a href="{{ url_for('public.home') }}" class="btn btn-outline-primary">
                                <i class="fas fa-home me-2"></i>Volver al Inicio
                            </a>
                            <button class="btn btn-outline-secondary" onclick="window.print()">
                                <i class="fas fa-print me-2"></i>Imprimir Página
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block styles %}
<style>
.card {
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.card-body {
    padding: 1.5rem;
}

.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.bg-primary { background-color: #007bff; }
.bg-success { background-color: #28a745; }
.bg-info { background-color: #17a2b8; }
.bg-warning { background-color: #ffc107; }
.bg-danger { background-color: #dc3545; }

.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    color: #fff;
    background-color: #0056b3;
    border-color: #004085;
    text-decoration: none;
}

.btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.btn-warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-primary {
    color: #007bff;
    border-color: #007bff;
    background-color: transparent;
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
    background-color: transparent;
}

.btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.2rem;
}

.gap-2 > * + * {
    margin-left: 0.5rem;
}

.d-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

@media (max-width: 768px) {
    .d-flex {
        flex-direction: column;
    }

    .gap-2 > * + * {
        margin-left: 0;
        margin-top: 0.5rem;
    }
}
</style>
{% endblock %}