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

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

    {{ form_widget(form.submit) }} 
    
    <a class="btn btn-secondary" href={{ path('app_config') }}>Annuler</a>

    {% if mode=="update" and not config.required %}
    <a  href="{{ path('app_config_delete',{'id':config.id}) }}"
        class="btn btn-danger float-right"
        data-method="delete"
        data-confirm="Êtes-vous sûr de vouloir supprimer cet entregistrement ?">
          Supprimer
    </a>
    {% endif %}

    <br><br>

    {% 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="card">
        <div class="card-header">
            <i class="fa fa-pencil-alt fa-fw"></i> Informations
        </div>

        <div class="card-body">
            {{ form_row(form.id) }}
            {{ form_row(form.value) }}
            {% if config.type=="logo" %}
                <div style="width:90px; margin:10px auto;">
                {% set color = "" %}
                {% if config.id=='logodark' %}
                    {% set color = app.session.get('colorbgbodydark') %}
                {% elseif config.id=='logolight' %}
                    {% set color = app.session.get('colorbgbodylight') %}
                {% endif %} 

                <img id="config_value_img" src="/{{ appAlias }}/uploads/logo/{{ config.value }}" style="background-color: {{color}}; width:90px;height:90px; margin:auto;display:block;">
                <a class="btn btn-info" style="width:90px" onClick="ModalLoad('extraLargeModal','Logo','{{ path('app_config_logo') }}');" title='Ajouter un Logo'>Modifier</a>
                </div>
            {% elseif config.type=="hero" %}
                <div style="margin:10px auto;">
                <img id="config_value_img" src="/{{ appAlias }}/uploads/hero/{{ config.value }}" style="width:100%;margin:auto;display:block;">
                <a class="btn btn-info" style="width:100%" onClick="ModalLoad('extraLargeModal','Carrousel','{{ path('app_crop01', {"type": "hero", "reportinput": "config_value" }) }}');" title='Ajouter une Bannière'>Modifier</a>
                </div>
            {% elseif config.type=="image" %}
                <div style="margin:10px auto;">
                <img id="config_value_img" src="/{{ appAlias }}/uploads/hero/{{ config.value }}" style="width:100%;margin:auto;display:block;">
                <a class="btn btn-info" style="width:100%" onClick="ModalLoad('extraLargeModal','Image','{{ path('app_crop01', {"type": "image", "reportinput": "config_value" }) }}');" title='Ajouter une Image'>Modifier</a>
                </div>
            {% endif %}            
            {{ form_row(form.help) }}
        </div>
    </div>    
{{ form_end(form) }}

{% endblock %}

{% block localjavascript %}
    $("#config_value_img").on('error', function(){
        var imgSrc = $(this).attr('src');
        if(imgSrc!="/{{appAlias}}/uploads/{{config.type}}/")
            $(this).attr('src',imgSrc);
    });
    $('#extraLargeModal').on('hidden.bs.modal', function () {
        var imgSrc = $("#config_value_img").attr('src');
        $("#config_value_img").attr('src',imgSrc);
    });     
{% endblock %}