{% load css_tags %}{% block_css 'enap_designsystem/blocks/job.css' %}
{% load wagtailcore_tags %}
{% load static %}
{% block content %}
<div class="job-vacancies-container">
    {% if open_jobs %}
    <div class="job-section">
        <h2 class="section-title">Vagas Abertas</h2>
        <div class="cards-grid">
            {% for job in open_jobs %}
                {% include "enap_designsystem/blocks/job-card-wrapper.html" with job=job %}
            {% endfor %}
        </div>
    </div>
    {% endif %}
    
    {% if in_progress_jobs %}
    <div class="job-section">
        <h2 class="section-title">Vagas em Andamento</h2>
        <div class="cards-grid">
            {% for job in in_progress_jobs %}
                {% include "enap_designsystem/blocks/job-card-wrapper.html" with job=job %}
            {% endfor %}
        </div>
    </div>
    {% endif %}
    
    {% if closed_jobs %}
    <div class="job-section">
        <h2 class="section-title">Vagas Encerradas</h2>
        <div class="cards-grid">
            {% for job in closed_jobs %}
                {% include "enap_designsystem/blocks/job-card-wrapper.html" with job=job %}
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>

<script>
function shareJob(button) {
    const url = button.getAttribute('data-url');
    
    if (navigator.share) {
        navigator.share({
            title: button.closest('.job-card-wrapper').querySelector('.h2-card').textContent,
            url: url
        }).catch(console.error);
    } else {
        // Fallback para navegadores que não suportam Web Share API
        navigator.clipboard.writeText(url).then(() => {
            const originalText = button.textContent;
            button.textContent = 'Link copiado!';
            setTimeout(() => {
                button.innerHTML = '<i class="icon-share"></i> Compartilhar';
            }, 2000);
        });
    }
}
</script>
{% endblock %}