{% extends 'reseau/main.html' %}

{% load static %}

{% load i18n %}

{% block content %}


<div class="col-lg-12 p-3">
    <div class="box-element remplacant_card">
        <div >Mission {{mission.referenceNumber}} - 
            {% if mission.worker == None %}
                <span class="badge bg-danger p-2">Non pourvue</span> 
            {% else %} 
                <span class="badge bg-success p-2">Pourvue</span> 
            {% endif %}
        </div>
        <hr>
        <div >
            <p><strong>1. Type de mission</strong></p> 
            <span>{{mission.type}} - 
                {% if mission.isExpress %} 
                    Express 
                {% else %} 
                    Standard 
                {% endif %}
            </span>
        </div>
        <hr>
        <div >
            <p><strong>2. Etablissement et service</strong></p> 
            <p>{{mission.structure}}</p>
            <p>Service : {{mission.service}}</p>
        </div>
        <hr>
        <div >
            <p><strong>3. Date et horaires de la mission</strong></p> 
            <!-- start : {{mission.start}}</div>
        <div >finish : {{mission.finish}}</div> -->
        {% language 'fr' %}
            Le {{mission.start|date:'l d F Y' }} de {{mission.start|date:'H:i' }} à {{mission.finish|date:'H:i' }}
            <p>
                Durée effectivement travaillée : {{durationWorkFormatted}}
            </p>
            
        {% endlanguage %}
        <hr>
        <div >
            <p><strong>4. Profil recherché</strong></p> 
            {{mission.profil}}</div>
        <hr>
        <div >
            <p><strong>5. Motif (non visible par les remplaçants)</strong></p> 
            <p>{{mission.motif}}</p>
        <hr>
        <!-- <div>
            <p><strong>6. Destinataires de la mission</strong></p> 
            <a class="btn btn-danger">A COMPLETER !!!</a>
        </div>
        <hr>
        <div >
            <p><strong>7. Détails</strong></p> 
            <span class="mx-1">Pas de details</span><a class="btn btn-danger"> A DYNAMISER !!!</a>
        </div>
        <hr> -->
        <div>
            <p><strong>6. Remplaçant</strong></p> 

 

            {% if mission.worker == None and mission.candidates.count == 0 %}
                <div class="btn btn-info">En attente de candidat</div>
            {% elif mission.worker == None and mission.candidates.count == 1 %}
                <!-- <div class="btn btn-warning">{{mission.candidates.count}} candidat.e</div> -->
                <div class="align-middle px-3 py-2 fs-6 fw-normal text-dark badge rounded-pill bg-warning">{{mission.candidates.count}} candidat.e</div>
            {% elif mission.worker == None and mission.candidates.count > 1 %}
                <div class="btn btn-warning">{{mission.candidates.count}} candidat.es</div>
                <!-- <ul>
                    <li class="btn-outline-danger">Alerté(s) : Nombre</>
                    <li class="btn-outline-danger">Refus : Nombre</>
                    <li class="btn-outline-danger">Candidature(s) : Nombre</> 
                </ul> -->
            {% else %}
                <div class="container">
                    <div class="row  p-3 rounded bg-info">
                    <div class="col-2 d-flex justify-content-center align-items-center">
                        <img src="{{mission.worker.profile_pic.url}}" alt="Profile Picture of The Worker" style="max-height: 65px;" class=" rounded-circle border border-white border-5">
                    </div>
                    <div class="col-10 text-white">
                        <p class="fw-bold mb-1">{{mission.worker.user.first_name}} {{mission.worker.user.last_name}}</p>
                        <p class="mb-1">Mission attribuée le {{mission.assigned|date:'d F Y'}} à {{mission.assigned|date:'H:i'}}</p>
                        <!-- {{mission.start|date:'l d F Y' }} de {{mission.start|date:'H:i' }} à {{mission.finish|date:'H:i' }} -->
                        <p class="mb-1">Téléphone : {{mission.worker.phone}}</p>
                    </div>
                    </div>
                </div>            
                <!-- <p>{{mission.worker}}</p>
                <p>{{mission.worker.phone}}</p> -->
            {% endif %}
        </div>

        <hr>
        <div >
            <p><strong>7. Personne remplaçée</strong></p> 
            <p>{{mission.replacedLastName}} {{mission.replacedFirstName|upper}}</p>      
        </div>

        <hr>

        <a class="btn btn-outline-info" href="{{request.META.HTTP_REFERER}}">Retour</a>
        <a class="btn btn-primary disabled" href="#">Valider</a>
        <a class="btn btn-primary" href=" {% url 'update-mission' mission.id %}">Modifier</a>
        <a class="btn btn-warning" href=" {% url 'appliers-mission' mission.id %}">Candidats</a>
        <a class="btn btn-outline-danger" href=" {% url 'home' %}">Annuler</a>
        <a class="btn btn-danger" href=" {% url 'delete-mission' mission.id %}">Supprimer</a>

        <a class="mx-4 px-4 btn btn-success" href=" {% url 'apply-mission' mission.id %}">Envoyer ma candidature</a> 
        <a class="mx-4 px-4 btn btn-outline-success" href=" {% url 'unapply-mission' mission.id %}">Annuler ma candidature</a> 




    </div>
</div>
</div>


{% endblock content %}