{% 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>
        * {
            box-sizing: border-box;
        }
        .parent > div {
            padding:20px;
        }
        .parent {
            overflow: hidden;
            position: relative;
            width: 100%;
            margin-top: -30px;
        }

        .child-left {
            width: 50%;
        }
        .child-1 {
            width: 33%;
        }
        .child-2 {
            width: 33%;
        }
        .child-3 {
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            width: 33%;
        }

        .child-right {
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
        }
        h5{
            text-align: center;
            margin: auto 0;
            color: #0082C3;
        }
        a .bi{
            color: #EC6607;
            float: right;
        }
        .row{
            display: flex;
        }
        .col {
            flex: 1; /* additionally, equal width */

            padding: 1em;
            border: solid;
        }
        .btn-validation{
            background-color: #FFE728;
            border: none;
        }
        .ck-editor__editable[role="textbox"] {
            /* editing area */
            min-height: 300px;
        }

        #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 %}
{% include 'navbar.html.twig' %}
<section style="background-color: #eee;" class="mx-auto">
    <div class="col-lg-8" style="display: inline-block; float: left">
         <div class="mx-auto col-lg-6" 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;CREATION D'UNE OFFRE D'EMPLOI
        </div>
        <div class="row py-3">
            <div class="col-lg-10 card py-3 mx-auto" style="margin-left: 0px;">
                <div class="card-body">
                    {{ form_start(form) }}
                    <div class="">
                        <div class="row">
                            <div class="col-lg-4" style="color:#EC6607;">
                                {{form_label(form.titre)}}
                            </div>
                            <br>
                            <div class="col-lg-8">
                                {{ form_widget(form.titre) }}
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-lg-4" style="color:#EC6607;">
                                {{form_label(form.contenu)}}
                            </div>
                            <div class="col-lg-8">
                                {{ form_widget(form.contenu) }}
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-lg-4" style="color:#EC6607;">
                                {{form_label(form.service)}}
                            </div>
                            <div class="col-lg-8">
                                {{ form_widget(form.service) }}
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-lg-4" style="color:#EC6607;">
                                {{form_label(form.image)}}
                            </div>
                            <div class="col-lg-8">
                                {{ form_widget(form.image) }}
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-lg-8">
                                {{ form_row(form.Enregistrer) }}
                                <div id="spinner" class="spinner-border text-primary" role="status">
                                    <p style="color: #0a58ca" class="sr-only">Chargement...</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4" style="float: left; display: inline-block;">
        <div class="mx-auto col-lg-12" 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;OFFRES D'EMPLOI DANS DECATHLON
        </div>
        <div class="row">
            {% for offreEmploi in offres_emploi %}
                <div class="col-lg-12 col-sm-12 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="https://cdn.ckeditor.com/ckeditor5/35.3.2/classic/ckeditor.js"></script>
<script src="{{ asset('assets/vendor/purecounter/purecounter_vanilla.js') }}"></script>
<script src="{{ asset('assets/vendor/aos/aos.js') }}"></script>
<script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('assets/vendor/glightbox/js/glightbox.min.js') }}"></script>
<script src="{{ asset('assets/vendor/isotope-layout/isotope.pkgd.min.js') }}"></script>
<script src="{{ asset('assets/vendor/swiper/swiper-bundle.min.js') }}"></script>
<script src="{{ asset('assets/vendor/php-email-form/validate.js') }}"></script>
<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>
<!-- Template Main JS File -->
<script src="{{ asset('assets/js/main.js') }}"></script>
<script>
    ClassicEditor
        .create( document.querySelector( '.ckeditor' ) )
        .then( editor => {
            theEditor = editor;
        } )
        .catch( error => {
            console.error( error );
        } );

    document.getElementById("news_submit").addEventListener("click", function() {
        theEditor.updateSourceElement();
    });
    alert(document.getElementsByClassName('ck-placeholder')[0].innerHTML);
</script>