{{--
    brafa Systems — Add role.
    Livewire backing: App\Http\Livewire\LaravelExamples\Roles\Create.
    Bindings preserved: wire:submit.prevent="store", wire:model.lazy name/
    description, @error, route('role-management').
--}}
<div class="brafa-screen">
    <section class="card card--pad-lg" style="max-width: 640px;">
        <div class="spread" style="margin-bottom: 24px;">
            <div>
                <h3 class="card-heading" style="margin: 0;">Add role</h3>
                <span class="subtle" style="font-size: 13px;">Create a new role.</span>
            </div>
            <a class="btn btn--outline btn--sm" href="{{ route('role-management') }}">
                <x-lucide name="arrow-left" size="14" /> Back to list
            </a>
        </div>

        <form wire:submit.prevent="store">
            <div class="input-row input-row--single">
                <div>
                    <label class="field-label" for="exampleInputname">Role name</label>
                    <input wire:model.lazy="name" type="text" id="exampleInputname" class="input @error('name') is-invalid @enderror" placeholder="Enter name">
                    @error('name') <p class="field-error">{{ $message }}</p> @enderror
                </div>
            </div>
            <div class="input-row input-row--single">
                <div>
                    <label class="field-label" for="description">Role description</label>
                    <textarea wire:model.lazy="description" id="description" rows="3" class="textarea @error('description') is-invalid @enderror" placeholder="Description"></textarea>
                    @error('description') <p class="field-error">{{ $message }}</p> @enderror
                </div>
            </div>
            <div class="hstack" style="margin-top: 4px;">
                <button type="submit" class="btn">Create role</button>
                <a class="btn btn--outline" href="{{ route('role-management') }}">Cancel</a>
            </div>
        </form>
    </section>
</div>
@push('js')
    <script src="{{ asset('assets') }}/js/plugins/perfect-scrollbar.min.js"></script>
@endpush