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


{# ========================================
	META TAGS OPEN GRAPH PARA COMPARTILHAMENTO
======================================== #}
{% block extra_head %}
    {# Open Graph básico #}
    <meta property="og:title" content="{{ page.title }}">
    <meta property="og:type" content="article">
    <meta property="og:url" content="{{ request.build_absolute_uri }}">
    <meta property="og:site_name" content="Enap">
    
    {# Descrição/Subtítulo #}
    {% if page.subtitulo %}
        <meta property="og:description" content="{{ page.subtitulo|striptags|truncatewords:25 }}">
    {% elif page.search_description %}
        <meta property="og:description" content="{{ page.search_description }}">
    {% else %}
        <meta property="og:description" content="{{ page.title }}">
    {% endif %}
    
    {# Imagem para compartilhamento #}
    {% if page.featured_image %}
        {% for block in page.featured_image %}
            {% if block.block_type == "image" and block.value.image %}
                {% image block.value.image width-1200 as og_image %}
                <meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{{ og_image.url }}">
                <meta property="og:image:width" content="{{ og_image.width }}">
                <meta property="og:image:height" content="{{ og_image.height }}">
                <meta property="og:image:alt" content="{{ block.value.caption|default:page.title }}">
                {% comment %}Usando apenas a primeira imagem encontrada{% endcomment %}
            {% endif %}
        {% endfor %}
    {% else %}
        {# Imagem padrão caso não tenha featured_image #}
        <meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{% static 'enap_designsystem/blocks/suap/default_1.png' %}">
        <meta property="og:image:width" content="1200">
        <meta property="og:image:height" content="630">
        <meta property="og:image:alt" content="{{ page.title }}">
    {% endif %}
    
    {# Meta tags específicas para artigos #}
    <meta property="article:published_time" content="{{ page.date_display|date:'c'|default:page.first_published_at|date:'c' }}">
    {% if page.author %}
        <meta property="article:author" content="{{ page.author.get_full_name|default:page.author.username }}">
    {% elif page.author_display %}
        <meta property="article:author" content="{{ page.author_display }}">
    {% endif %}
    
    {# Twitter Cards #}
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ page.title }}">
    {% if page.subtitulo %}
        <meta name="twitter:description" content="{{ page.subtitulo|striptags|truncatewords:25 }}">
    {% elif page.search_description %}
        <meta name="twitter:description" content="{{ page.search_description }}">
    {% else %}
        <meta name="twitter:description" content="{{ page.title }}">
    {% endif %}
    
    {# WhatsApp específico #}
    <meta property="og:locale" content="pt_BR">
    
    {# Meta tags tradicionais #}
    {% if page.subtitulo %}
        <meta name="description" content="{{ page.subtitulo|striptags|truncatewords:25 }}">
    {% elif page.search_description %}
        <meta name="description" content="{{ page.search_description }}">
    {% endif %}
{% endblock %}


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

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

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

	<div class="wrapper-compartilhar">
	{# 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>

	<div class="compartilhar">
		<h3>Compartilhe:</h3>
		<div class="social-buttons">
			<a href="https://api.whatsapp.com/send?text={{ page.title|urlencode }} - {{ request.build_absolute_uri }}" target="_blank" class="social-btn whatsapp" title="Compartilhar no WhatsApp">
				<i class="fab fa-whatsapp"></i>
			</a>
			<a href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri }}" target="_blank" class="social-btn facebook" title="Compartilhar no Facebook">
				<i class="fab fa-facebook-f"></i>
			</a>
			<a href="https://twitter.com/intent/tweet?text={{ page.title|urlencode }}&url={{ request.build_absolute_uri }}" target="_blank" class="social-btn twitter" title="Compartilhar no Twitter">
				<i class="fab fa-twitter"></i>
			</a>
			<a href="https://www.linkedin.com/sharing/share-offsite/?url={{ request.build_absolute_uri }}" target="_blank" class="social-btn linkedin" title="Compartilhar no LinkedIn">
				<i class="fab fa-linkedin-in"></i>
			</a>
		</div>
	</div>
	</div>


{# Imagem destacada via StreamField #}
{% if page.featured_image %}
    {% for block in page.featured_image %}
        {% if block.block_type == "image" and block.value.image %}
		{% if block.value.caption %}
                    <div class="flex-creditos">
                        <i class="fa-solid fa-camera"></i>
                        <div class="caption">{{ block.value.caption }}</div>
                    </div>
                {% endif %}
            {% image block.value.image original as img %}
            <div class="featured-image-container content-constrained">
                <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>






<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;
		width: 100%;
	}

	.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;
		min-height: 300px;
		display: block !important;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		margin: 0;
		margin-bottom: 10px;
	}

	/* 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;
			margin: 0;
			margin-bottom: 10px;
		}

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

	/* Mobile */
	@media (max-width: 480px) {
		.imagem-externa,
		.featured-image {
			max-width: 87vw;
			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: 87vw !important;
			border-radius: 4px;
			margin: 0;
			margin-bottom: 10px;
		}

		.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 %}

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