{% extends 'base.html' %}

{% block menuapp %}

{% endblock menuapp %}

{% block content %}
<div class="container-xl">
    <style>
        body { font-family: Arial, sans-serif; }
        .apartado {
            margin-bottom: 20px;
            background-color: #ffffff;  /* Fondo blanco para el bloque del apartado */
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .titulo-apartado { font-size: 1.5em; font-weight: bold; margin-top: 20px; }
        
        .item { margin-bottom: 10px; }
        .titulo-item {
            font-weight: bold;
            cursor: pointer;
            padding: 10px;
            background-color: #ffffff;
            border: 1px solid #ddd;
            color: #008000; /* Verde */
        }
        .descripcion-item {
            display: none;
            padding: 10px;
            border: 1px solid #ddd;
            border-top: none;
        }
    </style>

    <h1>Centro de Ayuda</h1>

    {% for code, nombre in apartados %}
        <div class="apartado">
            <div class="titulo-apartado">{{ nombre }}</div>
            {% for item in elementos %}
                {% if item.apartado == code %}
                    <div class="item">
                        <div class="titulo-item" onclick="toggleDescripcion(this)">{{ item.titulo }}</div>
                        <div class="descripcion-item">{{ item.descripcion|safe }}</div>
                    </div>
                {% endif %}
            {% empty %}
                <p>No hay elementos en esta sección.</p>
            {% endfor %}
        </div>
    {% endfor %}

    <script>
        // Función para mostrar/ocultar la descripción al hacer clic en el título
        function toggleDescripcion(element) {
            const descripcion = element.nextElementSibling;
            if (descripcion.style.display === "none" || descripcion.style.display === "") {
                descripcion.style.display = "block";
            } else {
                descripcion.style.display = "none";
            }
        }
    </script>

    <div class="row g-3 mb-4 align-items-center justify-content-between">
        <div class="col-auto">
            <a class="btn app-btn-secondary" href="{% url 'principal' %}">Volver al inicio</a>
        </div>
    </div>
</div>
{% endblock %}