@extends('layouts.app')

@section('content')
    {{-- ── Page Header ── --}}
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('permissions.index') }}" class="btn btn-ghost btn-sm btn-square">
            <span class="icon-[tabler--arrow-left] size-5"></span>
        </a>
        <div>
            <h1 class="text-2xl font-bold tracking-tight">Edit Permission</h1>
            <p class="text-sm text-base-content/50 mt-0.5">Update permission name</p>
        </div>
    </div>

    <div class="max-w-xl">
        <div class="card bg-base-100 border border-base-200 shadow-sm">
            <div class="card-body p-6">
                <form method="POST" action="{{ route('permissions.update', $permission) }}" class="space-y-5">
                    @csrf
                    @method('PUT')

                    {{-- Permission Name --}}
                    <div>
                        <label class="label mb-1">
                            <span class="label-text font-medium">Permission Name</span>
                            <span class="label-text-alt text-base-content/40">use dot notation e.g. users.create</span>
                        </label>
                        <div class="input w-full @error('name') input-error @enderror">
                            <input type="text" name="name" value="{{ old('name', $permission->name) }}"
                                class="grow font-mono" />
                            <span class="icon-[tabler--key] text-base-content/40 my-auto ms-3 size-5 shrink-0"></span>
                        </div>
                        @error('name')
                            <p class="text-error text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Actions --}}
                    <div class="flex gap-3">
                        <button type="submit" class="btn btn-primary flex-1 gap-2">
                            <span class="icon-[tabler--device-floppy] size-4"></span>
                            Update Permission
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </div>
@endsection