{% 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>
        #content{
            float: left;
            display: inline-block;
            width: 70%;
        }
        #menuCandidat{
            float: left;
            display: inline-block;
            margin-left: 2%;
            width: 27%;
        }
        .bg-nav{
            background-color: #0082C3;
        }
        .logo {
            overflow: hidden;
            padding: 16px 30px 12px 30px;
            background: #FFE728;
        }

        .logo h1 {
            font-size: 15px;
            padding: 0;
            line-height: 1;
            font-weight: 700;
            font-family: "Poppins", sans-serif;
        }

        .logo h1 a,
        .logo h1 a:hover {
            color: #000000;
            text-decoration: none;
        }

        .logo img {
            padding: 0;
            margin: 0;
            max-height: 40px;
        }
        .btn-logout{
            font-size: 10px;
            background-color: #FF3C33;
            color: white;
        }
        th{
            width: 80%;
        }
        body{margin-top:20px;}
        .p-15px {
            padding: 15px;
        }
        .border-color-gray {
            border-color: #f2f3fa;
        }
        .border-all-1 {
            border: 1px solid;
        }
        .hover-top {
            position: relative;
            top: 0;
        }
        .m-15px-tb {
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .overlay-link {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            border: 0;
        }
        .border-radius-50 {
            border-radius: 50%;
        }
        .icon-50 {
            width: 50px;
            height: 50px;
            text-align: center;
            font-size: 21px;
        }
        .white-color {
            color: #ffffff;
        }
        .theme-bg {
            background-color: #0050d8;
        }
        .icon-50 i.number {
            font-style: normal;
        }
        .icon-50 i {
            line-height: 50px;
        }
        .p-20px-l {
            padding-left: 20px;
        }
        .p-10px-lr {
            padding-left: 10px;
            padding-right: 10px;
        }
        .p-0px-tb {
            padding-top: 0px;
            padding-bottom: 0px;
        }
        .border-radius-15 {
            border-radius: 15px;
        }
        .white-color {
            color: #ffffff;
        }
        .theme2nd-bg {
            background-color: #53d267;
        }
        .m-0px {
            margin: 0px;
        }
        .font-small {
            font-size: .75rem;
            line-height: 1rem;
        }

        .green-bg-alt {
            background-color: rgba(17, 226, 121, 0.1);
        }

        .green-bg {
            background-color: #11e279;
        }

        .green-after:after {
            background-color: #11e279;
        }

        .green-before:before {
            background-color: #11e279;
        }

        .green-color-alt {
            color: rgba(17, 226, 121, 0.65);
        }

        .green-color {
            color: #11e279;
        }

        .blue-bg-alt {
            background-color: rgba(21, 178, 236, 0.1);
        }

        .blue-bg {
            background-color: #15b2ec;
        }

        .blue-after:after {
            background-color: #15b2ec;
        }

        .blue-before:before {
            background-color: #15b2ec;
        }

        .blue-color-alt {
            color: rgba(21, 178, 236, 0.65);
        }

        .blue-color {
            color: #15b2ec;
        }

        .pink-bg-alt {
            background-color: rgba(241, 38, 153, 0.1);
        }

        .pink-bg {
            background-color: #f12699;
        }

        .pink-after:after {
            background-color: #f12699;
        }

        .pink-before:before {
            background-color: #f12699;
        }

        .pink-color-alt {
            color: rgba(241, 38, 153, 0.65);
        }

        .pink-color {
            color: #f12699;
        }

        .body-bg-alt {
            background-color: rgba(113, 128, 150, 0.1);
        }

        .body-bg {
            background-color: #718096;
        }

        .body-after:after {
            background-color: #718096;
        }

        .body-before:before {
            background-color: #718096;
        }

        .body-color-alt {
            color: rgba(113, 128, 150, 0.65);
        }

        .body-color {
            color: #718096;
        }

        .white-color-light {
            color: rgba(255, 255, 255, 0.65);
        }

        .bg-transparent {
            background-color: transparent;
        }

        .theme-g-bg {
            background: linear-gradient(to right, #0050d8, #002a72);
        }

        .dark-g-bg {
            background: linear-gradient(50deg, #273444 0, #272b44 100%);
        }
        .yellow-bg {
            background-color: #ffbe3d;
        }
        .border-radius-50 {
            border-radius: 50%;
        }
        .icon-50 {
            width: 50px;
            height: 50px;
            text-align: center;
            font-size: 21px;
        }

        .box-shadow-only-hover:hover {
            box-shadow: 0 1.5rem 4rem rgba(22, 28, 45, 0.1);
        }
        .border-color-gray {
            border-color: #f2f3fa !important;
        }
        .border-all-1 {
            border: 1px solid;
        }
    </style>
{% endblock %}

{% block body %}
    {% include 'navbar.html.twig' %}
    <section class="section">
        <div class="container">
            <div class="row md-m-25px-b m-45px-b justify-content-center text-center">
                <div style="padding: 10px 0px; background-color: #166BC0; color: #FFFFFF; width: 80%; text-align: center; font-size: 18px;">
                    <span class="glyphicon glyphicon-bullhorn" style="margin: 0px 10px 0px 0px; color: #fff; ">
                    </span>&nbsp;Les offres d'emplois de Decathlon
                </div>
            </div>
            <div class="row">
                {% for offreEmploi in offres_emploi %}
                    <div class="col-sm-6 col-lg-6 m-15px-tb">
                        <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" href="{{ path('acces_job', {'id': offreEmploi.id})}}"></a>
                            <div class="icon-50 white-color border-radius-50 d-inline-block" style="background-color: #FFE728; color: black">
                                <i class="number">LD</i>
                            </div>
                            <div class="p-20px-l media-body">
                                {% if ( offreEmploi.statutOE.libelle  == "ouvert") %}
                                    <span class="white-color p-0px-tb p-10px-lr font-small border-radius-15"
                                          style="background-color: #81FAA0">
                                        {{ offreEmploi.statutOE.libelle }}
                                    </span>
                                {%endif%}
                                {% if ( offreEmploi.statutOE.libelle == "ferme")%}
                                    <span class="white-color p-0px-tb p-10px-lr font-small border-radius-15"
                                          style="background-color: #FB9687">
                                        {{ offreEmploi.statutOE.libelle }}
                                    </span>
                                {%endif%}
                                {% if ( offreEmploi.statutOE.libelle  == "pourvu")%}
                                    <span class="white-color p-0px-tb p-10px-lr font-small border-radius-15"
                                          style="background-color: #87FBF4">
                                        {{ offreEmploi.statutOE.libelle }}
                                    </span>
                                {%endif%}

                                <h6 class="m-5px-tb">{{ offreEmploi.titre }}</h6>
                                <p class="m-0px font-small text-info">{{ offreEmploi.service.nom }}</p>
                            </div>
                        </div>
                    </div>
                {% endfor %}

                <div class="col-12 p-25px-t text-center">
                    <a class="m-btn m-btn-radius m-btn-theme" href="#">Load More</a>
                </div>
            </div>
        </div>
    </section>
    <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>
{% endblock %}