@php
    $blocks = $blocks ?? [];
    $titleText = $titleText ?? null;
    $uid = 'syn_stack_' . uniqid();

    $preparedBlocks = [];
    $people = [];
    $peopleIndex = [];

    $personSlug = function ($name) {
        $name = trim((string) $name);
        if ($name === '') {
            return '';
        }

        return \Illuminate\Support\Str::slug(mb_strtolower($name, 'UTF-8'), '_');
    };

    $pairKey = function ($leftSlug, $rightSlug) {
        $parts = [(string) $leftSlug, (string) $rightSlug];
        sort($parts);

        return implode('__vs__', $parts);
    };

    foreach (array_values($blocks) as $idx => $b) {
        $leftName = trim((string) ($b['personA']['title'] ?? ($b['personA']['name'] ?? '')));
        $rightName = trim((string) ($b['personB']['title'] ?? ($b['personB']['name'] ?? '')));

        if ($leftName === '' || $rightName === '') {
            if (!empty($b['title']) && str_contains($b['title'], '×')) {
                [$leftFromTitle, $rightFromTitle] = array_map('trim', explode('×', $b['title'], 2));
                $leftName = $leftName !== '' ? $leftName : $leftFromTitle;
                $rightName = $rightName !== '' ? $rightName : $rightFromTitle;
            }
        }

        $leftName = $leftName !== '' ? $leftName : ('Persona ' . ($idx + 1));
        $rightName = $rightName !== '' ? $rightName : ('Persona ' . ($idx + 2));

        $leftSlug = $personSlug($leftName);
        $rightSlug = $personSlug($rightName);

        if ($leftSlug === '' || $rightSlug === '') {
            continue;
        }

        if (!isset($peopleIndex[$leftSlug])) {
            $peopleIndex[$leftSlug] = true;
            $people[] = ['slug' => $leftSlug, 'name' => $leftName];
        }

        if (!isset($peopleIndex[$rightSlug])) {
            $peopleIndex[$rightSlug] = true;
            $people[] = ['slug' => $rightSlug, 'name' => $rightName];
        }

        $preparedBlocks[] = array_merge($b, [
            '_leftName' => $leftName,
            '_rightName' => $rightName,
            '_leftSlug' => $leftSlug,
            '_rightSlug' => $rightSlug,
            '_pairKey' => $pairKey($leftSlug, $rightSlug),
        ]);
    }

    $defaultLeft = $preparedBlocks[0]['_leftSlug'] ?? ($people[0]['slug'] ?? '');
    $defaultRight = $preparedBlocks[0]['_rightSlug'] ?? ($people[1]['slug'] ?? '');
    $defaultPairKey = $pairKey($defaultLeft, $defaultRight);
@endphp

@if (!empty($preparedBlocks))
    <div class="aspect-card" data-syn-stack-root="{{ $uid }}">
        <div class="aspect-header">
            <h6 class="mb-0 fw-bold text-secondary" style="font-size: .9rem;">
                <span class="aspect-title-icon" aria-hidden="true">
                    <svg viewBox="0 0 16 16" fill="none" role="img" focusable="false">
                        <rect x="1.5" y="1.5" width="4" height="4" rx="0.5"></rect>
                        <rect x="6" y="1.5" width="4" height="4" rx="0.5"></rect>
                        <rect x="10.5" y="1.5" width="4" height="4" rx="0.5"></rect>
                        <rect x="1.5" y="6" width="4" height="4" rx="0.5"></rect>
                        <rect x="6" y="6" width="4" height="4" rx="0.5"></rect>
                        <rect x="10.5" y="6" width="4" height="4" rx="0.5"></rect>
                        <rect x="1.5" y="10.5" width="4" height="4" rx="0.5"></rect>
                        <rect x="6" y="10.5" width="4" height="4" rx="0.5"></rect>
                        <rect x="10.5" y="10.5" width="4" height="4" rx="0.5"></rect>
                    </svg>
                </span>
                {{ $titleText ?: '' }}
            </h6>
        </div>

        <div class="aspect-body p-2 syn-stack-body">
            @if (count($people) > 1)
                <div class="mb-2">
                    <div class="d-flex align-items-center gap-2 flex-nowrap">
                        <div style="flex:1 1 0; min-width:0;">
                            <select class="form-select form-select-sm w-100" data-syn-stack-left="{{ $uid }}">
                                @foreach ($people as $p)
                                    <option value="{{ $p['slug'] }}" {{ $p['slug'] === $defaultLeft ? 'selected' : '' }}>
                                        {{ $p['name'] }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <span class="d-inline-flex align-items-center justify-content-center border rounded-circle text-muted"
                            title="{{ t('compare', 'Comparar') }}"
                            style="width:30px; height:30px; min-width:30px;">
                            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M16 3h5v5"></path>
                                <path d="M8 21H3v-5"></path>
                                <path d="M21 3l-7 7"></path>
                                <path d="M3 21l7-7"></path>
                            </svg>
                        </span>

                        <div style="flex:1 1 0; min-width:0;">
                            <select class="form-select form-select-sm w-100" data-syn-stack-right="{{ $uid }}">
                                @foreach ($people as $p)
                                    <option value="{{ $p['slug'] }}" {{ $p['slug'] === $defaultRight ? 'selected' : '' }}>
                                        {{ $p['name'] }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            @endif

            @foreach ($preparedBlocks as $idx => $b)
                <div data-syn-stack-pane="{{ $uid }}"
                    data-syn-pair-key="{{ $b['_pairKey'] }}"
                    style="display: {{ $b['_pairKey'] === $defaultPairKey ? 'block' : 'none' }};">
                    @if (!empty($b['grid']))
                        @include('frontend.panel.tabs.synastry-grid', [
                            'synastryGrid' => $b['grid'] ?? null,
                            'personA' => $b['personA'] ?? [],
                            'personB' => $b['personB'] ?? [],
                            'hideHeader' => true,
                            'wrapCard' => false,
                        ])
                    @else
                        <div class="text-muted small p-2">{{ t('aspect-grid-not-found') }}</div>
                    @endif
                </div>
            @endforeach

            <div class="text-muted small p-2"
                data-syn-stack-empty="{{ $uid }}"
                style="display:none;">
                {{ t('no-aspect-table-for-selected', 'No se encontró tabla de aspects para las personas seleccionadas.') }}
            </div>
        </div>
    </div>
@endif