{% extends "base.html" %}
{% load static %}

{% block title %}{{ job.title }} — Carrières Jool International{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/careers.css' %}">
{% endblock %}

{% block content %}
<div class="job-detail-hero">
  <div class="job-detail-breadcrumb">
    <a href="{% url 'careers:job_list' %}">Carrières</a> &rsaquo; {{ job.title }}
  </div>
  <h1 class="job-detail-title">{{ job.title }}</h1>
  <div class="job-detail-tags">
    <span class="job-tag"><span class="material-icons-round">work</span> {{ job.get_contract_type_display }}</span>
    <span class="job-tag"><span class="material-icons-round">location_on</span> {{ job.location }}</span>
    <span class="job-tag"><span class="material-icons-round">category</span> {{ job.get_department_display }}</span>
    {% if job.is_remote %}<span class="job-tag"><span class="material-icons-round">wifi</span> Télétravail possible</span>{% endif %}
    {% if job.salary_range %}<span class="job-tag"><span class="material-icons-round">payments</span> {{ job.salary_range }}</span>{% endif %}
  </div>
  {% if job.is_open %}
  <a href="{% url 'careers:apply' slug=job.slug %}" class="btn-apply-lg">
    <span class="material-icons-round">send</span> Postuler maintenant
  </a>
  {% else %}
  <div class="job-closed-banner">
    <span class="material-icons-round">info</span>
    Cette offre n'accepte plus de candidatures.
  </div>
  {% endif %}
</div>

<div class="job-detail-body">
  {% if job.application_deadline %}
  <p style="color:#888;font-size:13px;margin-bottom:32px;">
    <span class="material-icons-round" style="font-size:15px;vertical-align:middle;">event</span>
    Date limite : {{ job.application_deadline|date:"d/m/Y" }}
  </p>
  {% endif %}

  <div class="job-section-title">Description du poste</div>
  <div>{{ job.description|linebreaks }}</div>

  <div class="job-section-title">Compétences requises</div>
  <div>{{ job.requirements|linebreaks }}</div>

  {% if job.nice_to_have %}
  <div class="job-section-title">Compétences souhaitées</div>
  <div>{{ job.nice_to_have|linebreaks }}</div>
  {% endif %}

  {% if job.is_open %}
  <div style="margin-top:48px;padding-top:32px;border-top:1px solid var(--gray);text-align:center;">
    <p style="color:#555;margin-bottom:20px;">Ce poste vous correspond ? Envoyez votre candidature dès maintenant.</p>
    <a href="{% url 'careers:apply' slug=job.slug %}" class="btn-apply-lg">
      <span class="material-icons-round">send</span> Postuler
    </a>
  </div>
  {% endif %}
</div>
{% endblock %}