{% extends "enap_designsystem/base.html" %}
{% load wagtailcore_tags wagtailimages_tags %}
{% load static %}

{%block govnavbar %}
    <div style="background-color: #071E41;">
        <div class="menu">
            <div class="logo">
                <img style="width: 51px; height: 18px;" src="{% static 'enap_designsystem/icons/logo-white.png' %}" alt="Passar pro lado esquerdo" alt="Logo GovBR" height="40">
            </div>
            <a href="https://www.gov.br/secom/pt-br/acesso-a-informacao/comunicabr">Comunica BR</a>
            <div class="separator"></div>
            <a href="https://www.gov.br/acessoainformacao/pt-br">Acesso à informação</a>
            <div class="separator"></div>
            <a href="https://www.gov.br/pt-br/participacao-social/">Participe</a>
            <div class="separator"></div>
            <a href="https://www4.planalto.gov.br/legislacao/">Legislação</a>
            <div class="separator"></div>
            <a href="https://www.gov.br/pt-br/orgaos-do-governo">Órgãos do Governo</a>
        </div>
    </div>
{% endblock %}

{% block navbar %}
    {% if page.navbar %}
        {% include "enap_designsystem/blocks/navbar/navbar_block.html" with navbar=page.navbar %}
    {% endif %}
{% endblock %}

{% block content %}
<article class="enap-noticia">

	<h1>{{ page.title }}</h1>

	{# Legenda #}
	{% if page.caption %}
		<div class="content-constrained">
			<h2 class="noticia-caption">{{ page.caption }}</h2>
		</div>
	{% endif %}

	{# Informações de publicação #}
	<div class="noticia-meta content-constrained">
		{% if page.author_display %}
			<p><strong>Por:</strong> {{ page.author_display }}</p>
		{% elif page.author %}
			<p><strong>Por:</strong> {{ page.author.get_full_name|default:page.author.username }}</p>
		{% endif %}
		{% if page.date_display %}
			<p><strong>Publicado em:</strong> {{ page.date_display|date:"d \d\e F \d\e Y" }}</p>
		{% endif %}
	</div>




	{# Imagem destacada via StreamField #}
	{% if page.featured_image %}
		{% for block in page.featured_image %}
			{% if block.block_type == "image" %}
				{% image block.value.image original as img %}
				<div class="featured-image content-constrained">
					<div class="flex-creditos">
					<i class="fa-solid fa-camera"></i>
					{% if block.value.caption %}
						<div class="caption">{{ block.value.caption }}</div>
					{% endif %}
				</div>
					<img class="featured-image" src="{{ img.url }}" alt="{{ block.value.caption|default:page.title }}">
				</div>
			{% endif %}
		{% endfor %}
	{% endif %}

	{# Conteúdo do corpo da notícia #}
	<div class="noticia-body content-constrained">
		{% include_block page.body %}
	</div>

</article>

{% block footer %}
{% include "enap_designsystem/includes/footer.html" %}
{% endblock %}

{# CSS inline alternativo se preferir #}
<style>

	.flex-creditos{
		display: flex;
		gap: 0.5rem;
		align-items: center;
	}

	.caption{
		font-style: italic;
		color: #666;
		margin: 0;
		margin-top: 0px;
	}

	.caption p{
		margin-top: 0px;
	}
	/* Garantia adicional para imagens no StreamField */
	.enap-noticia .noticia-body img {
		max-width: 1142px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		display: block !important;
	}

	.featured-image{
		max-width: 1142px !important;
		margin: 0 auto 2rem auto !important;
		display: block !important;
	}
	
	/* Para blocos de imagem específicos do Wagtail */
	.enap-noticia .rich-text img,
	.enap-noticia [data-block-type="image"] img {
		max-width: 1142px !important;
		width: 100% !important;
		height: auto !important;
		margin: 2rem auto !important;
		display: block !important;
	}
</style>
{% endblock %}