jelhan/croodle

<div class="participants-table">
  <table class="table" data-test-table-of="participants">
    <thead>
      {{#if @poll.hasTimes}}
        <tr>
          <th>
            {{! column for name }}
          </th>
          {{#each-in this.optionsPerDay as |jsDate count|}}
            {{!
              @glint-ignore
              We can be sure that count is a number because it is destructed from a
              Map, which values are only numbers. But somehow Glint / TypeScript
              is not sure about it.
            }}
            <th colspan={{count}}>
              {{format-date jsDate dateStyle="full" timeZone=@timeZone}}
            </th>
          {{/each-in}}
        </tr>
      {{/if}}

      <tr>
        <th>
          {{! column for name }}
        </th>
        {{#each @poll.options as |option|}}
          <th>
            {{#if (and @poll.isFindADate @poll.hasTimes)}}
              {{#if option.hasTime}}
                {{!
                  @glint-ignore
                  Narrowring is not working here correctly. Due to the only executing if
                  `option.hasTime` is `true`, we know that `option.jsDate` cannot be `null`.
                  But TypeScript does not support narrowing through a chain of getters
                  currently.
                }}
                {{! @glint-ignore }}{{! prettier-ignore  }}
                {{format-date option.jsDate
                  timeStyle="short"
                  timeZone=@timeZone
                }}
              {{/if}}
            {{else if @poll.isFindADate}}
              {{!
                @glint-ignore
                Narrowring is not working here correctly. Due to the only executing if
                `option.hasTime` is `true`, we know that `option.jsDate` cannot be `null`.
                But TypeScript does not support narrowing through a chain of getters
                currently.
              }}
              {{format-date option.jsDate dateStyle="full" timeZone=@timeZone}}
            {{else}}
              {{option.title}}
            {{/if}}
          </th>
        {{/each}}
      </tr>
    </thead>

    <tbody>
      {{#each this.usersSorted as |user|}}
        <tr data-test-participant={{user.id}}>
          <td data-test-value-for="name">
            {{user.name}}
          </td>
          {{#each @poll.options as |option index|}}
            {{#let (get user.selections index) as |selection|}}
              <td
                class={{selection.type}}
                data-test-is-selection-cell
                data-test-value-for={{option.title}}
              >
                {{#if selection.labelTranslation}}
                  {{t selection.labelTranslation}}
                {{else}}
                  {{selection.label}}
                {{/if}}
              </td>
            {{/let}}
          {{/each}}
        </tr>
      {{/each}}
    </tbody>
  </table>
</div>