<section class="bx--structured-list{{#if hasBorder}} bx--structured-list--border{{/if}}{{#if selectable}} bx--structured-list--selection{{/if}}"{{#if selectable}} data-structured-list{{/if}}>
  <div class="bx--structured-list-thead">
    <div class="bx--structured-list-row bx--structured-list-row--header-row">
      {{#if selectable}}
        <div class="bx--structured-list-th"></div>
      {{/if}}
      {{#each columns}}
        <div class="bx--structured-list-th">{{title}}</div>
      {{/each}}
    </div>
  </div>
  <div class="bx--structured-list-tbody">
    {{#each rows as |row|}}
      {{#if ../selectable}}
        <label for="{{row.id}}" aria-label="{{row.selectionLabel}}" class="bx--structured-list-row{{#if row.selected}} bx--structured-list-row--selected{{/if}}" tabindex="0">
          <input tabindex="-1" id="{{row.id}}" class="bx--structured-list-input" value="{{row.value}}" type="radio" name="{{../group}}" title="{{row.selectionLabel}}"{{#if row.selected}} checked{{/if}} />
          <div class="bx--structured-list-td">
            <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16">
              <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
                fill-rule="evenodd" />
            </svg>
          </div>
      {{else}}
        <div class="bx--structured-list-row">
      {{/if}}
        {{#each ../columns as |column|}}
          {{#with (lookup row column.name) as |data|}}
            <div class="bx--structured-list-td{{#if column.nowrap}} bx--structured-list-content--nowrap{{/if}}">{{data}}</div>
          {{/with}}
        {{/each}}
      {{#if ../selectable}}
        </label>
      {{else}}
        </div>
      {{/if}}
    {{/each}}
  </div>
</section>
