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

{% block title %}Postuler — {{ job.title }} — Jool International{% endblock %}

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

{% block content %}
<div class="apply-wrapper">
  <a href="{{ job.get_absolute_url }}" class="apply-job-ref">
    <span class="material-icons-round">arrow_back</span> {{ job.title }}
  </a>
  <h1 class="apply-title">Votre candidature</h1>
  <p class="apply-subtitle">Complétez le formulaire ci-dessous. Tous les champs marqués d'un * sont obligatoires.</p>

  <form method="post" enctype="multipart/form-data" novalidate>
    {% csrf_token %}

    <div class="form-row">
      <div class="form-group">
        <label class="form-label required" for="{{ form.first_name.id_for_label }}">{{ form.first_name.label }}</label>
        {{ form.first_name }}
        {% if form.first_name.errors %}
          {% for error in form.first_name.errors %}<p class="form-error">{{ error }}</p>{% endfor %}
        {% endif %}
      </div>
      <div class="form-group">
        <label class="form-label required" for="{{ form.last_name.id_for_label }}">{{ form.last_name.label }}</label>
        {{ form.last_name }}
        {% if form.last_name.errors %}
          {% for error in form.last_name.errors %}<p class="form-error">{{ error }}</p>{% endfor %}
        {% endif %}
      </div>
    </div>

    <div class="form-row">
      <div class="form-group">
        <label class="form-label required" for="{{ form.email.id_for_label }}">{{ form.email.label }}</label>
        {{ form.email }}
        {% if form.email.errors %}
          {% for error in form.email.errors %}<p class="form-error">{{ error }}</p>{% endfor %}
        {% endif %}
      </div>
      <div class="form-group">
        <label class="form-label" for="{{ form.phone.id_for_label }}">{{ form.phone.label }}</label>
        {{ form.phone }}
      </div>
    </div>

    <div class="form-group">
      <label class="form-label" for="{{ form.linkedin_url.id_for_label }}">{{ form.linkedin_url.label }}</label>
      {{ form.linkedin_url }}
    </div>

    <div class="form-group">
      <label class="form-label required" for="{{ form.cover_letter.id_for_label }}">{{ form.cover_letter.label }}</label>
      {{ form.cover_letter }}
      {% if form.cover_letter.errors %}
        {% for error in form.cover_letter.errors %}<p class="form-error">{{ error }}</p>{% endfor %}
      {% endif %}
    </div>

    <div class="form-group">
      <label class="form-label required" for="{{ form.cv_file.id_for_label }}">{{ form.cv_file.label }}</label>
      {{ form.cv_file }}
      <p class="form-help">{{ form.cv_file.help_text }}</p>
      {% if form.cv_file.errors %}
        {% for error in form.cv_file.errors %}<p class="form-error">{{ error }}</p>{% endfor %}
      {% endif %}
    </div>

    <div class="form-group">
      <label class="form-label" for="{{ form.portfolio_url.id_for_label }}">{{ form.portfolio_url.label }}</label>
      {{ form.portfolio_url }}
    </div>

    {% if form.non_field_errors %}
    <div style="background:#fff3cd;border:1px solid #ffc107;color:#856404;padding:14px 18px;border-radius:12px;margin-bottom:20px;">
      {% for error in form.non_field_errors %}<p>{{ error }}</p>{% endfor %}
    </div>
    {% endif %}

    <button type="submit" class="btn-submit">
      <span class="material-icons-round">send</span> Envoyer ma candidature
    </button>
  </form>
</div>
{% endblock %}