{% block body %}
    <div style="margin-top:15px;" id="answers_list">
        <div id="counter" style="margin-bottom: 10px; margin-top: 10px; font-weight: bold; width:100%;position:relative;{% if post.countSelected ?? selectedCount == 0 %}display:none;{% endif %}">
            {{ 'Nombre de réponse(s) sélectionnée(s)' | trad }}
            :
            <span id="countSelected">{{ post.countSelected ?? selectedCount }}</span>
            <input type="hidden" id="input_countSelected" name="countSelected" value="{{ post.countSelected ?? selectedCount }}"/>
            <div id='listInputSelected'>
                {% for key, val in dependency.ANSWERS_CHECKED %}
                    <input type='hidden' name="dependency_answers_saved{{ val }}" id="dependency_answers_saved{{ val }}" value='1'/>
                {% endfor %}
            </div>
        </div>
        <div id="refresh_answers" class="clearfix">
            <table class="table table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th></th>
                        <th scope="col" width="">{{ 'Réponse' | trad }}</th>
                    </tr>
                </thead>
                <tbody>
                {% for answer in answers %}
                    <tr id="answer_{{ loop.index }}">
                        <td><input type="checkbox" class="form-control checkbox answers" data-id="{{ answer.ID_REP }}" id="selected_answer_{{ answer.ID_REP }}" name="selected_answer_{{ answer.ID_REP }}" {% if answer.ID_REP in dependency.ANSWERS_CHECKED %}checked{% endif %}/></td>
                        <td>{{ answer.TXT_REP }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
	</div>
    <script>
        $(document).ready(function () {
            $('#listInputSelected input').each(function (index) {
                $('#input_' + $(this).attr('id').substring(5)).prop("checked", true);
            });
        });

        $('.answers').click(function () {
            var input = $(this)[0];

            var oldCount = parseInt($('#input_countSelected').val());

            var idFrs = $($(this)[0]).data('id');
            if ($(input).is(':checked')) {
                var newCount = oldCount + 1;
                $('#listInputSelected').append("<input type='hidden' name='dependency_answers_saved" + idFrs + "' id='dependency_answers_saved" + idFrs + "' value='1'/>");
            } else {
                var newCount = oldCount - 1;
                $('#dependency_answers_saved' + idFrs).remove();
            }

            $('#countSelected').html(newCount);
            $('#input_countSelected').val(newCount);

            if (newCount >= 1) {
                $('#counter').show();
            } else {
                $('#counter').hide();
            }
        });
    </script>
    <script type="text/javascript" src="{{ baseUrl('js/parametre.js') }}" id="parametreJS"></script>
{% endblock %}
