{% load wagtailcore_tags %}
{% with url=value.arquivo.url|default:value.link_externo %}
<div class="edital-documento-item">
    <span class="edital-documento-tipo">{{ tipo_display }}</span>
    <div class="edital-documento-conteudo">
        {% if url %}
            <a href="{{ url }}" target="_blank" rel="noopener noreferrer" class="edital-documento-titulo">
                <i class="fa-solid fa-file-pdf edital-documento-icone"></i>
                {{ value.titulo }}
                <i class="fa-solid fa-arrow-up-right-from-square edital-documento-externo"></i>
            </a>
        {% else %}
            <span class="edital-documento-titulo">{{ value.titulo }}</span>
        {% endif %}
        {% if value.descricao %}
            <p class="edital-documento-descricao">{{ value.descricao }}</p>
        {% endif %}
    </div>
</div>
{% endwith %}

<style>
.edital-documento-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: #fff;
    border: 1px solid #e9edee;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(2, 66, 72, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.edital-documento-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(2, 66, 72, 0.1);
    border-color: #cfe6e5;
}
.edital-documento-tipo {
    color: #fff;
    background-color: #007D7A;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 999px;
}
.edital-documento-conteudo {
    flex: 1;
}
.edital-documento-titulo {
    color: #024248;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}
a.edital-documento-titulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #007D7A;
    text-decoration: underline;
    text-underline-offset: 2px;
}
a.edital-documento-titulo:hover {
    color: #005855;
}
.edital-documento-icone {
    color: #007D7A;
    font-size: 14px;
    flex-shrink: 0;
}
.edital-documento-externo {
    color: #94a3ab;
    font-size: 11px;
    flex-shrink: 0;
}
.edital-documento-descricao {
    color: #64748b;
    font-size: 13px;
    margin: 4px 0 0 0;
}
@media (max-width: 768px) {
    .edital-documento-item {
        flex-direction: column;
        align-items: flex-start;
    }
}
</style>