{% 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>

	{# Subtítulo (antes era caption) #}
	{% if page.subtitulo %}
		<div class="content-constrained">
			<h2 class="noticia-subtitulo">{{ page.subtitulo }}</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 externa (nova) - prioridade sobre featured_image #}
	{% if page.imagem_externa %}
		{% image page.imagem_externa original as img %}
		<div class="imagem-externa content-constrained">
			<img class="noticia-imagem-principal" src="{{ img.url }}" alt="{{ page.title }}">
		</div>
	{% endif %}

	{# Imagem destacada via StreamField - só exibe se não houver imagem_externa #}
	{% if page.featured_image and not page.imagem_externa %}
		{% 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 %}
	{% if page.footer %}
		{% include "enap_designsystem/blocks/footer/footer_block.html" with footer=page.footer %}
	{% else %}
		{% include "enap_designsystem/includes/footer.html" %}
	{% endif %}
{% endblock %}



<style>
	/* ========================================
	   IMAGENS RESPONSIVAS - 90VW MAX
	======================================== */

	/* Créditos da imagem */
	.flex-creditos {
		display: flex;
		gap: 0.5rem;
		align-items: center;
		justify-content: left;
		margin-bottom: 0.5rem;
		font-size: 0.85rem;
		color: #666;
	}

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

	.caption p {
		margin-top: 0px;
	}

	/* ========================================
	   IMAGENS PRINCIPAIS - RESPONSIVAS
	======================================== */

	/* Imagem Externa */
	.imagem-externa {
		margin: 2rem auto;
		text-align: center;
		max-width: 90vw;
	}

	.noticia-imagem-principal {
		width: 100%;
		max-width: min(1142px, 90vw);
		height: auto;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease;
		display: block;
		margin: 0 auto;
	}

	.noticia-imagem-principal:hover {
		transform: scale(1.02);
	}

	/* Featured Image (StreamField) */
	.featured-image {
		max-width: min(1142px, 90vw);
		margin: 0 auto 2rem auto !important;
		display: block !important;
		text-align: center;
	}

	.featured-image img {
		width: 100%;
		max-width: min(1142px, 90vw);
		height: auto;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		display: block;
		margin: 0 auto;
	}

	/* ========================================
	   IMAGENS NO STREAMFIELD BODY
	======================================== */

	/* Todas as imagens no corpo da notícia */
	.enap-noticia .noticia-body img {
		max-width: min(1142px, 90vw) !important;
		width: 100% !important;
		height: auto !important;
		margin: 2rem auto !important;
		display: block !important;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	/* Para blocos de imagem específicos do Wagtail */
	.enap-noticia .rich-text img,
	.enap-noticia [data-block-type="image"] img {
		max-width: min(1142px, 90vw) !important;
		width: 100% !important;
		height: auto !important;
		margin: 2rem auto !important;
		display: block !important;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	/* ========================================
	   RESPONSIVIDADE PARA IMAGENS
	======================================== */

	/* Tablets */
	@media (max-width: 768px) {
		.imagem-externa,
		.featured-image {
			max-width: 95vw;
			margin: 1.5rem auto;
		}

		.noticia-imagem-principal,
		.featured-image img,
		.enap-noticia .noticia-body img,
		.enap-noticia .rich-text img,
		.enap-noticia [data-block-type="image"] img {
			max-width: 95vw !important;
		}

		.flex-creditos {
			justify-content: flex-start;
		}
	}

	/* Mobile */
	@media (max-width: 480px) {
		.imagem-externa,
		.featured-image {
			max-width: 98vw;
			margin: 1rem auto;
		}

		.noticia-imagem-principal,
		.featured-image img,
		.enap-noticia .noticia-body img,
		.enap-noticia .rich-text img,
		.enap-noticia [data-block-type="image"] img {
			max-width: 98vw !important;
			border-radius: 4px;
		}

		.flex-creditos {
			font-size: 0.8rem;
			margin-bottom: 0.3rem;
		}
	}

	/* ========================================
	   MELHORIAS DE ACESSIBILIDADE
	======================================== */

	/* Redução de movimento */
	@media (prefers-reduced-motion: reduce) {
		.noticia-imagem-principal {
			transition: none;
		}

		.noticia-imagem-principal:hover {
			transform: none;
		}
	}
</style>
{% endblock %}