{{--
    `px-cardgrid__full` makes this panel span the whole row.

    It holds one card per analyte, so it is the only panel on the record whose
    width buys anything: at a column's width it fits one chart and runs for
    pages, and across the row it fits four and the record fits on a screen.
--}}
<div class="px-panel px-cardgrid__full p-3 p-md-4">
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
        <div class="min-w-0">
            <p class="mb-0 fw-semibold">{{ __('laboratory::messages.trends.title') }}</p>
            <p class="mb-0 small text-body-secondary">{{ __('laboratory::messages.trends.subtitle') }}</p>
        </div>

        <div class="d-flex flex-wrap align-items-center gap-2">
            {{-- Where a clinician looking at a gap in the trend is standing
                 when they realise the patient has the missing report in
                 their hand. --}}
            @if ($trendPatientUlid !== null && auth()->user()?->can('lab.result'))
                <a class="btn btn-sm px-btn-ghost d-inline-flex align-items-center gap-2"
                   href="{{ route('lab.external.create', $trendPatientUlid) }}">
                    <i class="bi bi-clipboard2-plus" aria-hidden="true"></i>
                    {{ __('laboratory::messages.external.add') }}
                </a>
            @endif

            {{--
                One control row above everything it scopes, never a filter inside
                a chart card: every chart below re-renders against the same
                window.
            --}}
            <div class="btn-group btn-group-sm" role="group" aria-label="{{ __('laboratory::messages.trends.window') }}">
                @foreach ($trendWindows as $months)
                    <a class="btn {{ $trendMonths === $months ? 'px-btn-primary' : 'px-btn-ghost' }}"
                       href="{{ request()->fullUrlWithQuery(['trend_months' => $months]) }}"
                       @if ($trendMonths === $months) aria-current="true" @endif>
                        {{ trans_choice('laboratory::messages.trends.months', $months, ['count' => $months]) }}
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    @if ($trendSeries !== [])
        <div class="px-trends">
            @foreach ($trendSeries as $series)
                <x-px.trend :series="$series" />
            @endforeach
        </div>
    @else
        <div class="px-empty py-4">
            <div class="px-empty__art" aria-hidden="true" style="width: 4.5rem; height: 4.5rem;">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                     stroke-linecap="round" stroke-linejoin="round" style="width: 2rem; height: 2rem;">
                    <path d="M4 19V5M4 19h16" />
                    <path d="M7 15l3.5-4 3 2.5L20 8" />
                </svg>
            </div>

            <p class="px-empty__title">{{ __('laboratory::messages.trends.empty_title') }}</p>
            <p class="px-empty__text mb-0">
                {{ $trendHasHistory
                    ? __('laboratory::messages.trends.empty_window')
                    : __('laboratory::messages.trends.empty_none') }}
            </p>
        </div>
    @endif
</div>