{% extends '@CadolesCore/base.html.twig' %}

{% block pagewrapper %}
{{ form_start(form) }}
    <h1 class="page-header">
    {% if mode=="update" %}
    Modification Catégorie d'Annonce = {{alertcategory.label}}
    {% elseif mode=="submit" %}
    Création Catégorie d'Annonce
    {% endif %}
    </h1>

    <p>
    {{ form_widget(form.submit) }}
    <a class="btn btn-default" href={{ path('cadoles_portal_config_alert') }}>Annuler</a>
    {% if mode=="update" %}
    <a href={{ path('cadoles_portal_config_alertcategory_delete',{'id':alertcategory.id}) }}
        class="btn btn-danger pull-right"
        data-method="delete" data-csrf="_token:{{ 'csrf' }}"
        data-confirm="Êtes-vous sûr de vouloir supprimer cette catégorie ?">
          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="panel panel-primary">
        <div class="panel-heading">
            <i class="fa fa-pencil fa-fw"></i> Informations
        </div>

        <div class="panel-body">
            {{ form_row(form.label) }}
            {{ form_row(form.color) }}

            <div id="diviconsel" class="col-md-12 text-left" style="height:140px; padding:20px; text-align:center; background-color: {{ alertcategory.color ? "#"~alertcategory.color : '#'~color['main'] }};">
                {% if alertcategory.icon %}
                    <img src="/{{ alias }}/{{ alertcategory.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" onClick="selectIcon()" title='Ajouter' style="width:100%">Selectionner une Icône</a>
                <a class="btn btn-danger" onClick="delIcon()" title='Détacher' style="width:100%">Détacher l'Icône</a>
            </div>             
        </div>
    </div>

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

{% block localjavascript %}
    function selIcon(idicon,label) {
        $("#alertcategory_idicon").val(idicon);
        $("#diviconsel img").remove();

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

    function selectIcon() {
        $("#mymodal").find(".modal-title").html("SELECTIONNER UNE ICONE");
        var url="{{ path('cadoles_portal_config_icon_select') }}";
        $("#mymodal").find("#framemodal").attr("src",url);
        $("#mymodal").modal("show");
    }

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

