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

{% block pagewrapper %}
{{ form_start(form) }}
    <h1 class="page-title">
    {% if mode=="update" %}
    Modification Carrousel
    {% elseif mode=="submit" %}
    Création Carrousel
    {% endif %}
    </h1>

    <p>
    {{ form_widget(form.submit) }}
    <a class="btn btn-secondary" href="{{ path('app_portal_'~access~'_slide_list',{'idpage':idpage,'idwidget':idwidget,'usage':usage,'group':group}) }}">Annuler</a>

    {% if mode=="update" %}
    <a href={{ path('app_portal_'~access~'_slide_delete',{'idpage':idpage,'id':entity.id,'usage':usage,'group':group}) }}
        class="btn btn-danger float-end"
        data-method="delete" data-csrf="_token:{{ 'csrf' }}"
        data-confirm="Êtes-vous sûr de vouloir supprimer cet item ?">
          Supprimer
    </a>
    {% endif %}
    </p>

    {% if app.session.flashbag.has('error') %}
        <div class='alert alert-danger' style='margin: 5px 0px'>
            <strong>Erreur</strong><br>
            {% for flashMessage in app.session.flashbag.get('error') %}
                {{ flashMessage }}<br>
            {% endfor %}
        </div>
    {% endif %}

    {% if app.session.flashbag.has('notice') %}
        <div class='alert alert-info' style='margin: 5px 0px'>
            <strong>Information</strong><br>
            {% for flashMessage in app.session.flashbag.get('notice') %}
                {{ flashMessage }}<br>
            {% endfor %}
        </div>
    {% endif %}


    <div class="row clearfix">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-pencil-alt fa-fw"></i> Informations
                </div>

                <div class="card-body"> 
                    {{ form_row(form.title) }}
                    {{ form_row(form.subtitle) }}
                </div>
            </div>
        </div>


        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-pencil-alt fa-fw"></i> Détails
                </div>

                <div class="card-body"> 
                    {{ form_row(form.roworder) }}
                    {{ form_row(form.url) }}

                    <div class='alert alert-info' style='font-size: 80%;padding: 5px;margin-top: -10px;'>
                        le mot clé #login# sera remplacé par le login de l'utilisateur
                    </div>                    
                    {{ form_row(form.target) }}    
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-pencil-alt fa-fw"></i> Image
                </div>

                <div class="card-body">
                    <a class="btn btn-info" style="width:100%" data-bs-toggle="modal" data-bs-target="#mymodal" onClick="ModalLoad('mymodal','Image','{{ path('app_portal_'~access~'_slide_upload') }}');" title='Ajouter un Header'>Téléchargez une image</a>
                    <img id="slide_image_img" src="{{ (entity.image ? asset(entity.image) : '') }}" style="width:100%;margin:auto;display:block;">
                    {{ form_widget(form.image) }}
                </div>            
            </div>
        </div>
    </div>
{{ form_end(form) }}
{% endblock %}

{% block localjavascript %}
    $('#mymodal').on('hidden.bs.modal', function () {
        var imgSrc = $("#slide_image_img").attr('src');
        $("#slide_image_img").attr('src',imgSrc);
    }); 
{% endblock %}
