@extends('layouts.admin')

@section('page_kicker', 'Access control')
@section('page_title', 'New role')

@section('content')
    <div class="admin-content-card max-w-3xl">
        <form method="POST" action="{{ route('superadmin.rbac.roles.store') }}" class="space-y-6">
            @csrf
            <div>
                <label class="admin-form-label" for="name">Role name</label>
                <input id="name" type="text" name="name" value="{{ old('name') }}" class="admin-input" required pattern="[a-z0-9._-]+" placeholder="e.g. billing_manager">
                <x-input-error :messages="$errors->get('name')" class="mt-2" />
            </div>
            <div>
                <p class="admin-form-label mb-2 normal-case tracking-normal">Permissions</p>
                <div class="max-h-72 space-y-2 overflow-y-auto rounded-xl border border-slate-100 bg-slate-50/80 p-4">
                    @foreach($permissions as $p)
                        <label class="flex cursor-pointer items-start gap-2 text-sm">
                            <input type="checkbox" name="permissions[]" value="{{ $p->id }}" class="admin-checkbox mt-0.5" @checked(in_array($p->id, old('permissions', []), true))>
                            <span class="font-mono text-xs text-slate-800">{{ $p->name }}</span>
                        </label>
                    @endforeach
                </div>
                <x-input-error :messages="$errors->get('permissions')" class="mt-2" />
            </div>
            <div class="flex gap-3">
                <button type="submit" class="admin-btn-primary">Create</button>
                <a href="{{ route('superadmin.rbac.roles.index') }}" class="admin-btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
@endsection