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

        <form wire:submit.prevent="store" enctype="multipart/form-data">
            <div class="d-flex justify-content-center" style="margin-bottom: 18px;">
                <div class="profile-avatar-wrap">
                    @if ($picture)
                        <img src="{{ $picture->temporaryUrl() }}" class="brafa-avatar" style="width:80px;height:80px;" alt="Preview">
                    @else
                        <div class="brafa-avatar" style="width:80px;height:80px;font-size:26px;">+</div>
                    @endif
                    <label for="file-input" class="profile-avatar-edit" title="Select image">
                        <x-lucide name="edit-3" size="13" stroke="#FFFFFF" />
                        <input wire:model="picture" type="file" id="file-input">
                    </label>
                </div>
            </div>
            @error('picture') <p class="field-error" style="text-align:center;">{{ $message }}</p> @enderror

            <div class="input-row">
                <div>
                    <label class="field-label" for="exampleInputname">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>
                    <label class="field-label" for="exampleInputemail">Email</label>
                    <input wire:model.lazy="email" type="email" id="exampleInputemail" class="input @error('email') is-invalid @enderror" placeholder="Enter email">
                    @error('email') <p class="field-error">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="input-row">
                <div>
                    <label class="field-label" for="role">Role</label>
                    <select wire:model.lazy="role_id" id="role" class="select @error('role_id') is-invalid @enderror">
                        @foreach ($roles as $role)
                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                        @endforeach
                    </select>
                    @error('role_id') <p class="field-error">{{ $message }}</p> @enderror
                </div>
                <div></div>
            </div>

            <div class="input-row">
                <div>
                    <label class="field-label" for="examplePassword">Password</label>
                    <input wire:model.lazy="password" type="password" id="examplePassword" class="input @error('password') is-invalid @enderror" placeholder="Enter password">
                    @error('password') <p class="field-error">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="field-label" for="examplePassword2">Confirm password</label>
                    <input wire:model.lazy="passwordConfirmation" type="password" name="passwordConfirmation" id="examplePassword2" class="input" placeholder="Confirm password">
                </div>
            </div>

            <div class="hstack" style="margin-top: 4px;">
                <button type="submit" class="btn">Add user</button>
                <a class="btn btn--outline" href="{{ route('user-management') }}">Cancel</a>
            </div>
        </form>
    </section>
</div>

@push('js')
    <script src="{{ asset('assets') }}/js/plugins/perfect-scrollbar.min.js"></script>
@endpush