@php
    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('subscription.read_only.title')],
    ];
@endphp

<x-ui.layout.page
    :title="__('subscription.read_only.title')"
    :subtitle="__('subscription.read_only.subtitle')"
    page-icon="fe fe-eye"
    :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') }};">
                        {{ __('subscription.read_only.title') }}
                    </h4>
                    <p class="text-muted mb-0">
                        {{ __('subscription.read_only.body') }}
                    </p>
                </div>
            </div>

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