{% extends 'base.html' %}
{% load static %}
{% block extrahead %}
    <link rel="stylesheet" href="{% static "css/blogzine.css" %}">
{% endblock %}
{% block principal %}
    <section class="pt-4 pb-0 card-grid">
        <div class="container">
            {% for message in messages %}
                {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
                    <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <i class="fas fa-exclamation-triangle"></i> {{ message }}!
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endif %}
            {% endfor %}
            <h1 class="text-center text-danger lato fw-bold">VITALAPP</h1>
            <h3 class="text-center text-danger m-3 mb-5 lato fw-bold">Mi bienestar mi compromiso</h3>
            <h5 class="text-danger my-3 lato fw-semibold">A LA VANGUARDIA CON EL MEJORAMIENTO DE LA CALIDAD DE VIDA.</h5>
            <div class="d-block">
                <p class="h5 lh-base mb-4 d-block justify-content-start">Si una de tus preocupaciones más frecuentes 
                    es la calidad de vida y
                    como esta ha empeorado últimamente entonces debes de leer esto.</p>
                <p class="h5 lh-base mb-4 d-block justify-content-start">Según la OMS (Organización Mundial de la Salud)
                    , en el año 2025 la
                    población mayor de 60 años se aproximará a las 1.200 millones de personas, lo que puede afectar
                    significativamente el surgimiento de enfermedades crónicas. A continuación, se explicará más
                    claramente:</p>
            </div>
            <div class="d-block">
                <div class="row text-center">
                    <div class="col">
                        <h5 class="lato fw-semibold">HIPERTENSIÓN</h5>
                        <div class="circle">
                            <div class="inner-circle">
                                <img src="{% static 'img/heart.png'%}" class="object-fit-contain mt-1 p-3
                                text-center" alt="...">
                            </div>
                        </div>
                        <div class="p-2">
                            <p class="text-center h5 lh-base">Esta enfermedad la padecen 1.200 millones de personas
                                en el mundo entero y 5 millones solo en Colombia.</p></div>
                    </div>
                    <div class="col">
                        <h5 class="lato fw-semibold">DIABETES</h5>
                        <div class="circle">
                            <div class="inner-circle">
                                <img src="{% static 'img/diabet.png'%}" class="object-fit-contain
                                text-center p-14" alt="...">
                            </div>
                        </div>
                        <div class="p-2">
                            <p class="text-center h5 lh-base">Esta enfermedad la padecen 480 millones de personas
                                en el mundo entero y 1.6 millones solo en Colombia.</p></div>
                    </div>
                    <div class="col">
                        <h5 class="lato fw-semibold">DEMENCIA</h5>
                        <div class="circle">
                            <div class="inner-circle">
                                <img src="{% static 'img/brain.png'%}" class="object-fit-contain mt-1 p-3
                                text-center" alt="...">
                            </div>
                        </div>
                        <div class="p-2">
                            <p class="text-center h5 lh-base">Esta enfermedad la padecen 50 millones de personas
                                en el mundo entero y su cifra en Colombia es desconocida.</p></div>
                    </div>
                </div>
            </div>
            <div class="d-block">
                <p class="text-center h5 lh-base mt-5">El panorama general es incierto, pero hay una solución bastante
                    práctica y a tu alcance; esa solución es VitalApp.</p>
            </div>
            <div class="d-block">
                <p class="mt-5 text-center h3 lh-base lato text-danger">"<strong>VitalApp</strong> es una
                    <strong>aplicación</strong> que ofrece a las personas mayores
                    <strong>herramientas prácticas y eficaces</strong> para mejorar su bienestar y acceder a una
                    <strong>calidad de vida óptima</strong>, mediante un programa de
                    <strong>"Tiempo con Calidad"</strong> y teniendo en cuenta como quiero estar."</p>
            </div>
            <div class="d-block">
                <p class="mt-5 h5 lh-base mb-4 d-block justify-content-start"><strong>VitalApp</strong> se centra en 
                    tres objetivos
                    claramente definidos, estos objetivos tienen por meta mejorar progresivamente la calidad de
                    vida de las personas. O piensa en esto,
                    <strong>¿alguna vez has conocido a alguien que se mantiene increíblemente ágil y lúcido, incluso
                        en sus 80 o 90 años?</strong> Si la respuesta es sí, muy probablemente se deba a que
                    esta persona coloque en práctica los principios que explicaré a continuación.</p>
                <p class="h5 lh-base mb-4 d-block justify-content-start"><strong class="text-danger">Mantener la autonomía:</strong><br>
                    Si bien el inexorable paso del tiempo va minando nuestras condiciones, el papel de sujeto pasivo
                    frente al deterioro es cosa del pasado. Con acciones puntuales y constantes prolongaremos nuestra
                    capacidad de movernos, aprender y disfrutar del mundo de manera insospechada hasta hace pocos
                    años.</p>
                <p class="h5 lh-base mb-4 d-block justify-content-start"><strong class="text-danger">Conservar la vitalidad:</strong><br>
                    Aprovecharemos el principio de la termodinámica que destaca que la energía ni se crea ni se
                    destruye, solo se transforma, y eso lo saben muy bien nuestro cuerpo y nuestra mente es cuestión
                    de adaptarnos, pero nunca dejar de ser activos y dinámicos.</p>
                <p class="h5 lh-base mb-4 d-block justify-content-start"><strong class="text-danger">Preservar la salud:</strong><br>
                    La salud más que un estado es una capacidad consistente en afrontar las agresiones, tanto
                    externas como internas, con respuestas que no deterioren ni limiten las funciones del organismo.
                    Aprenderemos a aprovisionarnos con todo tipo de herramientas para que predomine en lo posible
                    LA SALUD.</p>
            </div>
            <div class="d-block">
                <h3 class="lato text-danger mt-5 mb-3">"TIEMPO CON CALIDAD"</h3>
                <p class="h5 lh-base mb-4 d-block justify-content-start">El programa "Tiempo con Calidad está conformado
                    por seis pilares
                    sobre los cuales se construye el bienestar. Estos pilares se resumen en el siguiente gráfico:</p>
                <div class="mt-3">
                    <div class="hexagon-pattern">
                        <div class="hexagon-container">
                            <div class="hexagon p-14 bg-redgradient" style="margin-top: 95%;">
                                <h1 class="text-white fw-bold">1</h1>
                            </div>
                            <img src="{% static 'img/foodorgnc.png'%}" class="object-fit-contain mt-3
                                text-center" alt="..." style="height: 70px;">
                            <div class="px-3">
                                <h3 class="mt-2 mb-2 lato-black">PASO 1</h3>
                                <span>Consuma una dieta CESA (Completa, Equilibrada, Suficiente y Adecuada).</span>
                            </div>
                        </div>
                        <div class="hexagon-container">
                            <div class="px-3">
                                <span>Haga ejercicio regularmente.</span>
                                <h3 class="mt-2 mb-2 lato-black">PASO 2</h3>
                            </div>
                            <img src="{% static 'img/hearthard.png'%}" class="object-fit-contain mb-3
                                text-center" alt="..." style="height: 70px;">
                            <div class="hexagon p-14 bg-orangegradient">
                                <h1 class="text-white fw-bold">2</h1>
                            </div>
                        </div>
                        <div class="hexagon-container">
                            <div class="hexagon p-14 bg-yellowgradient" style="margin-top: 95%;">
                                <h1 class="text-white fw-bold">3</h1>
                            </div>
                            <img src="{% static 'img/night.png'%}" class="object-fit-contain mt-3
                                text-center" alt="..." style="height: 70px;">
                            <div class="px-3">
                                <h3 class="mt-2 mb-2 lato-black">PASO 3</h3>
                                <span>Duerma lo suficiente.</span>
                            </div>
                        </div>
                        <div class="hexagon-container">
                            <div class="px-3">
                                <span>Controle su estrés.</span>
                                <h3 class="mt-2 mb-2 lato-black">PASO 4</h3>
                            </div>
                            <img src="{% static 'img/healtplus.png'%}" class="object-fit-contain mb-3
                                text-center" alt="..." style="height: 70px;">
                            <div class="hexagon p-14 bg-grengradient">
                                <h1 class="text-white fw-bold">4</h1>
                            </div>
                        </div>
                        <div class="hexagon-container">
                            <div class="hexagon p-14 bg-clearbluegradient" style="margin-top: 95%;">
                                <h1 class="text-white fw-bold">5</h1>
                            </div>
                            <img src="{% static 'img/hands.png'%}" class="object-fit-contain mt-3
                                text-center" alt="..." style="height: 70px;">
                            <div class="px-3">
                                <h3 class="mt-2 mb-2 lato-black">PASO 5</h3>
                                <span>Fomente los contactos sociales.</span>
                            </div>
                        </div>
                        <div class="hexagon-container">
                            <div class="px-3">
                                <span class="overflow-x-visible">Desafié su cerebro.</span>
                                <h3 class="mt-2 mb-2 lato-black">PASO 6</h3>
                            </div>
                            <img src="{% static 'img/brainhealt.png'%}" class="object-fit-contain mb-3
                                text-center" alt="..." style="height: 70px;">
                            <div class="hexagon p-14 bg-bluegradient">
                                <h1 class="text-white fw-bold">6</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="pt-4 pb-0 card-grid mb-5">
        <div class="container">
            <h1 class="lato fw-bold text-danger h4 mt-4 mb-3">NUESTRAS ÚLTIMAS NOVEDADES</h1>
            <div class="row g-4">
                {% if latest_posts %}
                    <div class="col-lg-6">
                    <div class="card card-img-bottom bg-black">
                        <!-- Mostrar el más reciente -->
                        {% with latest_posts.0 as post %}
                        <img src="{{ post.miniature.url }}" class="card-img object-fit-cover card-principal" alt="...">
                        <div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
                            <div class="w-100 mt-auto">
                                <span class="rounded-1 badge bg-danger">{{ post.category.name }}</span>
                                <h5 class="card-title mt-3 lato fw-bold text-white text-uppercase">
                                    <a href="{%  url 'articulo' post.slug %}" class="text-reset btn-link
                                    stretched-link">{{ post.title }}</a></h5>
                                <p class="card-text text-white text-truncate">{{ post.excerpt }}</p>
                                <p class="card-text text-white"><small>{{ post.published|date }}</small></p>
                            </div>
                        </div>
                        {% endwith %}
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="row g-4">
                        <div class="col-12">
                            <div class="card card-img-bottom bg-black">
                                {% with latest_posts.1 as postal %}
                                    {% if postal %}
                                <img src="{{ postal.miniature.url }}" class="card-img object-fit-cover card-secundario"
                                     alt="...">
                                <div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
                                    <div class="w-100 mt-auto">
                                        <span class="rounded-1 badge bg-warning">{{ postal.category.name }}</span>
                                        <h5 class="card-title mt-3 text-white lato fw-bold text-uppercase">
                                            <a href="{%  url 'articulo' postal.slug %}" class="text-reset btn-link
                                            stretched-link">{{ postal.title }}</a></h5>
                                        <p class="card-text text-white text-truncate">{{ postal.excerpt }}</p>
                                        <p class="card-text text-white"><small>{{ postal.published|date }}</small></p>
                                    </div>
                                </div>
                                    {% endif %}
                                {% endwith %}
                            </div>
                        </div>
                        {% for post in latest_posts|slice:"2:" %}
                        <div class="col-md-6">
                            <div class="card card-img-bottom bg-black">
                                <img src="{{ post.miniature.url }}" class="card-img object-fit-cover card-secundario"
                                     alt="...">
                                <div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
                                    <div class="w-100 mt-auto">
                                        <span class="rounded-1 badge bg-success">{{ post.category.name }}</span>
                                        <h5 class="card-title mt-2 text-white lato fw-bold text-uppercase">
                                            <a href="{%  url 'articulo' post.slug %}" class="text-reset btn-link
                                            stretched-link">{{ post.title }}</a></h5>
                                        <p class="card-text text-white text-truncate"><small>{{ post.excerpt }}</small></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                {% else %}
                    <div class="col">
                        <div class="card card-img-bottom text-bg-dark">
                            <img src="{% static 'img/03.jpeg'%}" class="card-img object-fit-cover
                            card-secundario" alt="...">
                            <div class="card-img-overlay">
                                <h5 class="card-title mt-2 text-white lato fw-bold text-uppercase
                                text-center p-5">Próximamente</h5>
                            </div>
                        </div>
                    </div>
                {% endif %}
                    <div class="col-md-6 visually-hidden">
                        <div class="card card-img-bottom bg-black">
                            <img src="{% static 'img/04.jpeg'%}" class="card-img object-fit-cover card-secundario"
                                     alt="...">
                                <div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
                                    <div class="w-100 mt-auto">
                                        <span class="rounded-1 badge bg-primary">Bienestar</span>
                                        <h5 class="card-title mt-2 text-white lato fw-bold text-uppercase">Card title</h5>
                                        <p class="card-text text-white"><small>Last updated 3 mins ago</small></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 text-center mt-5">
                    <a href="{%  url 'contenido_lista' %}" class="btn btn-outline-info">Más Articulos
                        <i class="fa-light fa-circle-arrow-right ms-2 align-middle"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>
{% endblock %}