{#
 /**
 * Answer option row view
 *
 * @var bool $first
 * @var bool $assessmentvisible
 * @var int $scale_id
 * @var Question $question
 * @var string $language
 * @var Answer $answerOption
 * @var AnswerL10n $answerl10ns
 *
 * NB: If you edit this view, remember to check if subquestion row view need also to be updated.
 */
#}

<tr
    class='row-container'
    id='row_{{ language }}_{{ answerOption.aid }}_{{ scale_id }}'
    data-common-id="{{ answerOption.aid }}_{{ scale_id }}"
>

    {# If survey is not activated and first language #}
    {% if first %}
        <!-- Move icon -->
        <td
          style="text-align: center;"
        >
            <span
              class="ri-menu-fill bigIcons move-icon"
              role="button"
              data-bs-toggle="tooltip"
              data-title="{{ gT("Drag to sort") }}"
            ></span>
        </td>

        <!-- Code -->
        <td class="code-title" style="vertical-align: middle;">

            {% if oldCode %}
            <input
                type='hidden'
                class='oldcode code-title'
                id='answeroptions[{{ answerOption.aid }}][{{ scale_id }}][oldcode]'
                name='answeroptions[{{ answerOption.aid }}][{{ scale_id }}][oldcode]'
                value="{{ answerOption.code }}"
            />
            {% endif %}

                <input
                    type='text'
                    class="code form-control input"
                    id='answeroptions[{{ answerOption.aid }}][{{ scale_id }}][code]'
                    name='answeroptions[{{ answerOption.aid }}][{{ scale_id }}][code]'
                    class='code code-title'
                    value="{{ answerOption.code }}"
                    maxlength='5'
                    pattern="[a-zA-Z0-9]+"
                    required='required'
                    onfocusout="LS.questionEditor.showAnswerOptionCodeUniqueError(this);"
                />
        </td>
        {# If survey is not active, and it's not the first language : no move button, code not editable #}
    {% else %}
        <!-- Move icon -->
        <td class="move-icon-disable">&nbsp;</td>
        <!-- Code -->
        <td  class="code-title" style="vertical-align: middle;">{{ answerOption.code }}</td>
    {% endif %}

    <!-- Assessment Value -->
    {% if assessmentvisible and first %}
        <td class="assessment-value">
            <input
                type='text'
                class='assessment form-control input'
                id='answeroptions[{{ answerOption.aid }}][{{ scale_id }}][assessment]'
                name='answeroptions[{{ answerOption.aid }}][{{ scale_id }}][assessment]'
                value="{{ answerOption.assessment_value }}"
                pattern="-?\d+"
                maxlength='5'
                size='5'
                onkeypress="return window.LS.goodchars(event,'-1234567890')"
            />
        </td>
    {% elseif first %}
        <td style='display:none;' class="assessment-value">
            <input
                type='text'
                class='assessment'
                id='answeroptions[{{ answerOption.aid }}][{{ scale_id }}][assessment]'
                name='answeroptions[{{ answerOption.aid }}][{{ scale_id }}][assessment]'
                value="{{ answerOption.assessment_value }}"
                maxlength='5'
                pattern="-?\d+"
                size='5'
                onkeypress="return window.LS.goodchars(event,'-1234567890')"
            />
        </td>
    {% elseif assessmentvisible %}
        <td class="assessment-value">
            {{ answerOption.assessment_value }}
        </td>
    {% else %}
        <td style='display:none;' class="assessment-value"></td>
    {% endif %}

    <!-- Answer -->
    <td  class="answeroption-text" style="vertical-align: middle;">
        <div class="input-group">
            <input
                type='text'
                size='20'
                class='answer form-control input'
                id='answeroptions[{{ answerOption.aid }}][{{ scale_id }}][answeroptionl10n][{{ language }}]'
                name='answeroptions[{{ answerOption.aid }}][{{ scale_id }}][answeroptionl10n][{{ language }}]'
                placeholder='{{ gT("Some example answer option") }}'
                data-contents-dir="{{ getLanguageRTL(language) ? 'rtl' : 'ltr' }}"
                value="{{ answerOptionl10n.answer|escape('html_attr') }}"
            />
            {{ getEditor(
                "editanswer",
                "answeroptions["~answerOption.aid~"]["~scale_id~"][answeroptionl10n]["~language~"]",
                "["~gT("Answer option:", "js")~"]("~language~")",
                question.sid,
                question.gid,
                question.qid,
                'editanswer'
            ) }}
        </div>
    </td>

    <!-- Icons edit/delete -->
    <td style="vertical-align: middle; white-space: nowrap;" class="answeroption-actions">
        {% if first %}
            <button type="button" class="btn btn-outline-secondary btn-sm btnaddanswer">
                <i
                    class="ri-add-circle-fill text-primary"
                    data-assessmentvisible='{{ assessmentvisible }}'
                    data-position="{{ position }}"
                    data-code="{{ answerOption.code }}"
                    data-scale-id="{{ scale_id }}"
                    data-bs-toggle="tooltip"
                    data-bs-placement="bottom"
                    title="{{ gT("Insert a new answer option after this one") }}"
                ></i>
            </button>
            <button type="button" class="btn btn-outline-secondary btn-sm btndelanswer">
                <i class="ri-indeterminate-circle-fill text-danger " data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ gT("Delete this entry") }}"></i>
            </button>
        {% endif %}
    </td>
</tr>
