@extends('layouts.app')
@section('page-title', 'Create Role')

@section('content')
<x-admin-hero-header title="Create New Role" subtitle="Define a role and assign its permissions">
    <x-slot:icon><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 3l7 3v5c0 4.6-2.9 8.7-7 10-4.1-1.3-7-5.4-7-10V6l7-3zm-3 9l2 2 4-4"/></svg></x-slot:icon>
    <x-slot:actions><a href="{{ route('admin.roles.index') }}" class="btn border-white/15 bg-white/15 text-white backdrop-blur hover:bg-white/20 focus:ring-white/30"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>Back to Roles</a></x-slot:actions>
</x-admin-hero-header>

<form method="POST" action="{{ route('admin.roles.store') }}" class="enhanced-form" x-data="permissionsForm(@js(old('permissions', [])))">
    @csrf
    @php($isEdit = false)
    <x-form-shell title="Role information" description="Name the role and configure its system access." icon="role">
        @include('admin.roles.partials.form-fields')
        <x-slot:actions><a href="{{ route('admin.roles.index') }}" class="btn-secondary">Cancel</a><button type="submit" class="btn-primary"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Create Role</button></x-slot:actions>
    </x-form-shell>
</form>
@endsection