{% extends "base.html" %}

{% block titulo %}
<title>Informações</title>
{% endblock %}

{% block conteudo %}

<div class="p-6 md:p-10">
    <div class="bg-red-100 border border-red-300 text-red-800 p-4 rounded-xl mb-6">
        <strong class="block mb-2">🚨 Aviso Importante</strong>
        <p>Os conteúdos dessa página podem ser sensíveis.</p>
        <p>Se você estiver passando por uma situação difícil, lembre-se: você não está sozinha. Procure ajuda de pessoas de confiança ou profissionais especializados.</p>
        <p>💜 Estamos juntas nessa jornada.</p>
    </div>

    <!-- TÍTULO -->
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-semibold flex items-center gap-2 text-[#142026]">
            📝 Informações
        </h1>

        <a href="{{ url_for('logout') }}" class="text-gray-500 hover:text-black">✖ Sair</a>
    </div>

    <!-- SUBTEXTO -->
    <p class="text-gray-500 mb-8">
        Conhecimento é poder. Explore os temas abaixo.
    </p>

    <!-- CARDS -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">

        {% for informacao in infos %}
        <div class="bg-purple-300 p-6 rounded-2xl shadow-sm hover:shadow-md transition relative">

            <!-- TOPO -->
            <div class="flex justify-between items-start mb-4">
                <div class="w-12 h-12 bg-purple-100 flex items-center justify-center rounded-xl text-xl">
                    
                📝
                </div>

                <span class="text-gray-700 text-sm">
                    Conteúdo
                </span>
            </div>

            <!-- TÍTULO -->
            <h2 class="font-semibold text-lg mb-2 text-[#142026]">
                {{ informacao.titulo }}
            </h2>

            <!-- DESCRIÇÃO -->
            {% if informacao.descricao %}
            <p class="text-gray-700 text-sm">
                {{ informacao.descricao }}
            </p>
            {% endif %}

            <!-- BOTÃO -->
            <a href="{{ url_for('abrir_informacao', id=informacao.id) }}"
               class="inline-block mt-4 text-sm font-medium text-[#142026] hover:underline">
                Abrir →
            </a>

        </div>
        {% endfor %}

    </div>

</div>

{% endblock %}