{{-- One My Dashboard card. A card opens its list: a link when the list is
     another page, a focus toggle when it is listed on the dashboard. --}}
@php
    $inner = 'group relative flex h-full flex-col overflow-hidden p-5 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40'.($active ? ' ring-2 ring-indigo-300' : '');
@endphp
@if (isset($m['href']))
    <a href="{{ $m['href'] }}" wire:navigate class="block text-left">
@else
    <button type="button" wire:click="setFocus('{{ $m['focus'] }}')" class="block text-left">
@endif
    <x-card :class="$inner">
        <div class="flex items-start justify-between gap-2">
            <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400" title="{{ $m['label'] }}">{{ $m['label'] }}</p>
            <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                <x-icon :name="$m['icon']" class="h-4 w-4" />
            </span>
        </div>
        <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ $m['value'] }}</p>
        <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">{{ $m['sub'] }}</span>
    </x-card>
@if (isset($m['href']))
    </a>
@else
    </button>
@endif