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

{% form_theme form _self %}

{% block title %}Valeur - {{ criterevaleur.valeur }}{% endblock %}

{% block style %}
    <link rel="stylesheet" type="text/css" is="custom-style"
          href="{{ app.request.getBaseURL() }}/assets/css/criteresvaleurs/edit.css">
{% endblock %}

{% block _criteresvaleurs_items_list_criteresvaleurs_items_entry_widget %}
    <div style="display: flex;">
        {{ form_widget(form.id) }}
        {{ form_widget(form.valeur) }}
        {#{ form_widget(form.idCriterevaleur, {'attr': {'style': 'padding: 0px 10px;'}}) }#}
        <a href="javascript:void(0);" onclick="suppressionCriteresvaleursItem(this)" style="margin-top: 20px;margin-left: 12px;" data-view-id="{{ form.id.vars.id }}" data-id="{{ form.id.vars.value }}">X</a>
    </div>
{% endblock %}

{% block page %}
    {% set actions = {1: {'libelle': 'Retour', 'lien': path('criteres_edit', {'id': critere.id}) }} %}
    {% set liens = {'Accueil': path('home_index'), 'Critères': path('criteres_index'), (critere.libelle): path('criteres_edit', {'id': critere.id}), (criterevaleur.valeur): '#'} %}
    {% include 'breadcrumb.twig' with {'liens': liens, 'actions': actions} %}

    {{ form_start(form) }}
    <div class="row horizontal" id="criteresvaleurs_items">
        <div id="formulaire-edition" class="flex-lg-4 flex-md-5 flex-sm-6 flex-xs-12">
            <paper-card>

                <h5>Modifier la valeur de regroupement</h5>

                {% if criterevaleur.dateModification is not null %}
                    <span>Dernière modification le {{ criterevaleur.dateModification | date('d/m/Y à H:i:s') }}</span>
                {% endif %}
                <div class="layout horizontal" style="display: none">
                    <div class="flex">{{ form_row(form.idCriterevaleur) }}</div>
                </div>
                <div class="layout horizontal">
                    <div class="flex">{{ form_row(form.criterevaleur_valeur) }}</div>
                </div>
                {{ form_row(form.submit) }}
            </paper-card>
        </div>
        <div id="liste-valeurs" class="flex-lg-8 flex-md-7 flex-sm-6 flex-xs-12">
            <h5>Valeurs regroupées dans {{ criterevaleur.valeur }}</h5>

            <div class="flex">
                <paper-tooltip for="ajout_criteresvaleurs_items">Ajouter un critere</paper-tooltip>
                <paper-icon-button
                        type="button"
                        class="add-another-collection-widget"
                        data-list="criteresvaleurs-item-fields-list"
                        id="ajout_criteresvaleurs_items"
                        icon="icons:add"
                        onclick="ajoutElementsCollection(this)">
                </paper-icon-button>
                <paper-listbox>
                    {{ form_label(form.criteresvaleurs_items) }}
                    {{ form_errors(form.criteresvaleurs_items) }}
                    <ul id="criteresvaleurs-item-fields-list"
                        data-prototype="{{ form_widget(form.criteresvaleurs_items.vars.prototype)|e }}"
                        data-widget-tags="{{ '<li></li>'|e }}">
                        {% if form.criteresvaleurs_items|length > 0 %}
                            {% for variableField in form.criteresvaleurs_items %}
                                <li class="layout horizontal center">
                                    {{ form_widget(variableField) }}
                                </li>
                            {% endfor %}
                        {% else %}
                            <p>Aucune valeur regroupée</p>
                        {% endif %}
                     </ul>
                </paper-listbox>
            </div>
        </div>
    </div>
    {{ form_end(form) }}
{% endblock %}