<div class="container">
  <div class="col-md-6">
    <h2>Feature Rich</h2>
    <p>
      Experience the unparalleled feature set of Apollusia, setting it apart as the market's foremost platform for
      modern event polls.
    </p>
  </div>
  <table class="table shadow">
    <thead class="sticky-top">
    <tr>
      <th scope="col" colspan="2">Feature</th>
      @for (app of apps; track app) {
        <th scope="col">{{ app }}</th>
      }
    </tr>
    </thead>
    <tbody>
      @for (kv of features|keyvalue; track kv) {
        <tr class="sticky-top">
          <td colspan="2">
            <h4>{{ kv.key }}</h4>
          </td>
        </tr>
        @for (feature of kv.value; track feature) {
          <tr>
            <th class="text-center">
              <i [class]="['icon-lg', 'bi-' + feature.icon, feature.support['Apollusia'] === true ? 'text-primary-emphasis' : 'text-muted']"></i>
            </th>
            <th scope="row">
              {{ feature.title }}
              <div class="small text-muted fw-normal">
                {{ feature.description }}
              </div>
            </th>
            @for (app of apps; track app) {
              @switch (feature.support[app]) {
                @case (true) {
                  <td class="{{ app === 'Apollusia' ? 'p-primary' : 'p-yes'}} icon-lg bi-check-lg"></td>
                }
                @case (false) {
                  <td class="p-no icon-lg bi-x-lg"></td>
                }
                @case ('Paid option') {
                  <td class="p-maybe icon-lg bi-currency-dollar" ngbTooltip="Paid option" container="body"></td>
                }
                @case ('Always') {
                  <td class="p-maybe icon-lg bi-slash-square" ngbTooltip="Always" container="body"></td>
                }
                @default {
                  <td class="p-maybe bi-flag icon-lg" [ngbTooltip]="''+feature.support[app]" container="body"></td>
                }
              }
            }
          </tr>
        }
      }
    </tbody>
  </table>
  <div class="text-end small text-muted fst-italic">
    Did we make a mistake, or do you want to add a tool?
    <a href="https://github.com/Morphclue/apollusia/edit/master/apps/frontend/src/app/about/features/features.json" target="_blank">
      Edit this data.
    </a>
  </div>
</div>
