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

{% block title %}Steve Krack{% endblock %}

{% block stylesheets %}

{# Favicons #}
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('assets/img/logo/m.png')}}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('assets/img/logo/m.png')}}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('assets/img/logo/m.png')}}">
<link rel="shortcut icon" type="image/x-icon" href="{{ asset('assets/img/logo/m.png')}}">
<link rel="manifest" href="{{ asset('assets/img/favicons/manifest.json')}}">

{# lib #}
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
<link href="{{ asset('assets/lib/loaders.css/loaders.min.css')}}" rel="stylesheet">
<!-- <link
    href="https://fonts.googleapis.com/css?family=PT+Mono%7cPT+Serif:400,400i%7cEpitet:100,300,400,700,800,900"
    rel="stylesheet"> -->
<!-- <link href="{{ asset('assets/lib/remodal/remodal.css')}}" rel="stylesheet">
<link href="{{ asset('assets/lib/remodal/remodal-default-theme.css')}}" rel="stylesheet"> -->
<link href="{{ asset('assets/lib/owl.carousel/owl.carousel.css')}}" rel="stylesheet">
<link href="{{ asset('assets/lib/lightbox2/css/lightbox.css')}}" rel="stylesheet">
<link href="{{ asset('assets/lib/semantic-ui-accordion/accordion.min.css')}}" rel="stylesheet">
<link href="{{ asset('assets/lib/semantic-ui-transition/transition.min.css')}}" rel="stylesheet">




{# CSS Global #}
<link href="{{ asset('assets/css/theme.css') }}" rel="stylesheet" type="text/css" media="all" />

{% endblock %}

{% block header %}

{% include 'App/headerSideEdit.html.twig' %}

{% endblock %}

{% block body %}

{% include 'App/subHeader.html.twig' %}

<div class="col pl-0 pt-3">
    <span class="breadcrumb-item">
        <a class="nav-side text-muted font-weight-light pl-0" href="{{ path("dashboard") }}">&nbspTableau de
            bord&nbsp</a>
        <i class="fas fa-chevron-right"></i>
        <span class="nav-side font-weight-normal pl-0">
            {{project.label}}
        </span>
    </span>
</div>

<header class="pt-3 pb-4">
    <h3>Modification du projet</h3>
</header>
<div class=" bg-white">
    {{ form_start(projectEditForm)}}
    <div class="form-group mb-0">

        <div class="row justify-content-center align-items-center">


            <div class="col-md-6">

                {{ form_row(projectEditForm.label)}}

            </div>
            <div class="col-md-6">

                {{ form_row(projectEditForm.location)}}

            </div>

        </div>
        <div class="row justify-content-center align-items-center">

            <div class="col-md-6">

                {{ form_row(projectEditForm.intro)}}

            </div>
            <div class="col-md-6">

                {{ form_row(projectEditForm.url)}}

            </div>


        </div>
        <div class="row justify-content-center align-items-center">


                    <div class="col-12">

                      {{ form_row(projectEditForm.description)}}

                    </div>


                  </div>

        <div class="row justify-content-center align-items-center">


            <div class="col-12">

                {{ form_row(projectEditForm.description)}}

            </div>


        </div>

        <div class="row justify-content-center align-items-center pt-4">


            <div class="col-md-6 ">
                <div class=" p-3" style="box-shadow: 0 0 2rem 0 rgba(0,0,0,.05);">
                    {{ form_row(projectEditForm.photo1) }}

                    <img class="mt-3 " src="{{asset('assets/img/projects/' ~ project.photo1)}}" style="height:85px">

                </div>

            </div>
            <div class="col-md-6">
                <div class=" p-3" style="box-shadow: 0 0 2rem 0 rgba(0,0,0,.05);">

                    {{ form_row(projectEditForm.photo2)}}

                    <img class="mt-3 " src="{{asset('assets/img/projects/' ~ project.photo2)}}" style="height:85px">
                </div>

            </div>

        </div>
        <div class="row justify-content-center align-items-center pt-4">
            <div class="col-md-6">

                <div class=" p-3" style="box-shadow: 0 0 2rem 0 rgba(0,0,0,.05);">

                    {{ form_row(projectEditForm.photo3)}}

                    <img class="mt-3 " src="{{asset('assets/img/projects/' ~ project.photo3)}}" style="height:85px">
                </div>
            </div>
            <div class="col-md-6">
                <div class=" p-3" style="box-shadow: 0 0 2rem 0 rgba(0,0,0,.05);">

                    {{ form_row(projectEditForm.photo4)}}
                    {% if project.photo4 is not empty %}
                    <img class="mt-3 " src="{{asset('assets/img/projects/' ~ project.photo4)}}" style="height:85px">
                    {% endif %}
                </div>
            </div>

        </div>

        <div class="row justify-content-left align-items-center pt-4">


            <div class="col-md-6">
                <div class=" p-3" style="box-shadow: 0 0 2rem 0 rgba(0,0,0,.05);">

                    {{ form_row(projectEditForm.photo5)}}
                    {% if project.photo5 is not empty %}

                    <img class="mt-3  " src="{{asset('assets/img/projects/' ~ project.photo5)}}" style="height:85px">

                    {% endif %}
                </div>
            </div>
            <div class="col-md-6"></div>
        </div>

        <div class="row justify-content-left align-items-center pt-4"
            data-prototype="{{ form_widget(projectEditForm.addedPictures.vars.prototype)|e('html_attr') }}"
            id='addedPictures_list'>


            {% for addedPicture in projectEditForm.addedPictures.children %}

            <div class="col-6 mt-3">
                <div class=" p-3" style="box-shadow: 0 0 2rem 0 rgba(0,0,0,.05);">


                    {# {{ form_row(addedPicture)}} #}

                    {{ form_label(addedPicture) }}
                    {{ form_widget(addedPicture) }}
                    {{ form_widget(addedPicture) }}
                    <img class="mt-3 mb-3 d-block "
                        src="{{asset('assets/img/projects/' ~ addedPicture.vars.value.name)}}" style="height:85px">

                </div>
            </div>
            {% endfor %}

        </div>

    </div>



    <div class="modal-footer">

        <div class="col pl-0 pt-3 mb-6 text-right">
            <span class="breadcrumb-item ">
                <a class="nav-side text-muted font-weight-light pl-0" href="{{ path("dashboard") }}">Retour tableau
                    de
                    bord&nbsp</a>
                <a class="btn btn-danger" data-toggle="modal" data-target="#delete_modal">Supprimer</a>

            </span>
        </div>




        {{ form_row(projectEditForm.submit)}}
        {{ form_end(projectEditForm)}}

    </div>



    <form class="modal fade" id="delete_modal" tabindex="-1" role="dialog" aria-labelledby="delete_reminder_modal"
        aria-hidden="true" method='POST'>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">

                    <i class="fal fa-times" data-dismiss="modal" style="color:#0B2E2D;"></i>
                </div>
                <div class="modal-body" style="width:400px;margin:auto;">
                    <div class="form-group mb-0">
                        <div class="row no-gutters">
                            <div class="col text-center">
                                <i class="fal fa-hand-paper fs-1 fs-3 py-3 text-danger"></i>
                            </div>
                        </div>
                        <div class="row no-gutters">
                            <div class="col text-center py-3">
                                <h5 class="modal-title lead">Voulez-vous vraiment supprimer le projet? Le processus
                                    ne
                                    peut pas être
                                    défait. </h5>
                            </div>

                        </div>
                        <div class="row no-gutters py-4">
                            <div class="col-6 pr-1">

                                <a class="btn btn-secondary text-white btn-block mt-2" data-dismiss="modal"
                                    style="padding-top: 1.2rem;padding-bottom: 1.2rem;">
                                    <span class="mb-0">Cancel</span>
                                </a>
                            </div>
                            <div class="col-6 pl-1">
                                <a class="btn btn-danger btn-sm btn-block text-white mt-2"
                                    style="padding-top: 1.2rem;padding-bottom: 1.2rem;"
                                    href="{{ path('deleteProject', {'id': project.id }) }}">

                                    Supprimer

                                    {# {{ form(graduateUserInviteForm)}} #}
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </form>

    {% endblock %}

    {% block footer %}

    {% endblock %}

    {% block javascripts %}



    {# Jquery #}
    <!-- <script src="{{ asset('assets/js/jquery.min.js')}}" async></script> -->
    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <!-- cdnjs -->
    {# <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.min.js"
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.plugins.min.js"
        crossorigin="anonymous"></script> #}



    <script src="https://kit.fontawesome.com/528623a9de.js" crossorigin="anonymous"></script>


    <script src="{{ asset('assets/js/popper.min.js')}}"></script>
    <script src="{{ asset('assets/js/bootstrap.js')}}"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD14GRtbNv-6U9nSRZcDZTAnLgCP57Il5w"
        type="text/javascript"></script>

    {# JS Lib #}
    <script src="{{ asset('assets/lib/loaders.css/loaders.css.js')}}"></script>
    <script src="{{ asset('assets/lib/remodal/remodal.js')}}"></script>
    <script src="{{ asset('assets/lib/owl.carousel/owl.carousel.js')}}"></script>
    <script src="{{ asset('assets/lib/lightbox2/js/lightbox.js')}}"></script>
    <script src="{{ asset('assets/lib/isotope-layout/isotope.pkgd.min.js')}}"></script>
    <script src="{{ asset('assets/lib/isotope-packery/packery-mode.pkgd.min.js')}}"></script>

    {# JS Plugins #}
    <script src="{{ asset('assets/js/list.min.js') }}"></script>
    <script src="{{ asset('assets/js/autosize.min.js') }}"></script>


    <script src="{{ asset('assets/js/stickyfill.min.js')}}"></script>
    <script src="{{ asset('assets/js/rellax.min.js')}}"></script>
    <script src="{{ asset('assets/js/progressbar.min.js')}}"></script>
    <script src="{{ asset('assets/js/imagesloaded.pkgd.js')}}"></script>
    <script src="{{ asset('assets/js/CustomEase.js')}}"></script>
    <script src="{{ asset('assets/js/DrawSVGPlugin.js')}}"></script>
    <script src="{{ asset('assets/js/fontawesome-all.js')}}"></script>
    <script src="{{ asset('assets/js/ScrollToPlugin.js')}}"></script>
    <script src="{{ asset('assets/js/TweenMax.js')}}"></script>
    <script src="{{ asset('assets/js/jquery.lazy.min.js')}}"></script>
    <script src="{{ asset('assets/js/jquery.lazy.plugins.js')}}"></script>

    <script src="{{ asset('assets/js/map.js')}}"></script>
    {# <script src="{{ asset('assets/js/map.min.js')}}"></script> #}
    <script src="{{ asset('assets/lib/semantic-ui-accordion/accordion.min.js')}}"></script>
    <script src="{{ asset('assets/lib/semantic-ui-transition/transition.min.js')}}"></script>


    {# JS global #}
    <script src="{{ asset('assets/js/theme.js')}}" async></script>





    {# <script>
        document.getElementById("client_form_logo").required = false;
    </script> #}

    <script src="{{ asset('assets/js/a2lix_sf_collection.min.js') }}"></script>

    <script type="text/javascript">
        a2lix_lib.sfCollection.init({
            collectionsSelector: 'form div[data-prototype]',
            manageRemoveEntry: true
        })
    </script>


    {% endblock %}