{% load css_tags %}{% block_css 'enap_designsystem/blocks/cards.css' %}
{% load static wagtailcore_tags %}

<link rel="stylesheet" type="text/css" href="{% static 'enap_designsystem/blocks/cards.css' %}">

<div class="nav-section">
    {% if pagina_pai %}
        <div class="nav-section-header">
            <h2 class="nav-section-title">
                {{ pagina_pai.title }}
            </h2>
        </div>
    {% endif %}

    {% if child_pages %}
        <ul class="nav-list">
            {% for page in child_pages %}
                <li class="nav-list-item">
                    <a href="{{ page.url }}" class="nav-list-link">
                        <span> {{ page.title }}</span>
                        <svg class="nav-list-arrow" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="M5 12h14M12 5l7 7-7 7"/>
                        </svg>
                    </a>
                </li>
            {% endfor %}
        </ul>
    {% else %}
        <p>Nenhuma página encontrada.</p>
    {% endif %}
</div>

<style>
.nav-section {
    width: 100%;
}

.nav-section-header {
    margin-bottom: 12px;
}

.nav-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #024248;
    margin: 0;
}

.nav-section-title-link {
    color: inherit;
    text-decoration: none;
}

.nav-section-title-link:hover {
    color: #007D7A;
    text-decoration: underline;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #DEE3ED;
}

.nav-list-item {
    border-bottom: 1px solid #DEE3ED;
    padding-left: 0;
}

.nav-list-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 8px;
    color: #434A54;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-list-link:hover {
    background-color: #F5F7FA;
    color: #007D7A;
}

.nav-list-link:hover .nav-list-arrow {
    color: #007D7A;
    transform: translateX(4px);
}

.nav-list-arrow {
    flex-shrink: 0;
    color: #9AA3B0;
    transition: transform 0.15s ease, color 0.15s ease;
}
</style>