@php
    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('errors.module_locked.breadcrumb')],
    ];
@endphp

<x-ui.layout.page
    :title="__('errors.module_locked.title')"
    :subtitle="__('errors.module_locked.subtitle')"
    page-icon="fe fe-lock"
    :breadcrumbs="$breadcrumbs"
>
    <div class="card border-0 shadow-sm" style="max-width: 640px;">
        <div class="card-body p-4 p-md-5">
            <div class="d-flex align-items-start gap-3 mb-4">
                <span
                    class="avatar avatar-lg rounded d-inline-flex align-items-center justify-content-center flex-shrink-0"
                    style="background: {{ config('theme.gradients.info') }};">
                    <i class="fe fe-lock text-white fs-24"></i>
                </span>
                <div>
                    <h4 class="fw-semibold mb-2" style="color: {{ config('theme.colors.text') }};">
                        {{ __('errors.module_locked.heading', ['module' => $moduleLabel]) }}
                    </h4>
                    <p class="text-muted mb-3">{{ __('errors.module_locked.body') }}</p>
                    <ul class="list-unstyled text-muted small mb-0">
                        <li>
                            <strong class="text-body">{{ __('errors.module_locked.current_plan') }}</strong>
                            {{ $planName ?? __('errors.module_locked.unknown') }}
                        </li>
                        <li class="mt-2">
                            <strong class="text-body">{{ __('errors.module_locked.status') }}</strong>
                            {{ __($subscriptionStatusKey) }}
                        </li>
                        @if ($trialDaysLeft !== null)
                            <li class="mt-2">{{ __('errors.module_locked.trial_line', ['days' => $trialDaysLeft]) }}</li>
                        @endif
                    </ul>
                </div>
            </div>

            <div class="d-flex flex-wrap gap-2">
                <x-ui.buttons.primary :href="$upgradeUrl" icon="fe fe-zap">
                    {{ __('errors.module_locked.upgrade') }}
                </x-ui.buttons.primary>
                <x-ui.buttons.secondary :href="route('dashboard.index')" icon="fe fe-home">
                    {{ __('errors.module_locked.back_dashboard') }}
                </x-ui.buttons.secondary>
            </div>
        </div>
    </div>
</x-ui.layout.page>
