<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

  <!-- Table -->
  <table class="{{@root.prefix}}--data-table {{#if truncate}}{{@root.prefix}}--data-table--overflow-truncate{{/if}}{{#if sticky}} {{@root.prefix}}--data-table--sticky-header{{/if}}{{#if zebra}} {{@root.prefix}}--data-table--zebra{{/if}}{{#if small}} {{@root.prefix}}--data-table--compact{{/if}}{{#if tall}} {{@root.prefix}}--data-table--tall{{/if}}{{#if sort}} {{@root.prefix}}--data-table--sort{{/if}}{{#if displayOverflowMenus}} {{@root.prefix}}--data-table--visible-overflow-menu{{/if}} {{#if short}}{{@root.prefix}}--data-table--short{{/if}} {{#if static}}{{@root.prefix}}--data-table--static{{/if}}" >
    <thead>
      <tr>
        {{#each columns}}
          <th {{#if checkbox}} class="{{@root.prefix}}--table-column-checkbox" {{/if}}{{#if section}}class="{{@root.prefix}}--table-expand"{{/if}} {{#if numerical}} class="{{@root.prefix}}--data-table--numerical-cell"{{/if}} {{#if section}} data-event="expandAll"{{/if}}>
            <!-- checkbox th -->
            {{#if checkbox}}
              <input data-event="select-all" id="{{checkboxId}}" class="{{@root.prefix}}--checkbox" type="checkbox" value="{{checkboxValue}}" name="{{checkboxName}}">
              <label for="{{checkboxId}}" class="{{@root.prefix}}--checkbox-label" aria-label="{{title}}"></label>
            {{else if (and section ../hasExpandAll)}}
              <button class="{{@root.prefix}}--table-expand__button">
                {{ carbon-icon 'ChevronRight16' class=(add @root.prefix '--table-expand__svg') }}
              </button>
            {{else if (not menu)}}
            <!-- sortable th  -->
              {{#if sortable}}
                <button class="{{@root.prefix}}--table-sort" data-event="sort" title="{{title}}">
                  <span class="{{@root.prefix}}--table-header-label">{{title}}</span>
                  {{carbon-icon 'ArrowDown16' class=(add @root.prefix '--table-sort__icon')}}
                  {{carbon-icon 'Arrows16' class=(add @root.prefix '--table-sort__icon-unsorted')}}
                  {{#if ../truncate}}
                    <div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="{{@root.prefix}}--tooltip" data-avoid-focus-on-open>
                      <span class="{{@root.prefix}}--tooltip__caret"></span>
                      <p class="{{@root.prefix}}--tooltip__text">{{title}}</p>
                    </div>
                  {{/if}}
                </button>
              <!-- no sort th -->
                {{else if small}}
                  {{title}}
                {{else}}
                  <span class="{{@root.prefix}}--table-header-label">{{title}}</span>
                {{/if}}
              {{/if}}
          </th>
        {{/each}}
      </tr>
    </thead>
  <tbody>
    {{#each rows as |row|}}
      <!-- the first cell of each row is a th[scope="row"], otherwise it is a td -->
      <tr{{#if row.sectionContent}} class="{{@root.prefix}}--parent-row" data-parent-row {{/if}} {{#if row.disabled}} class="{{@root.prefix}}--row-disabled" {{/if}}>
        {{#each ../columns as |column index|}}
          {{#with (lookup row column.name) as |data|}}
            {{#if @first }}
              <th {{#if column.numerical}} class="{{@root.prefix}}--data-table--numerical-cell" {{/if}} scope="row">
                <!-- truncated new markup -->
                {{#if ../../truncate}}
                  <span class="{{@root.prefix}}--table-cell-content" aria-describedby="label-tooltip">{{data}}
                      {{#if ../../../tall }}
                        {{#if (and row.secondaryText column.secondary)}}
                        <div class="{{@root.prefix}}--data-table--cell-secondary-text">
                          {{row.secondaryText}}
                        </div>
                        {{/if}}
                      {{/if}}
                    </span>
                  <div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="{{@root.prefix}}--tooltip" data-avoid-focus-on-open>
                    <span class="{{@root.prefix}}--tooltip__caret"></span>
                    <p class="{{@root.prefix}}--tooltip__text">{{data}}</p>
                  </div>
                <!-- default (non truncated) -->
                {{else}}
                  {{data}}
                  {{#if ../../../tall}}
                    {{#if (and row.secondaryText column.secondary)}}
                    <div class="{{@root.prefix}}--data-table--cell-secondary-text">
                      {{row.secondaryText}}
                    </div>
                    {{/if}}
                  {{/if}}
                {{/if}}
              </th>
            {{else}}
              <td {{#if column.numerical}} class="{{@root.prefix}}--data-table--numerical-cell" {{/if}}>
                <!-- truncated new markup -->
                {{#if ../../truncate}}
                  <span class="{{@root.prefix}}--table-cell-content" aria-describedby="label-tooltip">{{data}}
                      {{#if ../../../tall }}
                        {{#if (and row.secondaryText column.secondary)}}
                        <div class="{{@root.prefix}}--data-table--cell-secondary-text">
                          {{row.secondaryText}}
                        </div>
                        {{/if}}
                      {{/if}}
                    </span>
                  <div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="{{@root.prefix}}--tooltip" data-avoid-focus-on-open>
                    <span class="{{@root.prefix}}--tooltip__caret"></span>
                    <p class="{{@root.prefix}}--tooltip__text">{{data}}</p>
                  </div>
                <!-- default (non truncated) -->
                {{else}}
                  {{data}}
                  {{#if ../../../tall}}
                    {{#if (and row.secondaryText column.secondary)}}
                    <div class="{{@root.prefix}}--data-table--cell-secondary-text">
                      {{row.secondaryText}}
                    </div>
                    {{/if}}
                  {{/if}}
                {{/if}}
              </td>
            {{/if}}
          {{/with}}
        {{/each}}
      </tr>
      <!-- Expandable child row -->
      {{#if row.sectionContent}}
          <tr class="{{@root.prefix}}--expandable-row {{@root.prefix}}--expandable-row--hidden" data-child-row>
            <td colspan="{{../columns.length}}">
              <div class="{{@root.prefix}}--child-row-inner-container">
                {{{row.sectionContent}}}
              </div>
            </td>
          </tr>
        {{/if}}
      {{/each}}
    </tbody>
  </table>
  {{#if sticky}}
  </section>
  {{/if}}

 {{#if (not small)}}</div>{{/if}}
