<div class="panel">
    <div class="panel-heading">
        <h3>{{ 'choices_management'|trans({}, 'survey') }}</h3>
    </div>
    <div class="panel-body">
        <div class="form-group row">
            <label class="control-label col-md-3 required" for="choice-display-form-type">
                {{ 'choice_display'|trans({}, 'survey') }}
            </label>
            <div class="col-md-3">
                <select id="choice-display-form-type" class="form-control" name="choice-display">
                    <option value="vertical">{{ 'vertical'|trans({}, 'survey') }}</option>
                    <option value="horizontal" {% if horizontal %}selected="selected"{% endif %}>
                        {{ 'horizontal'|trans({}, 'survey') }}
                    </option>
                </select>
            </div>
        </div>
        <br>
        <div class="table-responsive">
            <table id="choices-table"  class="table table-bordered" style="text-align: center">
            {% set choiceOtherContent = '' %}
                
            {% if choices|length == 0 %}
                <tr id="choice-row-0">
                    <td>
                        <textarea class="claroline-tiny-mce" name="choice[0]">
                        </textarea>
                    </td>
                    <td style="vertical-align: middle">
                        <span class="btn btn-danger delete-choice-btn" data-choice-id="0">
                            {{ 'delete'|trans({}, 'platform') }}
                        </span>
                    </td>
                </tr>
                
                {% set choiceIndex = 1 %}
            {% else %}
                {% set choiceIndex = 0 %}
                
                {% for choice in choices %}
                    {% if not choice.isOther() %}
                        <tr id="choice-row-{{ choiceIndex }}">
                            <td>
                                <textarea class="claroline-tiny-mce" name="choice[{{ choiceIndex }}]">
                                    {{ choice.getContent() }}
                                </textarea>
                            </td>
                            <td style="vertical-align: middle">
                                <span class="btn btn-danger delete-choice-btn" data-choice-id="{{ choiceIndex }}">
                                    {{ 'delete'|trans({}, 'platform') }}
                                </span>
                            </td>
                        </tr>
                        {% set choiceIndex = choiceIndex + 1 %}
                    {% else %}
                        {% set choiceOtherContent = choice.getContent() %}
                    {% endif %}
                {% endfor %}
            {% endif %}
            </table>
            <div id="choice-index-block" data-current-choice-index="{{ choiceIndex }}"></div>
        </div>
        <div class="form-group row">
            <label class="control-label col-md-3 required" for="choice-other-chk">
                {{ 'add_choice_other'|trans({}, 'survey') }}
            </label>
            <div class="col-md-3">
                <input type="checkbox"
                       id="choice-other-chk"
                       name="choice-other[other]"
                       value='other'
                       {% if choiceOtherContent is not empty %}checked{% endif %}
                >
            </div>
        </div>
        <div class="form-group row" id="choice-other-label-element">
            <label class="control-label col-md-3 required" for="choice-other-label">
                {{ 'label_for_choice_other'|trans({}, 'survey') }}
            </label>
            <div class="col-md-9">
                <input type="text"
                       id="choice-other-label"
                       class="form-control"
                       name="choice-other[content]"
                       {% if choiceOtherContent is not empty %}value="{{choiceOtherContent}}"{% endif %}
                >
            </div>
        </div>
        <br>
        <span id="add-choice-btn" class="btn btn-primary">
            <i class="fa fa-plus-circle"></i>
            {{ 'add_choice'|trans({}, 'survey') }}
        </span>
        
        <hr>
        <div class="form-group row">
            <label class="control-label col-md-3 required" for="create-model-chk">
                {{ 'create_model_from_question'|trans({}, 'survey') }}
            </label>
            <div class="col-md-3">
                <input type="checkbox"
                       id="create-model-chk"
                       name="model"
                       value='model'
                >
            </div>
        </div>
    </div>
</div>