{#[
/**
 * subquestion row view
 *
 * @var $position ??? Question order?
 * @var $scale_id
 * @var $activated
 * @var $first
 * @var $subquestion
 * @var $subquestionl10n
 * @var $oldCode ???
 *
 * 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"
                {% 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="fa fa-bars bigIcons move-icon"
              role="button"
              data-toggle="tooltip"
              data-title="{{ gT("Drag to sort") }}"
            ></span>
        </td>

        <!-- Code (title) -->
        <td class="code-title" style="vertical-align: middle;">
            <!-- TODO: What is "oldCode"??? -->
            {% if oldCode %}
                <input
                    type='hidden'
                    class='oldcode code-title'
                    maxlength="20"
                    id='subquestions[{{ subquestion.qid }}][{{ scale_id }}][oldcode]'
                    name='subquestions[{{ subquestion.qid }}][{{ scale_id }}][oldcode]'
                    value="{{ subquestion.title|escape('html_attr') }}"
                />
            {% endif %}

            <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"
                {% 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;}"
            />
            <span class="input-group-addon">
                {{ getEditor(
                    "editanswer",
                    "subquestions["~subquestion.qid~"]["~scale_id~"][subquestionl10n]["~language~"]",
                    "["~gT("Subquestion:", "js")~"]("~language~")",
                    subquestion.sid,
                    gid,
                    (subquestion.qid matches '/^\\d+$/') ? subquestion.qid : "",
                    'editanswer'
                ) }}
            </span>
        </div>
    </td>

    <!-- Relevance equation -->
    {% if first and scale_id == 0 %}
        <td class="relevance-equation">
            <input
                data-toggle="tooltip"
                data-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-default btn-sm btnaddsubquestion">
                <i
                    class="icon-add text-success"
                    data-code="{{ subquestion.title|escape('html_attr') }}"
                    data-toggle="tooltip"
                    data-scale-id="{{ scale_id }}"
                    data-placement="bottom"
                    title="{{ gT("Insert a new subquestion after this one") }}"
                ></i>
            </button>
            <button class="btn btn-default btn-sm btndelsubquestion">
                <i
                    class="fa fa-minus-circle text-danger"
                    data-toggle="tooltip"
                    data-placement="bottom"
                    title="{{ gT("Delete this subquestion") }}"
                ></i>
            </button>
        {%  endif %}
    </td>
</tr>
