{% extends "enap_designsystem/base.html" %}
{% load wagtailcore_tags wagtailimages_tags %}
{% load static %}
{% block metadata %}
    {% comment %} <meta name="viewport" content="width=device-width, initial-scale=1.0"> {% endcomment %}
{% endblock %}

{% block title %}
    <title>{{ page.page_title }}</title>
{% endblock %}

{%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="#">Comunica BR</a>
            <div class="separator"></div>
            <a href="#">Acesso à informação</a>
            <div class="separator"></div>
            <a href="#">Participe</a>
            <div class="separator"></div>
            <a href="#">Legislação</a>
            <div class="separator"></div>
            <a href="#">Ó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 %}
    {% else %}
        <p style="color: red;">DEBUG: Nenhuma Navbar foi definida.</p>
    {% endif %}
{% endblock %}

{% block content %}
<div class="job-vacancy-detail">
    <!-- Conteúdo Principal (Lado Esquerdo) -->
    <div class="main-content">
        <!-- Título principal -->
        <h1>{{ page.title }}</h1>
        
        <!-- Subtítulo com data -->
        <p class="job-subtitle">{{ registration_period }}</p>
        
        <!-- Tag ENAP -->
        <div class="tag-container">
            <span class="enap-tag">ENAP</span>
        </div>
        
        <!-- Botões de compartilhamento -->
        <div class="share-label">Compartilhe:</div>
        <div class="share-buttons">
            <button class="share-btn whatsapp" onclick="shareToWhatsApp()" title="Compartilhar no WhatsApp">
                <i class="fab fa-whatsapp"></i>
            </button>
            <button class="share-btn facebook" onclick="shareToFacebook()" title="Compartilhar no Facebook">
                <i class="fab fa-facebook-f"></i>
            </button>
            <button class="share-btn twitter" onclick="shareToTwitter()" title="Compartilhar no Twitter">
                <i class="fab fa-twitter"></i>
            </button>
            <button class="share-btn linkedin" onclick="shareToLinkedIn()" title="Compartilhar no LinkedIn">
                <i class="fab fa-linkedin-in"></i>
            </button>
        </div>
        
        <!-- Descrição principal -->
        <div class="job-description">
            {{ page.full_description|richtext }}
            
            {% if page.inscription_link %}
                <a href="{{ page.inscription_link }}" class="highlight-link" target="_blank">{{ page.inscription_link }}</a>
            </p>
            {% endif %}
        </div>
        
        <!-- Informações adicionais -->
        {% if page.additional_info %}
        <div class="additional-info">
            {{ page.additional_info|richtext }}
        </div>
        {% endif %}
    </div>
    
    <!-- Sidebar (Lado Direito) -->
    <div class="job-sidebar">
        {% if page.process_code %}
        <div class="sidebar-item">
            <h3>Código do processo:</h3>
            <p>{{ page.process_code }}</p>
        </div>
        {% endif %}
        
        <div class="sidebar-item">
            <h3 class="period">Periodo</h3>
            <p>{{ registration_period }}</p>
        </div>
        
        {% if page.inscription_link %}
        <div class="sidebar-item">
            <h3 class="registration"></h3>
            <a href="{{ page.inscription_link }}" class="ins primary" target="_blank">
                {{ page.link_text }} <i class="fa-solid fa-circle-chevron-right"></i>
            </a>
        </div>
        {% endif %}
        
        {% if page.download_files %}
            <div class="sidebar-item">
                <h3 class="downloads">Arquivos para download:</h3>
                <div class="download-content">
                    {{ page.download_files|richtext }}
                </div>
            </div>
            {% endif %}
    </div>
</div>

<script>
    const pageTitle = '{{ page.title|escapejs }}';
    const pageUrl = window.location.href;
    
    function shareToWhatsApp() {
        const text = encodeURIComponent(`${pageTitle} - ${pageUrl}`);
        window.open(`https://wa.me/?text=${text}`, '_blank');
    }
    
    function shareToFacebook() {
        const url = encodeURIComponent(pageUrl);
        window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank', 'width=600,height=400');
    }
    
    function shareToTwitter() {
        const text = encodeURIComponent(pageTitle);
        const url = encodeURIComponent(pageUrl);
        window.open(`https://twitter.com/intent/tweet?text=${text}&url=${url}`, '_blank', 'width=600,height=400');
    }
    
    function shareToLinkedIn() {
        const url = encodeURIComponent(pageUrl);
        const title = encodeURIComponent(pageTitle);
        window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}&title=${title}`, '_blank', 'width=600,height=400');
    }
    
    // Função de fallback para compartilhamento nativo
    function shareJob() {
        if (navigator.share) {
            navigator.share({
                title: pageTitle,
                url: pageUrl
            }).catch(console.error);
        } else {
            // Fallback para copiar link
            navigator.clipboard.writeText(pageUrl).then(() => {
                alert('Link copiado para a área de transferência!');
            });
        }
    }
</script>

{% endblock %}

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