{% extends 'base_horizontal.html.twig' %}
{% block title %}Projets | {{ parent() }}{% endblock %}
{% block meta %}
{{ parent() }}
<meta name='keywords' content='daip, projet, formation, recrutement, insertion, certification'/>
<meta name='description' content="Projets devellopés par la DAIP | Formation, Recrutement, Insertion, Certification"/>
<meta property="og:type" content="article" />
<meta property="og:url" content="{{ app.request.uri }}" />
<meta property="og:title" content="Projets devellopés par la DAIP | Formation, Recrutement, Insertion, Certification" />
<meta property="og:description" content="Projets devellopés par la DAIP | Formation, Recrutement, Insertion, Certification" />
{% endblock %}
{% block body %}
<h4>NOS PROJETS ET RECRUTEMENTS</h4>
<hr>
<div class='card border mt-3 d-none d-md-block'>
    <div class='card-body'>
        <div class='table-responsive'>
            <table class='table datatable'>
                <thead>
                    <tr>
                        <th></th>
                        <th>Statut</th>
                        <th></th>
                        <th>Partenaire(s)</th>
                        <th>Intitulé du projet</th>
                    </tr>
                </thead>
                <tbody>
                {% for projet in projets %}
                    {% if projet.active != 'MASQUE'  %}
                        <tr>
                            <td>{{ loop.index }}</td>
                            <td>
                                <span class='mb-1 badge border 
                                {% if (projet.active == 'OUVERT' or projet.active == 'ENTRETIEN' or projet.active == 'VISITE MEDICALE') %} text-success
                                {% elseif projet.active == 'EN ATTENTE'  %} text-warning
                                {% elseif projet.active == 'FERME'  %} text-secondary
                                {% else %}text-danger
                                {% endif %}'
                                >{{ projet.active }}</span>
                            </td>
                            <td class='text-wrap' style="width: 228px">
                                {% if projet.active == 'OUVERT' and projet.url != '#' %}
                                {% if projet.url is not null %}
                                    <a href='{{ projet.url }}' class='btn btn-inverse-warning btn-xs mb-1'><i class='fa fa-sign-in'></i> Postuler</a>
                                    {% if projet.communique != '' %}<a href='{{ dir_projet ~ projet.communique }}' class='btn btn-inverse-primary btn-xs mb-1' target='_blank'><i class='fa fa-file-text'></i> Communiqué</a>{% endif %}
                                {% endif %}
                                {% endif %}
                                {% if projet.urlresultat != '' %}
                                    {% if projet.active == 'ACHEVE' %}
                                        <a href='{{ projet.urlresultat }}' class='btn btn-inverse-success btn-xs mb-1' ><i class='fa fa-graduation-cap'></i> Résultats</a>
                                    {% else %}
                                        <a href='{{ projet.urlresultat }}' class='btn btn-inverse-success btn-xs mb-1' >Admissibilité</a>
                                    {% endif %}
                                {% endif %}
                                {% if projet.convocation != '' and projet.active == 'ENTRETIEN' %}<a href='{{ projet.convocation }}' class='btn btn-inverse-info btn-xs mb-1' ><i class='fa fa-print'></i> Convocation</a>{% endif %}
                                {% if projet.calendrier != '' %}<a href='{{ dir_projet ~ projet.calendrier }}' class='btn btn-inverse-primary btn-xs mb-1' target='_blank'><i class='fa fa-calendar'></i> Calendrier</a>{% endif %}
                                {% if projet.annonce != '' %}<a href='javascript:;' youtubeurl='{{ projet.annonce }}' class='btn btn-inverse-secondary btn-xs mb-1 video'><i class='fa fa-play-circle'></i> Annonce</a>{% endif %}
                                {% if projet.convention != '' %}<a href='javascript:;' youtubeurl='{{ projet.convention }}' class='btn btn-inverse-secondary btn-xs mb-1 video'><i class='fa fa-play-circle'></i> Convention</a>{% endif %}
                            </td>
                            <td class='text-center text-wrap' style="width: 150px">
                                <img class='border' src="{{ dir_projet ~ projet.image }}">
                                <div>{{ projet.entreprise }}</div>
                            </td>
                            <td class='text-wrap' style="width: 550px">{{ projet.description|raw }}</td>
                        </tr>
                    {% endif %}
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class='d-block d-md-none'>
    <div class='row'>
    {% for projet in projets %}
        {% if projet.active != 'MASQUE'  %}
            <div class='col-md-6'>
                <div class="card border mb-2">
                    <div class='card-header'>
                        <span class='badge border {% if (projet.active == 'OUVERT' or projet.active == 'ENTRETIEN DE SELECTION' or projet.active == 'VISITE MEDICALE') %}text-success{% elseif projet.active == 'EN ATTENTE'  %}text-secondary{% else %}text-danger{% endif %}'>{{ projet.active }}</span>
                    </div>
                    <div class="card-body">
                        <img src="{{ dir_projet ~ projet.image }}" class="d-block mx-auto border" style='max-width:90px'>
                        <h5 class="card-title mt-1 text-center">{{ projet.entreprise }}</h5>
                        <p class="card-text">{{ projet.description|raw }}</p>
                    </div>
                    <div class='card-footer'>
                        {% if projet.active == 'OUVERT' and projet.url != '#' %}
                        {% if projet.url is not null %}<a href='{{ projet.url }}' class='btn btn-inverse-warning btn-xs mb-1'><i class='fa fa-sign-in'></i> Postuler</a>{% endif %}
                        {% endif %}
                        {% if projet.urlresultat != '' %}<a href='{{ projet.urlresultat }}' class='btn btn-inverse-success btn-xs mb-1' ><i class='fa fa-graduation-cap'></i> Résultats</a>{% endif %}
                        {% if projet.convocation != '' %}<a href='{{ projet.convocation }}' class='btn btn-inverse-info btn-xs mb-1' ><i class='fa fa-print'></i> Convocation</a>{% endif %}
                        {% if projet.communique != '' %}<a href='{{ dir_projet ~ projet.communique }}' class='btn btn-inverse-primary btn-xs mb-1' target='_blank'><i class='fa fa-file-text'></i> Communiqué</a>{% endif %}
                        {% if projet.calendrier != '' %}<a href='{{ dir_projet ~ projet.calendrier }}' class='btn btn-inverse-primary btn-xs mb-1' target='_blank'><i class='fa fa-calendar'></i> Calendrier</a>{% endif %}
                        {% if projet.annonce != '' %}<a href='javascript:;' youtubeurl='{{ projet.annonce }}' class='btn btn-inverse-secondary btn-xs mb-1 video'><i class='fa fa-play-circle'></i> Annonce</a>{% endif %}
                        {% if projet.convention != '' %}<a href='javascript:;' youtubeurl='{{ projet.convention }}' class='btn btn-inverse-secondary btn-xs mb-1 video'><i class='fa fa-play-circle'></i> Convention</a>{% endif %}
                    </div>
                </div>
            </div>
        {% endif %}
    {% endfor %}
    </div>
</div>

<div class='modal fade' id='modal_video' tabindex='-1' aria-labelledby='video' aria-hidden='true'>
    <div class='modal-dialog modal-lg'>
        <div class='modal-content'>
            <div class='modal-body p-0'>
                <iframe id="player" style='width: 100%; height:400px' src="" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>
{% endblock %}


{% block javascripts %}
{{ parent() }}
<script>
    $( document ).ready(function() { 
        $('.video').click(function(){ 
            var videoURL = $(this).attr('youtubeurl');
            $('#player').prop('src',videoURL);
            $('#modal_video').modal('show');
        });
        
        $('#modal_video').on('hidden.bs.modal', function () {
            var videoURL = $('#player').prop('src');
            videoURL = videoURL.replace("&autoplay=1", "");
            $('#player').prop('src','');
            $('#player').prop('src',videoURL);
        });
    });
</script>
{% endblock %}