@php
/**
 * Shared "Design Studio" card grid — the ONE list pattern for every design surface
 * (menu screens · table QR · payment QR · printable menus · receipts · admin templates).
 *
 * It retires the three divergent card systems that did the identical job — screens.php
 * `.qm-screen-card`, print-menu-list.php `.qm-pm-card`, qr-print.php `.qrc-tile` — with a
 * single `.qm-studio-*` set built from existing tokens (--sp-*, --line, --surface, --r-*).
 * No new dashboard component styling: this CONSOLIDATES three page-scoped grids into one.
 *
 * Each card is a live preview + optional name/status + a right-aligned action row. Two
 * preview modes:
 *   - 'frame'  : a fixed-ratio box holding an <iframe>/preview (screens, print, admin)
 *   - 'object' : a centred natural-size object (the QR flip card)
 * The stylesheet is emitted ONCE per request (a page may hold several grids — the QR page
 * has two), so grids share the single set of rules. Logical properties throughout ⇒ RTL
 * needs no rtlcss build for this inline CSS.
 *
 * @var array  $cards  each: [
 *     'media'   => string   raw preview HTML (iframe or inline card)      [required]
 *     'href'    => string   edit URL → wraps the media in a click overlay [optional]
 *     'label'   => string   aria-label for that overlay                   [optional]
 *     'name'    => string   card title                                    [optional]
 *     'status'  => string   raw HTML shown beside the name (badge/status) [optional]
 *     'actions' => string   raw HTML action row                           [optional]
 * ]
 * @var string $mode   'frame' (default) | 'object'
 * @var int    $cols   frame max columns 2|3|4 (steps down responsively)   [default 4]
 * @var string $ratio  frame aspect-ratio, e.g. '16 / 9' | '4 / 3'        [default '16 / 9']
 * @var string $tone   preview background: 'dark' | 'paper' | 'surface'    [default 'surface']
 * @var string $min    object tile min width (auto-fill flow)             [default 210px]
 * @var string $align  action alignment: 'end' (default) | 'center'
 * @var bool   $flush  square card corners (a TV board reads as a screen)  [default false]
 * @var bool   $snap   inset + round the preview into a snapshot tile      [default false]
 * @var string $grid_class  extra class(es) on the grid wrapper            [optional]
 */
$cards = $cards ?? [];
$mode  = ($mode ?? 'frame') === 'object' ? 'object' : 'frame';
$cols  = in_array((int) ($cols ?? 4), [2, 3, 4], true) ? (int) ($cols ?? 4) : 4;
$ratio = $ratio ?? '16 / 9';
$tone  = $tone ?? 'surface';
$tone  = in_array($tone, ['dark', 'paper', 'surface'], true) ? $tone : 'surface';
$min   = $min ?? '210px';
$align = ($align ?? 'end') === 'center' ? 'center' : 'end';
$flush = !empty($flush);   // square card corners (TV boards read as screens, not rounded chips)
$snap  = !empty($snap);    // inset + round the preview so it reads as a snapshot tile (see the CSS)
$gridClass = trim('qm-studio-grid ' . ($mode === 'object' ? 'is-object' : 'cols-' . $cols)
    . ($flush ? ' is-flush' : '') . ($snap ? ' is-snap' : '') . ' ' . ($grid_class ?? ''));
@endphp
<div class="{{ $gridClass }}"{!! $mode === 'object' ? ' style="--tile-min: ' . e($min) . ';"' : '' !!}>
    @foreach ($cards as $card)
@php $media   = (string) ($card['media'] ?? '');
        $href    = $card['href'] ?? '';
        $name    = $card['name'] ?? '';
        $status  = $card['status'] ?? '';
        $actions = $card['actions'] ?? '';
        $label   = $card['label'] ?? ($name !== '' ? $name : t('common.edit'));
        // A card may override the grid's shape. One ratio for a whole grid squeezed a LANDSCAPE
        // design into its portrait neighbours' box, so the one card that exists to be landscape did
        // not look landscape. Grid ratio stays the default for every card that does not say.
        $cardRatio = (string) ($card['ratio'] ?? $ratio); @endphp
    <div class="qm-studio-card{{ $mode === 'object' ? ' is-object' : '' }}">
        @if ($mode === 'object')
            <div class="qm-studio-object">{{ $media }}</div>
        @else
            <div class="qm-studio-frame is-{{ $tone }}" style="--frame-ratio: {{ $cardRatio }};">
                {{ $media }}
                @if ($href !== '')<a class="qm-studio-overlay" href="{{ $href }}" aria-label="{!! $label !!}"></a>@endif
            </div>
        @endif
        @if ($name !== '' || $status !== '')
        <div class="qm-studio-meta">
            @if ($name !== '')<span class="qm-studio-name">{{ $name }}</span>@endif
            @if ($status !== '')<span class="qm-studio-status">{{ $status }}</span>@endif
        </div>
        @endif
        @if ($actions !== '')
        <div class="qm-studio-actions{{ $align === 'center' ? ' is-center' : '' }}">{{ $actions }}</div>
        @endif
    </div>
    @endforeach
</div>