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

{% block body %}

{{ form_start(form) }}
    <h1 class="page-header">
    {% if mode=="update" %}
    Modification {{ (touser=='false' ? "Lien" : "Favori") }}
    {% elseif mode=="submit" %}
    Création {{ (touser=='false' ? "Lien" : "Favori") }}
    {% endif %}
    </h1>

    {{ form_widget(form.submit) }}
    <a class="btn btn-secondary" href="{{ path('app_'~access~'_page_'~usage~'_view',{id:idpage}) }}">Annuler</a>


    {% if mode=="update" %}
    <a href={{ path('app_'~access~'_bookmark_delete',{'id':entity.id,'idpage':idpage,'idwidget':idwidget,'touser':touser,usage:usage}) }}
        class="btn btn-danger float-end"
        data-method="delete" data-csrf="_token:{{ 'csrf' }}"
        data-confirm="Êtes-vous sûr de vouloir supprimer ce favoris ?">
          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="row clearfix">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-pencil-alt fa-fw"></i> Informations
                </div>

                <div class="card-body">        
                    {{ form_row(form.title) }}
                    {{ form_row(form.subtitle) }}
                    {{ form_row(form.url) }}
                    <em>le mot clé #login# sera remplacé par le login de l'utilisateur</em><br>
                    {{ form_row(form.target) }}  
                </div>
            </div>
        </div>


        <div class="col-md-4">
              <div class="card">
                <div class="card-header">
                    <i class="fas fa-glasses fa-fw"></i> Appararence
                </div>

                <div class="card-body">      
                    {{ form_row(form.color) }}
                    <div id="diviconsel" class="col-md-12 text-center mb-1 mt-1" style="height:140px; padding:20px; background-color: {{ entity.color ? entity.color : 'var(--colorbgbodydark)' }};">
                        {% if entity.icon %}
                            <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>  
{{ form_end(form) }}
{% endblock %}

{% block localscript %}
<script>
    $('document').ready(function(){
        showhide();
    });

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



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

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

    function delIcon() {
        $("#diviconsel img").remove();
        $("#bookmark_idicon").val(null);
    }

    function showhide() {
        $("#divhelp").hide();
        if($("#bookmark_target").val()=="frame") {
            $("#divhelp").show();
        }      
    }
</script>
{% endblock %}