{% load wagtailcore_tags wagtailimages_tags %}
{% load static %}

{% block content %}
<a href="{{ job.url }}" class="job-card">
    <!-- Corpo do card -->
    <div class="card-content">

        <!-- Título -->
        <h3 class="card-title-job">{{ job.title }}</h3>

        <!-- Descrição -->
        <p class="card-description">
            {{ job.description|richtext|striptags|truncatewords:15 }}
        </p>

        <!-- Informações -->
        <div class="card-info">
            {% if job.registration_start %}
                <div class="info-item">
                    <i class="fa-solid fa-calendar"></i>
                    <span>{{ job.registration_start|date:"d/m/Y" }}</span>
                </div>
            {% endif %}

        </div>

        <!-- Botões de ação -->
        <div class="card-actions">
            <span class="btn secondary">
                Saiba mais
                <i class="fa-solid fa-circle-chevron-right"></i>
            </span>
        </div>
    </div>
</a>
<style>
.job-card {
    background: white;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border: 1px solid #C8D1E0;
}

.job-card:hover {
    color: #006969;
    background-color: #EBEFF5;
    border: 1px solid #C8D1E0;
}

.card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: left;
}

.card-title-job {
    font-size: 18px;
    font-weight: 600;
    color: #434A54;
    line-height: 1.3;
    margin: 0 0 12px 0;
    text-align: left;
}

.card-description {
    font-size: 15px;
    color: #666666;
    line-height: 1.6;
    margin: 0 0 16px 0;
    text-align: left;
}

.card-info {
    margin-bottom: 16px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 14px;
    color: #666666;
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-item i {
    color: #888888;
    flex-shrink: 0;
}

.card-actions {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    align-items: center;
}
</style>

<!-- JavaScript para compartilhamento (se necessário) -->
<script>
function shareJob(button) {
    const url = button.getAttribute('data-url');
    const title = button.getAttribute('data-title');
    
    if (navigator.share) {
        navigator.share({
            title: title,
            text: `Confira esta oportunidade: ${title}`,
            url: url
        }).catch(console.error);
    } else {
        navigator.clipboard.writeText(url).then(() => {
            alert('Link copiado para a área de transferência!');
        }).catch(() => {
            alert('Link: ' + url);
        });
    }
}
</script>
{% endblock %}