@php
    $lbodevVariableGroups = app(\App\Services\lbodev_TemplateVariableService::class)->lbodev_getGroupedForUi();
@endphp

@once
    @push('styles')
    <style>
        .lbodev-template-editor__main-col > .form-group:last-child {
            margin-bottom: 0;
        }

        .lbodev-template-editor__sidebar {
            position: sticky;
            top: 70px;
            max-height: calc(100vh - 90px);
            overflow-y: auto;
            padding-right: 4px;
        }

        .lbodev-template-editor__sidebar::-webkit-scrollbar {
            width: 6px;
        }

        .lbodev-template-editor__sidebar::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.15);
            border-radius: 3px;
        }

        .lbodev-var-card {
            border: 1px solid #ebedf2;
            border-radius: 6px;
            background: #fff;
            margin-bottom: 12px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        .lbodev-var-card__header {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 12px 14px 8px;
            border-bottom: 1px solid #f4f5f8;
        }

        .lbodev-var-card__icon {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 16px;
        }

        .lbodev-var-card__title {
            font-size: 13px;
            font-weight: 600;
            margin: 0 0 2px;
            line-height: 1.3;
        }

        .lbodev-var-card__desc {
            font-size: 11px;
            color: #6c757d;
            margin: 0;
            line-height: 1.35;
        }

        .lbodev-var-card__body {
            padding: 8px 10px 12px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .lbodev-var-card__body .contract-key-btn {
            font-size: 10px;
            padding: 4px 8px;
            line-height: 1.2;
            border-radius: 4px;
            max-width: 100%;
            white-space: normal;
            text-align: left;
            word-break: break-all;
        }

        .lbodev-template-editor__hint {
            font-size: 12px;
            color: #6c757d;
            margin-bottom: 12px;
            padding: 10px 12px;
            background: #f7f8fa;
            border-radius: 6px;
            border-left: 3px solid #5867dd;
        }

        .lbodev-template-editor__hint i {
            color: #5867dd;
            margin-right: 4px;
        }

        @media (max-width: 991.98px) {
            .lbodev-template-editor__sidebar {
                position: static;
                max-height: none;
                margin-bottom: 20px;
            }
        }
    </style>
    @endpush
@endonce

<aside class="lbodev-template-editor__sidebar" aria-label="Variáveis do contrato">
    <p class="lbodev-template-editor__hint">
        <i class="la la-info-circle"></i>
        Clique em uma variável para inserir no cursor do editor. As usadas no texto ficam destacadas.
    </p>

    @foreach ($lbodevVariableGroups as $group)
        @php
            $accent = $group['accent'];
            $iconBg = match ($accent) {
                'success' => 'rgba(52, 191, 163, 0.12)',
                'warning' => 'rgba(255, 184, 34, 0.15)',
                default => 'rgba(88, 103, 221, 0.12)',
            };
            $iconColor = match ($accent) {
                'success' => '#34bfa3',
                'warning' => '#ffb822',
                default => '#5867dd',
            };
            $borderColor = match ($accent) {
                'success' => '#34bfa3',
                'warning' => '#ffb822',
                default => '#5867dd',
            };
        @endphp
        <div class="lbodev-var-card" data-variable-group-card="{{ $group['id'] }}" style="border-left: 3px solid {{ $borderColor }};">
            <div class="lbodev-var-card__header">
                <span class="lbodev-var-card__icon" style="background: {{ $iconBg }}; color: {{ $iconColor }};">
                    <i class="la {{ $group['icon'] }}"></i>
                </span>
                <div>
                    <p class="lbodev-var-card__title">Variáveis da {{ $group['title'] }}</p>
                    <p class="lbodev-var-card__desc">{{ $group['description'] }}</p>
                </div>
            </div>
            <div class="lbodev-var-card__body">
                @foreach ($group['variables'] as $key => $desc)
                    <button
                        type="button"
                        class="btn btn-sm btn-outline-{{ $accent }} contract-key-btn"
                        data-key="{{ $key }}"
                        data-variable-group="{{ $group['id'] }}"
                        title="{{ $desc }}"
                    >{{ $key }}</button>
                @endforeach
            </div>
        </div>
    @endforeach
</aside>