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

{% block body %}
{{ form_start(form) }}
    <h1 class="page-header">
    {% if mode=="update" or mode=="updatetemplate" %}
    Modification Widget
    {% elseif mode=="submit" or mode=="submittemplate"  %}
    Création Widget
    {% endif %}
    </h1>

    <p>
    {{ form_widget(form.submit) }}
    <a class="btn btn-secondary" href="{{ path('app_'~access~'_page_'~usage~'_view',{id:idpage}) }}">Annuler</a>
    </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">
        <div class="col col-8">
            <div class="card">
                <div class="card-header"><i class="fas fa-pencil-alt fa-fw"></i> Informations</div>
                <div id="col1" class="card-body">
                    {{ form_row(form.name) }}
                </div>
            </div>
        </div>

        <div class="col col-4">  
            <div class="card">
                <div class="card-header"><i class="fas fa-pencil-alt fa-fw"></i> Informations</div>
                <div class="card-body">
                    <div id="diviconsel" class="col-md-12 text-center mb-1 mt-1" style="height:140px; padding:20px; background-color: {{ entity.colorheaderback ? entity.colorheaderback : 'var(--colorbgbodydark)' }};">
                        {% if entity.icon.label %}
                            <img src="{{ path('app_minio_image',{file:entity.icon.label}) }}" height="100" />
                        {% endif %}
                    </div>

                    <div class="col-md-12" style="text-align:center;padding:0px">
                        {{ form_row(form.idicon) }}
                        <a class="btn btn-success btn-modal" data-modalid="mymodallarge" data-modaltitle="Icône" data-modalurl="{{ path('app_all_icon_select') }}" title='Selectionner un Icône'>Selectionner un Icône</a>
                        <a class="btn btn-danger" onClick="delIcon()" title='Détacher'>Détacher l'Icône</a>
                    </div>  
                </div>
            </div>
        </div>
        <div class="col col-12 mt-3">  
            <div class="card">
                <div class="card-header"><i class="fas fa-pencil-alt fa-fw"></i> Informations</div>
                <div class="card-body">    
                    <div class="row">
                        <div id="col2" class="col col-4">  
                            {{ form_row(form.autoajust) }}
                            {{ form_row(form.height) }}
                            {{ form_row(form.border) }}
                            {{ form_row(form.opened) }}
                        </div>  

                        <div id="col3" class="col col-4">  
                            {{ form_row(form.viewheader) }}
                            {{ form_row(form.colorheaderback) }}
                            {{ form_row(form.colorheaderfont) }}
                            {{ form_row(form.colorbodyback) }}
                            {{ form_row(form.colorbodyfont) }}
                        </div>  

                        <div id="col4" class="col col-4">  

                        </div>  

                        <div id="col5" class="col col-md-12" style="clear:both">  
                            {{ form_widget(form) }}
                        </div>  
                    </div>
                </div>
            </div>
        </div>
    </div>

{{ form_end(form) }}
{% endblock %}

{% block localscript %}
<script>
    $(document).ready(function() {
        $(".control-label").each(function( element ) {
            var loc = $(this).attr('loc');
            if (typeof loc !== typeof undefined && loc !== false) {
                $(this).parent().appendTo("#"+loc);
            }
        });

        $("#col2").children(".form-group").each(function( element ) {
            $(this).css("zoom","80%");
        });

        $("#col3").children(".form-group").each(function( element ) {
            $(this).css("zoom","80%");
        });        

        $("#col4").children(".form-group").each(function( element ) {
            $(this).css("zoom","80%");
        });     

        showhide();   
    });

    $("#pagewidget_colorheaderback").bind("change paste keyup", function() {
        $("#diviconsel").css("background-color",$(this).val()); 
    });
    $("#pagewidget_autoajust").change(function() {
        showhide();
    });
    $("#pagewidget_viewheader").change(function() {
        showhide();
    });

    function selIcon(idicon,url) {
        $("#pagewidget_idicon").val(idicon);
        $("#diviconsel img").remove();

        $("#diviconsel").append("<img src='"+url+"'>");
        $("#diviconsel img").attr("height","100px");
        $("#mymodallarge").modal("hide");        
    }

    function delIcon() {
        $("#diviconsel img").remove();
        $("#diviconsel").append("<img src='{{ path("app_minio_image",{file:entity.widget.icon.label}) }}'>");
        $("#diviconsel img").attr("height","100px");
        $("#pagewidget_idicon").val(null);
    }

    function showhide() {
        if($("#pagewidget_autoajust").val()==1) {
            $("#groupfield_pagewidget_height").hide();
        }
        else {
            $("#groupfield_pagewidget_height").show();
        }

        if($("#pagewidget_viewheader").val()==1) {
            $("#groupfield_pagewidget_colorheaderback").show();
            $("#groupfield_pagewidget_colorheaderfont").show();
            $("#groupfield_pagewidget_opened").show();
        }
        else {
            $("#groupfield_pagewidget_colorheaderback").hide();
            $("#groupfield_pagewidget_colorheaderfont").hide();
            $("#groupfield_pagewidget_opened").hide();
            $("#pagewidget_opened").val(1);
        }        
    }
</script>
{% endblock %}