{% load static %}
<div class="cvtheque">
    {% if not cv.count %}
      <div class="no-cv">
        <p>Vous n'avez pas encore transmis votre curriculum vitae.</p>
        <p>Complétez ce formulaire :</p>
        <a class="pk-button cv-button" href="{{ eservices_url }}imio-candidature-spontanee-liaison-fiche/">
            Formulaire de dépôt de CV
        </a>
      </div>
    {% else %}
      {% if not cv_expiration.count %}
        <div class="cv-existing">
            <p>Vous avez déjà transmis votre CV.</p>
            <p>Vous pouvez le modifier en cliquant sur ce bouton :</p>
            <a class="pk-button cv-button" href="{{ eservices_url }}imio-modification-cv/">
                Modifier mon CV
            </a>
        </div>
      {% else %}
          <div class="cv-existing cv-expiration">
            <p>Votre CV est sur le point d'expirer, pour le prolonger vous pouvez :</p>
            <div class="cv-modification">
                <p>Modifiez votre CV en cliquant sur ce bouton :</p>
                <a class="pk-button cv-button" href="{{ eservices_url }}imio-modification-cv/" target="_blank">
                    Modifier mon CV
                </a>
            </div>
            <div class="cv-validation">
                <p>Prolongez votre CV en cliquant sur ce bouton :</p>
                <a class="pk-button cv-button" href="{{ eservices_url }}imio-projet-rh-actions-cv/?cv={{ cv_expiration.data.0.id }}&action=prolongation_cv">
                    Prolonger mon CV
                </a>
            </div>
            <p>Ces deux actions prolongeront la validité de votre CV d'un an.</p>
          </div>
      {% endif %}
    {% endif %}
</div>

<div class="cv-candidature">
    <h2>Gestion de vos candidatures</h2>
    {% if json %}
    {% if not json.data %}
    <div class="no-candidature">
        <p>Aucune candidature n'a été trouvée.</p>
    </div>
    {% else %}
    <div class="candidature-list">
        {% for candidature in json.data %}
        {% with status=candidature.workflow.status.name %}
        <div class="candidature-item">
            <h3 class="emploi">{{ candidature.fields.emploi }}</h3>
            <p>Date de candidature : <span class="date-candidature">{{ candidature.fields.date_candidature|date:"d/m/Y" }}</span></p>
            <p>Statut : <span class="status">{{ status }}{% if candidature.workflow.fields.epreuve_en_cours %} {{ candidature.workflow.fields.epreuve_en_cours }}{% endif %}</span></p>
            <div class="candidature-actions">
                {% with url_form=eservices_url|add:"imio-projet-rh-changement-de-statut/" %}
                {% if epreuves.count %}
                {% for epreuve in epreuves.data %}
                {% if epreuve.id == candidature.workflow.fields.id_fiche_epreuve_en_cours %}
                {% with url_form_agenda=epreuve.fields.lien_formulaire_inscription %}
                <a href="{% if not url_form_agenda %}{{ url_form }}?dossier={{ epreuve.id }}&action=accept_test_by_guichet{% else %}{{ url_form_agenda }}?dossier={{ epreuve.id }}{% endif %}" title="{% if not url_form_agenda %}Accepter l'invitation à l'épreuve{% else %}Réserver un créneau pour l'épreuve{% endif %}" class="pk-button cv-button">{% if not url_form_agenda %}Accepter{% else %}Réserver{% endif %}</a>
                {% endwith %}
                <a href="{{ url_form }}?dossier={{ epreuve.id }}&action=deny_test_by_guichet" title="Refuser l'intégration dans la CVThèque" class="pk-button cv-button cancel-button">Refuser</a>
                {% endif %}
                {% endfor %}
                {% elif status == "Proposition CVThèque" %}
                <a href="{{ url_form }}?dossier={{ candidature.id }}&action=accept_cvtheque_by_guichet" title="Accepter l'intégration dans la CVThèque" class="pk-button cv-button">Accepter</a>
                <a href="{{ url_form }}?dossier={{ candidature.id }}&action=reject_cvtheque_by_guichet" title="Refuser l'intégration dans la CVThèque" class="pk-button cv-button cancel-button">Refuser</a>
                {% else %}
                <div class="no-action">
                    <p>Pas d'action disponible</p>
                </div>
                {% endif %}
                {% endwith %}
            </div>
        </div>
        {% endwith %}
        {% endfor %}
    </div>
    {% endif %}
    {% else %}
    <div class="pk-error">
        <p>Un problème au niveau du serveur est survenu. Merci d'actualiser cette page <span>dans quelques minutes</span>.
        </p>
    </div>
    {% endif %}
</div>
<style>
    span {
        font-weight: bold;
    }

    .cvtheque {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .cvtheque .no-cv,
    .cvtheque .cv-existing {
      background-color: #fff;
      border: 1px solid #ddd;
      padding: 20px;
      border-radius: 12px;
      font-size: 15px;
      line-height: 1.6;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .cvtheque .cv-existing.cv-expiration {
      border-left: 6px solid #f39c12;
      background-color: #fff9f0;
    }

    .cvtheque .cv-button {
      display: inline-block;
      margin-top: 12px;
      text-decoration: none;
      border: none;
      font-size: 14px;
    }

    .cvtheque .cv-modification,
    .cvtheque .cv-validation {
      margin-top: 16px;
    }

    .cvtheque .cv-validation {
      margin-bottom: 12px;
    }

    .cv-candidature, .cvtheque {
        max-width: 800px;
        margin: 40px auto;
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: #333;
    }

    .cv-candidature h2 {
        text-align: center;
        margin-bottom: 30px;
        color: #2c3e50;
        font-size: 28px;
    }

    .no-candidature,
    .pk-error {
        text-align: center;
        padding: 20px;
        background-color: #ffe5e5;
        border: 1px solid #ffcccc;
        border-radius: 12px;
        color: #b30000;
        font-weight: bold;
    }

    .candidature-list {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .candidature-item {
        background-color: #ffffff;
        border: 1px solid #ddd;
        padding: 20px;
        border-radius: 12px;
        transition: box-shadow 0.3s ease;
    }

    .candidature-item:hover {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    }

    .candidature-item h3 {
        margin-top: 0;
        font-size: 20px;
        color: #34495e;
    }

    .candidature-item p {
        margin: 8px 0;
        font-size: 15px;
    }

    .candidature-actions {
        margin-top: 16px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
        justify-content: left;
        gap: 12px;
    }

    .candidature-actions .cv-button, 
    .cvtheque .cv-button {
        padding: 12px;
        border-radius: 8px;
        font-weight: bold;
    }

    .candidature-actions .cancel-button {
        mix-blend-mode: luminosity;
    }

    .no-action {
        background-color: #f1f1f1;
        padding: 12px;
        border-radius: 8px;
        font-style: italic;
        color: #888;
    }
</style>