{% extends 'base.html.twig' %}

{% block title %}Log in!{% 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 %}
    <div class="container bootdey">
        <div class="col-md-12">
            <section class="panel">
                <div class="row">
                    <div class="col-lg-5">
                        <div class="pro-img-details">
                            <img src="{{ asset(offreEmploi.image) }}" alt="Image Offre d'emploi" style="width: 500px; height: 600px">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <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;{{ offreEmploi.titre }}
                        </div>
                        <h4 class="pro-d-title">
                            Description de l'Offre d'Emploi
                        </h4>
                        <div style="font-size: 20px; margin-top: 20px; text-align: justify;">
                            {{ 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>
                            <a href="{{ path('acces_postuler', {'id': offreEmploi.id})}}" class="btn btn-round btn-success" type="button"><i class="fa fa-shopping-cart"></i> Je postule à cette offre</a>
                        </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>
{% endblock %}