@php
  $cell = function ($value) {
      if ($value === true) {
          return '<span class="cms-compare-yes" aria-label="Yes">&#10003;</span>';
      }
      if ($value === false) {
          return '<span class="cms-compare-no" aria-label="No">&mdash;</span>';
      }

      return e($value);
  };
@endphp
<x-layouts.website :seo="$seo" theme="ink">
<x-website.cms.hero
  :kicker="data_get($content, 'kicker', 'Compare suppliers')"
  :title="data_get($content, 'title', $page->title)"
  :lead="data_get($content, 'lead')"
  wide
/>

<section class="cms-section">
  <div class="home-shell">
    @php $comparison = data_get($content, 'comparison', []); @endphp
    @if(!empty($comparison['rows']))
      <div class="cms-compare cms-reveal">
        <table>
          <thead>
            <tr>
              @foreach($comparison['columns'] as $column)
                <th scope="col">{{ $column }}</th>
              @endforeach
            </tr>
          </thead>
          <tbody>
            @foreach($comparison['rows'] as $row)
              <tr>
                <th scope="row">{{ $row['feature'] }}</th>
                <td>
                  {!! $cell($row['tra']) !!}
                  @if(!empty($row['note']))
                    <span class="cms-compare-note">{{ $row['note'] }}</span>
                  @endif
                </td>
                <td>{!! $cell($row['other']) !!}</td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    @endif
  </div>
</section>

<x-website.cms.cta :cta="data_get($content, 'cta')" />
</x-layouts.website>