{#[
/**
 * subquestion row view
 *
 * @var $position ??? Question order?
 * @var $scale_id
 * @var $activated
 * @var $first
 * @var $subquestion
 * @var $subquestionl10n
 *
 * NB : !!! If you edit this view, remember to check if answer option row view need also to be updated !!!
 */
#}

<!-- subquestion row -->
<tr id='row_{{ language }}_{{ subquestion.qid }}_{{ scale_id }}' class="row-container" data-common-id="{{ subquestion.qid }}_{{ scale_id }}">
    {# If survey is active : no move button, code not editable #}
    {% if activated == 'Y' %}
        <!-- Move icon -->
        <td class="move-icon-disable">
            &nbsp;
        </td>

        <!-- Code (title) -->
        <td class="code-title" style="vertical-align: middle;">
            <input
                type='text'
                class="code form-control input"
                id='subquestions[{{ subquestion.qid }}][{{ scale_id }}][code]'
                name='subquestions[{{ subquestion.qid }}][{{ scale_id }}][code]'
                class='code code-title'
                value="{{ subquestion.title|escape('html_attr') }}"
                required='required'
                maxlength="20"
                pattern="[a-zA-Z0-9]+"
                {% if question.survey.active == 'Y' %}
                readonly="readonly"
                {% endif %}
                onfocusout="LS.questionEditor.showSubquestionCodeUniqueError(this);"
            />
        </td>

    {# If survey is not activated and first language : move button, code editable   #}
    {% elseif first %}
        {% set sPattern = (subquestion.title)?"^([a-zA-Z0-9]*|"~subquestion.title~")$":"^[a-zA-Z0-9]*$" %}

        <!-- Move icon -->
        <td
          style="text-align: center;"
        >
            <span
              class="ri-menu-fill move-icon"
              role="button"
              data-bs-toggle="tooltip"
              data-title="{{ gT("Drag to sort") }}"
            ></span>
        </td>

        <!-- Code (title) -->
        <td class="code-title" style="vertical-align: middle;">
            <input
                type='text'
                class="code form-control input"
                id='subquestions[{{ subquestion.qid }}][{{ scale_id }}][code]'
                name='subquestions[{{ subquestion.qid }}][{{ scale_id }}][code]'
                class='code code-title'
                value="{{ subquestion.title|escape('html_attr') }}"
                required='required'
                maxlength="20"
                pattern="[a-zA-Z0-9]+"
                {% if question.survey.active == 'Y' %}
                readonly="readonly"
                {% endif %}
                onfocusout="LS.questionEditor.showSubquestionCodeUniqueError(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 (title) -->
        <td  class="code-title" style="vertical-align: middle;">
            {{ subquestion.title|escape('html') }}
        </td>
    {% endif %}

    <!-- Subquestion text -->
    <td  class="subquestion-text" style="vertical-align: middle;">
        <div class="input-group">
            <!-- NB: Class "answer" is used for both subquestions and answer options. -->
            <input
                type='text'
                size='20'
                class='answer form-control input'
                id='subquestions[{{ subquestion.qid }}][{{ scale_id }}][subquestionl10n][{{ language }}]'
                name='subquestions[{{ subquestion.qid }}][{{ scale_id }}][subquestionl10n][{{ language }}]'
                placeholder='{{ gT("Some example subquestion","js") }}'
                value="{{ subquestionl10n.question|escape('html_attr') }}"
                data-contents-dir="{{ getLanguageRTL(language) ? 'rtl' : 'ltr' }}"
                onkeypress=" if(event.keyCode==13) { if (event && event.preventDefault) event.preventDefault(); document.getElementById('save-button').click(); return false;}"
            />
            {{ getEditor(
                "editanswer",
                "subquestions["~subquestion.qid~"]["~scale_id~"][subquestionl10n]["~language~"]",
                "["~gT("Subquestion:", "js")~"]("~language~")",
                subquestion.sid,
                gid,
                (subquestion.qid matches '/^\\d+$/') ? subquestion.qid : "",
                'editanswer'
            ) }}
        </div>
    </td>

    <!-- Relevance equation -->
    {% if first and scale_id == 0 %}
        <td class="relevance-equation">
            <input
                data-bs-toggle="tooltip"
                data-bs-placement="bottom"
                title="{{ gT("Click to expand") }}"
                type='text'
                class='relevance form-control input'
                id='subquestions[{{ subquestion.qid }}][{{ scale_id }}][relevance]'
                name='subquestions[{{ subquestion.qid }}][{{ scale_id }}][relevance]'
                value="{{ subquestion.relevance|escape('html_attr') }}"
                onkeypress=" if(event.keyCode==13) { if (event && event.preventDefault) event.preventDefault(); document.getElementById('save-button').click(); return false;}"
            />
        </td>
    {%  else %}
        <!-- TOOD: Why render and then hide? -->
        <span style="display: none" class="relevance relevance-equation">
            {# subquestion.relevance #}
        </span>
    {%  endif %}

    <!-- Icons add/edit/delete -->
    <td style="vertical-align: middle; white-space: nowrap;" class="subquestion-actions">
        {% if activated != 'Y' and first %}
            <button class="btn btn-outline-secondary btn-sm btnaddsubquestion">
                <i
                    class="ri-add-circle-fill text-primary"
                    data-code="{{ subquestion.title|escape('html_attr') }}"
                    data-bs-toggle="tooltip"
                    data-scale-id="{{ scale_id }}"
                    data-bs-placement="bottom"
                    title="{{ gT("Insert a new subquestion after this one") }}"
                ></i>
            </button>
            <button class="btn btn-outline-secondary btn-sm btndelsubquestion">
                <i
                    class="ri-indeterminate-circle-fill text-danger"
                    data-bs-toggle="tooltip"
                    data-bs-placement="bottom"
                    title="{{ gT("Delete this subquestion") }}"
                ></i>
            </button>
        {%  endif %}
    </td>
</tr>
