{% block head %}
    <title>Sidebar 07</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="{{ asset('assets/sidebare/css/style.css') }}">
{% endblock %}

{% block stylesheets %}
    <style>
        body{
            margin-top:50px;
            background:#eee;
        }

        /*panel*/
        .panel {
            border: none;
            box-shadow: none;
        }

        .panel-heading {
            border-color:#eff2f7 ;
            font-size: 16px;
            font-weight: 300;
        }

        .panel-title {
            color: #2A3542;
            font-size: 14px;
            font-weight: 400;
            margin-bottom: 0;
            margin-top: 0;
            font-family: 'Open Sans', sans-serif;
        }

        /*product list*/

        .prod-cat li a{
            border-bottom: 1px dashed #d9d9d9;
        }

        .prod-cat li a {
            color: #3b3b3b;
        }

        .prod-cat li ul {
            margin-left: 30px;
        }

        .prod-cat li ul li a{
            border-bottom:none;
        }
        .prod-cat li ul li a:hover,.prod-cat li ul li a:focus, .prod-cat li ul li.active a , .prod-cat li a:hover,.prod-cat li a:focus, .prod-cat li a.active{
            background: none;
            color: #ff7261;
        }

        .pro-lab{
            margin-right: 20px;
            font-weight: normal;
        }

        .pro-sort {
            padding-right: 20px;
            float: left;
        }

        .pro-page-list {
            margin: 5px 0 0 0;
        }

        .product-list img{
            width: 100%;
            border-radius: 4px 4px 0 0;
            -webkit-border-radius: 4px 4px 0 0;
        }

        .product-list .pro-img-box {
            position: relative;
        }
        .adtocart {
            background: #fc5959;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            color: #fff;
            display: inline-block;
            text-align: center;
            border: 3px solid #fff;
            left: 45%;
            bottom: -25px;
            position: absolute;
        }

        .adtocart i{
            color: #fff;
            font-size: 25px;
            line-height: 42px;
        }

        .pro-title {
            color: #5A5A5A;
            display: inline-block;
            margin-top: 20px;
            font-size: 16px;
        }

        .product-list .price {
            color:#fc5959 ;
            font-size: 15px;
        }

        .pro-img-details {
            margin-left: -15px;
        }

        .pro-img-details img {
            width: 100%;
        }

        .pro-d-title {
            font-size: 16px;
            margin-top: 0;
            color: #166BC0;
        }

        .product_meta {
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            padding: 10px 0;
            margin: 15px 0;
        }

        .product_meta span {
            display: block;
            margin-bottom: 10px;
        }
        .product_meta a, .pro-price{
            color:#fc5959 ;
        }

        .pro-price, .amount-old {
            font-size: 18px;
            padding: 0 10px;
        }

        .amount-old {
            text-decoration: line-through;
        }

        .quantity {
            width: 120px;
        }

        .pro-img-list {
            margin: 10px 0 0 -15px;
            width: 100%;
            display: inline-block;
        }

        .pro-img-list a {
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .pro-d-head {
            font-size: 18px;
            font-weight: 300;
        }
        .bootdey{
            margin-top: 25px;
        }
        span{
            font-size: 15px;
        }
        .certified {
            margin-top: 10px
        }

        .certified ul {
            padding-left: 0
        }

        .certified ul li:not(first-child) {
            margin-left: -3px
        }

        .certified ul li {
            display: inline-block;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 13px 19px
        }

        .certified ul li:first-child {
            border-right: none
        }

        .certified ul li a {
            text-align: left;
            font-size: 12px;
            color: #6d7a83;
            line-height: 16px;
            text-decoration: none
        }

        .certified ul li a span {
            display: block;
            color: #21c2f8;
            font-size: 13px;
            font-weight: 700;
            text-align: center
        }
        .pro-d-title {
            color: #21c2f8;
            display: inline-block;
            margin-top: 20px;
            font-size: 20px;
        }
    </style>
{% endblock %}

{% block body %}
    {% include 'navbar.html.twig' %}
        <!-- Page Content  -->
    <div class="container bootdey">
        <div class="col-md-12">
            <section class="panel">
                <div class="row">
                    <div class="col-lg-6 row">
                        <div class="pro-img-details">
                            <div>
                                <img src="{{ asset(offreEmploi.image) }}" alt="Image Offre d'emploi" style="width: 500px; height: 600px">
                            </div>
                            {% if (role == 1) %}
                                <div class="mt-3 mb-3" style="height: 300px; overflow: auto">
                                    <nav class="navbar navbar-light bg-nav">
                                        <span class="navbar-brand mb-0 h1" style="color: white">Liste des candidatures pour cette offre</span>
                                    </nav>
                                    {% for candidature in candidatures %}
                                        <div class="mb-2">
                                            <div style="background-color: #EEE8E8" class="media box-shadow-only-hover hover-top border-all-1 border-color-gray p-15px">
                                                <a class="overlay-link"></a>
                                                <div class="p-20px-l media-body">
                                                    <span class="m-5px-tb">{{ candidature.user.prenom }}&nbsp;{{ candidature.user.nom }}</span>
                                                    <span class="m-0px font-small text-info">{{ candidature.date | date('d-m-Y')}}</span>
                                                    <a class="btn btn-success"
                                                       style="font-size: 10px; float: right"
                                                       href="{{ path('acces_cv_candidat', {'id': candidature.id})}}">
                                                        Voir CV
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                    {% for candidature in candidatures %}
                                        <div class="mb-2">
                                            <div style="background-color: #EEE8E8" class="media box-shadow-only-hover hover-top border-all-1 border-color-gray p-15px">
                                                <a class="overlay-link"></a>
                                                <div class="p-20px-l media-body">
                                                    <span class="m-5px-tb">{{ candidature.user.prenom }}&nbsp;{{ candidature.user.nom }}</span>
                                                    <span class="m-0px font-small text-info">{{ candidature.date | date('d-m-Y')}}</span>
                                                    <a class="btn btn-success"
                                                       style="font-size: 10px; float: right"
                                                       href="{{ path('acces_cv_candidat', {'id': candidature.id})}}">
                                                        Voir CV
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                    {% for candidature in candidatures %}
                                        <div class="mb-2">
                                            <div style="background-color: #EEE8E8" class="media box-shadow-only-hover hover-top border-all-1 border-color-gray p-15px">
                                                <a class="overlay-link"></a>
                                                <div class="p-20px-l media-body">
                                                    <span class="m-5px-tb">{{ candidature.user.prenom }}&nbsp;{{ candidature.user.nom }}</span>
                                                    <span class="m-0px font-small text-info">{{ candidature.date | date('d-m-Y')}}</span>
                                                    <a class="btn btn-success"
                                                       style="font-size: 10px; float: right"
                                                       href="{{ path('acces_cv_candidat', {'id': candidature.id})}}">
                                                        Voir CV
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                    {% for candidature in candidatures %}
                                        <div class="mb-2">
                                            <div style="background-color: #EEE8E8" class="media box-shadow-only-hover hover-top border-all-1 border-color-gray p-15px">
                                                <a class="overlay-link"></a>
                                                <div class="p-20px-l media-body">
                                                    <span class="m-5px-tb">{{ candidature.user.prenom }}&nbsp;{{ candidature.user.nom }}</span>
                                                    <span class="m-0px font-small text-info">{{ candidature.date | date('d-m-Y')}}</span>
                                                    <a class="btn btn-success"
                                                       style="font-size: 10px; float: right"
                                                       href="{{ path('acces_cv_candidat', {'id': candidature.id})}}">
                                                        Voir CV
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <nav class="navbar navbar-light bg-nav">
                            <span class="navbar-brand mb-0 h1" style="color: white">{{ offreEmploi.titre }}</span>
                        </nav>
                        <div style="font-size: 20px; margin-top: 20px; text-align: justify;">
                            <h4 class="pro-d-title">
                                Description de l'Offre d'Emploi
                            </h4><br>
                            {{ offreEmploi.contenu | raw }}
                        </div>
                        <div class="certified">
                            <ul>
                                <li>
                                    <a href="javascript:void(0);">Service(s)<span>{{ offreEmploi.service.nom }}</span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);">Statut de l'offre:
                                        {% if ( offreEmploi.statutOE.libelle  == "ouvert") %}
                                            <span style="color: #166BC0">
                                                {{ offreEmploi.statutOE.libelle }}
                                            </span>
                                        {%endif%}
                                        {% if ( offreEmploi.statutOE.libelle  == "ferme") %}
                                            <span style="color: #FB9687">
                                                {{ offreEmploi.statutOE.libelle }}
                                            </span>
                                        {%endif%}
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <p>
                            {% if (postuler == 'nonpostule' and role < 2) %}
                                <a href="{{ path('acces_postuler', {'id': offreEmploi.id})}}" class="btn btn-round btn-success" type="button">
                                    <i class="fa fa-envelope-open"></i>
                                    Je postule à cette offre
                                </a>
                            {% endif %}
                            {% if (postuler == 'postule' and role < 2 )%}
                                <a class="btn btn-round btn-warning" type="button">
                                    <i class="fa fa-check"></i>
                                    Vous avez déja postulé à cette offre !
                                </a>
                            {% endif %}
                        </p>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <hr>
    <div class="col-lg-6 mx-auto">
        <div style="padding: 10px 0px; background-color: #166BC0; color: #FFFFFF; text-align: center; font-size: 18px;">
                            <span class="glyphicon glyphicon-bullhorn" style="margin: 0px 10px 0px 0px; color: #fff; ">
                            </span>&nbsp;D'autres offres d'emploi
        </div>
        <div class="pro-img-list text-center">
            {% for oE in offres_emploi %}
                <a href="{{ path('acces_job_offline', {'id': oE.id})}}" style="text-align: center; margin-left: 25px;">
                    <figure>
                        <img src="{{ oE.image }}" alt="" style="width: 150px; height: 140px;">
                        <figcaption style="font-size: 10px;">{{ oE.titre }}</figcaption>
                    </figure>
                </a>
            {% endfor %}
        </div>
    </div>

    <script src="{{ asset('assets/sidebare/js/jquery.min.js') }}"></script>
    <script src="{{ asset('assets/sidebare/js/popper.js') }}"></script>
    <script src="{{ asset('assets/sidebare/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('assets/sidebare/js/main.js') }}"></script>
    <script src="{{ asset('assets/js/main.js') }}"></script>
    <script src="{{ asset('assets/js/offre_emploi.js') }}"></script>
{% endblock %}