{% macro cardImprove(title,description,isValid,pnominale,preduite,foyerOuvert,normes,listAction,key,actionsDone,multipleDiameter=false) %}
    <div class="containerCard {{ isValid? "valid":"notvalid" }}" style="padding: 0 20px">
        <div class="containerTitleImg">
            <h3>{{ title }}</h3>
            <img src="{{ isValid ?asset('install-bois/improveResultCDC/check.png'):asset('install-bois/improveResultCDC/cross.png') }}"
                 alt="Critère {{ isValid? 'correcte': 'incorrecte' }}">
        </div>
        <span class="description">{{ description }}</span>
        {% if isValid === false %}
            <div style="width: calc(100% + 40px);">
                <h3 class="ibtitle">Solutions INSTALL BOIS</h3>
            </div>
            <div class="containerButtons">
                {% for action in listAction %}
                    {% set titleAction = action %}
                    {% if action == "grilleExterieur" %}
                        {% set titleAction = 'Modifier la grille extérieure' %}
                    {% elseif action == 'grilleInterieur' %}
                        {% set titleAction = 'Modifier la grille intérieure' %}
                    {% elseif action == 'isolerTubage' %}
                        {% set titleAction = 'Isoler le tubage' %}
                    {% elseif action == 'modifierHauteur' %}
                        {% set titleAction = 'Modifier hauteur conduit de fumée / tubage' %}
                    {% elseif action == 'coudesCdr' %}
                        {% set titleAction = 'Modification des coudes du conduit de raccordement connecté à l\'appareil' %}
                    {% elseif action == 'coudesCdrApp' %}
                        {% set titleAction = 'Modification des coudes du conduit de  raccordement connecté à l\'appareil' %}
                    {% elseif action == 'coudesCdrCf' %}
                        {% set titleAction = 'Modification des coudes du conduit de raccordement connecté au conduit de fumée' %}
                    {% elseif action == 'coudesTubage' %}
                        {% set titleAction = 'Modification des coudes et tés du conduit de fumée/tubage' %}
                    {% elseif action == 'tubage' %}
                        {% set titleAction = 'Remplacer mon tubage par un autre tubage (isolé par exemple)' %}
                    {% endif %}
                    <button onclick="eventClickAction('{{ action }}','{{ key }}')" class="btnAction"
                            data-action="{{ action }}" data-criteria="{{ key }}">
                        <span>{{ titleAction }}</span>
                        {% if action in actionsDone %}
                            <img width="20px" height="22px" style="float: right;"
                                 src="{{ asset('install-bois/improveResultCDC/check_blue.png') }}">
                        {% endif %}
                    </button>
                {% endfor %}
                {% if multipleDiameter == true %}
                    <button class="btnAction gotodiameter">
                        <span>Choisir un autre diamètre du conduit de fumée ou tubage</span>
                    </button>
                {% endif %}
            </div>
        {% endif %}
        <div class="listResults">
            <h4>Votre installation</h4>
            {% if pnominale['value'] is not null %}
                <div class="lineIsValid">
                    <span>À puissance nominale : </span>
                    <div style="display: flex;width: 50px">
                        <img width="30px"
                             src="{{ pnominale['isValid'] ? asset('install-bois/improveResultCDC/check.png') : asset('install-bois/improveResultCDC/cross.png') }}">
                        {% if pnominale['isValid'] === false %}
                            <span style="color: red;margin: auto">{{ pnominale['value']|round(1, 'common') }}</span>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
            {% if preduite['value'] is not null %}
                <div class="lineIsValid">
                    <span>À puissance réduite : </span>
                    <div style="display: flex;width: 50px">
                        <img width="30px"
                             src="{{ preduite['isValid'] ? asset('install-bois/improveResultCDC/check.png') : asset('install-bois/improveResultCDC/cross.png') }}">
                        {% if preduite['isValid'] === false %}
                            <span style="color: red;margin: auto">{{ preduite['value']|round(1, 'common') }}</span>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
            {% if foyerOuvert['value'] is not null %}
                <div class="lineIsValid">
                    <span>À foyer ouvert : </span>
                    <div style="display: flex;width: 50px;">
                        <img width="30px"
                             src="{{ foyerOuvert['isValid'] ? asset('install-bois/improveResultCDC/check.png') : asset('install-bois/improveResultCDC/cross.png') }}">
                        {% if foyerOuvert['isValid'] === false %}
                            <span style="color: red;margin: auto">{{ foyerOuvert['value']|round(1, 'common') }}</span>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>
        <h4 style="margin-bottom: 11px;font-weight: bold">Valeurs attendues</h4>
        <p class="normes">
            {% for norme in normes %}
                {{ norme }}<br/>
            {% endfor %}
        </p>
    </div>
{% endmacro %}

{% macro edit(field) %}
    {% if field['key'] is not null and  field['key']!=='info' %}
        <div class="containerElementEdit">
            {% if field['new']|length > 0 %}
                {% if field['new'][0] is defined and field['new'][0] is not iterable %}
                    <span>{{ field['libelle'] }} <span class="asterix">*</span></span>
                {% endif %}
                <div class="containerRadios">
                    {% for new in field['new'] %}
                        {% if new['new'] is defined and new['new'] is iterable %}
                            <div class="containerData">
                                <div class="containerRadio">
                                    <input type="radio"
                                           id="{{ new['key']~ loop.index }}"
                                           name="{{ new['key'] }}"
                                           data-index={{ loop.index }}>
                                    <label for="{{ new['key']~ loop.index }}">{{ new['libelle'] }}</label>
                                </div>
                                <div class="containerFieldsForRadio">
                                    {% for newField in new['new'] %}
                                        <label for="{{ newField['key'] }}">{{ newField['libelle'] }} <span class="asterix">*</span></label>
                                        <input class="form-control"
                                               type="text" id="{{ newField['key'] }}" name="{{ newField['key'] }}">
                                    {% endfor %}
                                </div>
                            </div>
                        {% else %}
                            <div class="containerRadio">
                                <input type="radio"
                                       id="{{ field['key']~ loop.index }}"
                                       name="{{ field['key'] }}"
                                       data-index={{ loop.index }}>
                                <label for="{{ field['key']~ loop.index }}">{{ new }}</label>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            {% else %}
                <div>
                    <label for="{{ field['key'] }}">{{ field['libelle'] }} <span class="asterix">*</span></label>
                    <input class="form-control"
                           type="text" id="{{ field['key'] }}" name="{{ field['key'] }}">
                </div>
            {% endif %}
        </div>
    {% endif %}
    <script type="application/javascript">
        $('input[type=radio]').change(function () {
            elementSelected = $(this)[0]
            elementsToRemove = $(this).parents('.containerRadios').children('.containerFieldsForRadio')
            $(this).parents('.containerRadios').find('input[type=radio]').map(function () {
                if ($(this)[0].id !== elementSelected.id) {
                    $(this).prop('checked', false)
                }
            })
            if ($(this).parents('.containerElementEdit').find('.containerFieldsForRadio').length > 0) {
                $(this).parents('.containerElementEdit').find('.containerFieldsForRadio').hide()
                $(this).parents('.containerData').find('.containerFieldsForRadio').show()
            }
        });
    </script>
{% endmacro %}