@extends('layouts.admin')

@section('title', 'License '.$license->license_key)
@section('heading', 'License Detail')
@section('subheading', 'View and manage license information and actions')

@php
    $canManage = auth()->user()?->isOwner() ?? false;
@endphp

@section('content')
    <div x-data="licenseShow" class="mx-auto max-w-7xl">
        {{-- No items-start: the right grid cell must stretch to the height of
             the main column or the sticky actions panel has no room to travel. --}}
        <div class="grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-5">

            {{-- ── Main column ─────────────────────────────────────────── --}}
            <div class="min-w-0 space-y-4 lg:col-span-2 lg:space-y-5">
                @include('licenses.partials.overview')
                @include('licenses.partials.timeline')
            </div>

            {{-- ── Actions column ──────────────────────────────────────── --}}
            <div class="min-w-0">
                @if ($canManage)
                    @include('licenses.partials.actions')
                @else
                    {{-- Viewers can read everything; the state-changing routes
                         are owner-only, so the panel is not rendered for them
                         rather than rendered and refused. --}}
                    <section class="surface p-5">
                        <h2 class="text-sm font-semibold text-slate-900 dark:text-white">Owner Actions</h2>
                        <p class="mt-1.5 text-xs leading-relaxed text-slate-500 dark:text-slate-400">
                            Renewing, suspending or revoking this license requires the owner account.
                        </p>
                    </section>

                    <a href="{{ route('licenses.index') }}"
                       class="surface surface-hover group mt-4 flex items-center gap-3 p-4">
                        <span class="grid size-9 shrink-0 place-items-center rounded-full bg-slate-100 text-slate-500
                                     transition group-hover:bg-brand-50 group-hover:text-brand-600
                                     dark:bg-white/[0.05] dark:text-slate-400 dark:group-hover:bg-brand-500/10
                                     dark:group-hover:text-brand-400" aria-hidden="true">
                            <x-icon name="chevron-left" class="size-4" />
                        </span>
                        <span class="min-w-0">
                            <span class="block text-sm font-semibold text-slate-900 dark:text-white">Back to licenses</span>
                            <span class="block text-[11px] text-slate-500 dark:text-slate-400">Return to all licenses list</span>
                        </span>
                    </a>
                @endif
            </div>
        </div>

        @if ($canManage)
            @include('licenses.partials.confirm')
        @endif

        {{-- ── Toast ───────────────────────────────────────────────────── --}}
        <div x-show="toastOpen" x-cloak
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="translate-y-2 opacity-0"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-end="translate-y-2 opacity-0"
             role="status" aria-live="polite"
             class="pointer-events-none fixed bottom-6 left-1/2 z-[60] -translate-x-1/2 rounded-xl bg-slate-900 px-4 py-2.5
                    text-sm font-medium text-white shadow-xl ring-1 ring-white/10 dark:bg-shell-raised">
            <span class="flex items-center gap-2">
                <x-icon name="check-circle" class="size-4 text-emerald-400" />
                <span x-text="toastMessage"></span>
            </span>
        </div>
    </div>
@endsection