{{--
    Trend over the range with a metric switch (one measure per chart: no second axis).
      $series  key => [name, this period (day => n), previous period, fmt]
      $range   App\Services\Analytics\Range
      $markers optional, for the first chart
      $title   card title
--}}
@php
    $bucket = $range->bucket();
    $uid = 'tr'.substr(md5(json_encode(array_keys($series)).($title ?? '')), 0, 6);
@endphp
<section class="card viz-card wide" data-tabs>
    <header>
        <h2 class="h3">{{ $title ?? 'Over time' }}</h2>
        @if (count($series) > 1)
            <div class="viz-tabs" role="tablist" aria-label="Measure">
                @foreach ($series as $k => $s)
                    <button type="button" role="tab" id="{{ $uid }}-t-{{ $k }}" aria-controls="{{ $uid }}-p-{{ $k }}" aria-selected="{{ $loop->first ? 'true' : 'false' }}" tabindex="{{ $loop->first ? 0 : -1 }}">{{ $s[0] }}</button>
                @endforeach
            </div>
        @endif
    </header>
    @foreach ($series as $k => [$name, $cur, $prev, $fmt])
        @php
            $c = \App\Support\Charts::bucket($cur, $bucket);
            $p = \App\Support\Charts::bucket($prev, $bucket);
            $p = count($p) === count($c) ? array_combine(array_keys($c), array_values($p)) : $p;
        @endphp
        <div role="tabpanel" id="{{ $uid }}-p-{{ $k }}" aria-labelledby="{{ $uid }}-t-{{ $k }}" @if (! $loop->first) hidden @endif>
            @include('charts.line', [
                'series' => [['name' => $range->label, 'values' => $c], ['name' => 'The '.$range->days().' days before', 'values' => $p, 'prev' => true]],
                'fmt' => $fmt, 'bucket' => $bucket, 'label' => $name, 'markers' => $loop->first ? ($markers ?? []) : [],
            ])
            <details class="viz-table">
                <summary>Show as a table</summary>
                <div class="tablewrap"><table>
                    <thead><tr><th>{{ $bucket === 'week' ? 'Week of' : 'Day' }}</th><th class="num">{{ $name }}</th><th class="num">Period before</th></tr></thead>
                    <tbody>
                        @foreach (array_reverse(array_keys($c)) as $i => $d)
                            @php $pv = array_values($p)[count($c) - 1 - $i] ?? 0; @endphp
                            <tr><td>{{ \Carbon\CarbonImmutable::parse($d)->format('D M j, Y') }}</td><td class="num">{{ \App\Support\Charts::format($c[$d], $fmt) }}</td><td class="num">{{ \App\Support\Charts::format($pv, $fmt) }}</td></tr>
                        @endforeach
                    </tbody>
                </table></div>
            </details>
        </div>
    @endforeach
</section>