<tr id="{{model.IdObject}}">
    {{#unless hideControlColumns}}

    {{#if hasSDsForDetailsView}}
      {{#if hasRangeDetails}}
      <td {{action 'toggleRow'}} style="cursor: pointer;">
        <div class="{{toggleClassName}}"></div>
      </td>
      {{else}}
      <td></td>
      {{/if}}
    {{/if}}

    <td class="validationColumn" title="{{if allValid '' validationErrorExplanation}}" {{action 'toggleRowValidation' model.IdObject}}>
      {{#if allValid}}
      <span class="material-icons md-24 valid">done</span>
      {{else}}
      <span class="material-icons md-24 no-valid">close</span>
      {{/if}}
    </td>

    {{/unless}}

    <td style="width: 20rem; white-space: nowrap;" title="{{PersonNameTooltip}}" {{action 'toggleRow'}}>
      {{PersonFullname}}
    </td>

    {{#if scale}}
      {{#if isReadOnly}}

        <td style="width: 20rem; white-space: nowrap;" title="{{gradeDesignation}}" class="{{unless columnVisibility.grade.isVisible 'hide-column' '' }}">{{gradeDesignation}}</td>
        {{#if scale.CommentsAllowed}}
        <td title="{{Comment}}" class="{{unless columnVisibility.comment.isVisible 'hide-column' ''}}">{{Comment}}</td>
        {{/if}}

      {{else}}

        <td style="width: 20rem" class="gradeInput {{unless columnVisibility.grade.isVisible 'hide-column' ''}}">
          {{#if scale.FreeGrading}}
            {{number-textbox classBinding='invalidatedClass' number=model.GradeValue minValue=scale.MinGrade maxValue=scale.MaxGrade}}
          {{else}}
            {{combo-box classBinding='invalidatedClass' source=scale.Grades keyName="Id" valueName="Designation" value=IdGrade}}
          {{/if}}
        </td>

        {{#if scale.CommentsAllowed}}
        <td style="width: 20rem" class="{{unless columnVisibility.comment.isVisible 'hide-column' ''}}">{{textarea maxlength="(constant 'inputSizes.gradeRemark')" value=Comment rows='2'}}</td>
        {{/if}}

      {{/if}}
    {{/if}}

    {{#each columnDetails as |contentColumn|}} 
    <td class="{{unless contentColumn.isVisible 'hide-column' ''}} ">
      {{subscription-detail overrideControlId=(concat contentColumn.IdObject '_col')
        model=contentColumn
        save='saveSD'
        hiddenSubscriptionDetails=hiddenSubscriptionDetails
        showLabel=false
        validated='sdValidated'
        setReadOnly=isReadOnly
        setInvalid=(if (get changesets contentColumn.IdObject) (not (get validatedChildren contentColumn.IdObject)))
        }}
    </td>
    {{/each}}
</tr>
{{#if isExpanded}}
  {{#blend-element tagName='tr' blendType='slideDown' }}
  <td class="not-mobile" colspan="2"></td>

  <!--
    Note: There is a CSS rule that enables overflow hidden with ellipsis for
    td:nth-child(3) on this table. The expanded SubscriptionDetail controls here
    also match this selector, and therefore have overflow hidden enabled. This
    can cause dropdown menus for SubscriptionDetails to be cut off if they
    extend past the bounds of the td element. As a workaround, we set "overflow:
    visible" here. For a more permanent solution, the CSS should probably be
    reworked so it does not apply to this particular element.
  -->
  <td colspan="9999" style="overflow: visible;">
    <div>
      {{#each rangeDetails as |detail|}}
      <div class="formRow">
        {{subscription-detail overrideControlId=(concat detail.IdObject '_rangeMobile') 
          model=detail 
          save='saveSD' 
          hiddenSubscriptionDetails=hiddenSubscriptionDetails 
          validated='sdValidated' 
          setReadOnly=isReadOnly
          setInvalid=(if (get changesets detail.IdObject) (not (get validatedChildren detail.IdObject)))
          }}
      </div>
      {{else}}
        {{translate 'noData'}}
      {{/each}}
    </div>
  </td>
  {{/blend-element}}
{{/if}}
