@extends('layouts.app')

@section('content')
    <x-common.page-breadcrumb pageTitle="{{ $title ?? 'Tambah User' }}" />

    <div class="mx-auto max-w-2xl">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Form Tambah User</h3>
            </div>
            <div class="p-5">
                <form action="{{ route('users.store') }}" method="POST">
                    @csrf
                    <div class="space-y-5">
                        <x-form.input
                            name="name"
                            label="Nama"
                            placeholder="Nama lengkap"
                            :required="true"
                        />

                        <x-form.input
                            name="email"
                            label="Email"
                            type="email"
                            placeholder="email@example.com"
                            :required="true"
                        />

                        <x-form.input
                            name="password"
                            label="Password"
                            type="password"
                            placeholder="Min. 8 karakter"
                            :required="true"
                        />

                        <x-form.select
                            name="role"
                            label="Role"
                            placeholder="-- Pilih Role --"
                            :options="$roles"
                            :required="true"
                        />
                    </div>

                    <div class="mt-6 flex items-center justify-end gap-3 border-t border-gray-200 pt-6 dark:border-gray-700">
                        <a href="{{ route('users.index') }}" class="rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                            Batal
                        </a>
                        <button type="submit" class="rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600">
                            Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection