<!-- 
  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.
-->

<div class="{{@root.prefix}}--responsive-table-container" data-responsive-table>
  <table class="{{@root.prefix}}--responsive-table{{#if simple}} {{@root.prefix}}--responsive-table--static-size{{/if}}" data-table>
    <thead class="{{@root.prefix}}--table-head">
      <tr class="{{@root.prefix}}--table-row">
        {{#each columns}}
          <th class="{{@root.prefix}}--table-header{{#if checkbox}} {{@root.prefix}}--table-select{{/if}}{{#if sortable}} {{@root.prefix}}--table-sort{{/if}}"{{#if sortable}} data-event="sort"{{/if}}>
            {{#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}}">
                <span class="{{@root.prefix}}--checkbox-appearance">
                  <svg class="{{@root.prefix}}--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                    <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
                  </svg>
                </span>
              </label>
            {{else}}
              {{#if title}}
                <span>{{title}}</span>
              {{/if}}
              {{#if sortable}}
                <svg class="{{@root.prefix}}--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
                  <path d="M10 0L5 5 0 0z"></path>
                </svg>
              {{/if}}
            {{/if}}
          </th>
        {{/each}}
      </tr>
    </thead>
    <tbody class="{{@root.prefix}}--table-body">
      {{#each rows as |row|}}
        <tr tabindex="0" class="{{@root.prefix}}--table-row {{@root.prefix}}--parent-row" data-parent-row>
          {{#each ../columns as |column|}}
            {{#with (lookup row column.name) as |data|}}
              {{#if column.section}}
                <td tabindex="0" class="{{@root.prefix}}--table-expand" data-event="expand">
                  <svg class="{{@root.prefix}}--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
                    <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
                  </svg>
                </td>
              {{else if column.checkbox}}
                <td class="{{@root.prefix}}--table-select">
                  <input id="{{@root.prefix}}--checkbox-2" class="{{@root.prefix}}--checkbox" type="checkbox" value="green" name="{{data.id}}">
                  <label for="{{@root.prefix}}--{{id}}" class="{{@root.prefix}}--checkbox-label" aria-label="{{data.label}}">
                    <span class="{{@root.prefix}}--checkbox-appearance">
                      <svg class="{{@root.prefix}}--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
                      </svg>
                    </span>
                  </label>
                </td>
              {{else if column.menu}}
                <td class="{{@root.prefix}}--table-overflow">
                  <div data-overflow-menu tabindex="0" aria-label="{{data.label}}" class="{{@root.prefix}}--overflow-menu">
                    <svg class="{{@root.prefix}}--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
                      <circle cx="2" cy="2" r="2"></circle>
                      <circle cx="2" cy="10" r="2"></circle>
                      <circle cx="2" cy="18" r="2"></circle>
                    </svg>
                    <ul class="{{@root.prefix}}--overflow-menu-options{{#if data.flip}} {{@root.prefix}}--overflow-menu--flip{{/if}}" tabindex="-1">
                      {{#each data.items}}
                        <li class="{{@root.prefix}}--overflow-menu-options__option{{#if danger}} {{@root.prefix}}--overflow-menu-options__option--danger{{/if}}">
                          <button class="{{@root.prefix}}--overflow-menu-options__btn"{{#if primaryFocus}} data-floating-menu-primary-focus{{/if}}>{{label}}</button>
                        </li>
                      {{/each}}
                    </ul>
                  </div>
                </td>
              {{else}}
                <td>{{data}}</td>
              {{/if}}
            {{/with}}
          {{/each}}
        </tr>
        {{#if row.sectionContent}}
          <tr class="{{@root.prefix}}--table-row {{@root.prefix}}--expandable-row {{@root.prefix}}--expandable-row--hidden">
            <td colspan="{{../columns.length}}">
              {{{row.sectionContent}}}
            </td>
          </tr>
        {{/if}}
      {{/each}}
    </tbody>
  </table>
</div>