@extends('layouts.admin')

@section('title', 'New Admin — OAH')

@section('content')
<x-admin.nav :show-title="false" />

<div class="mx-auto max-w-[min(100%,92rem)] px-4 pt-8 pb-16 sm:px-6 sm:pt-10">
    <div class="mb-6">
        <a href="{{ route('admin.admins.index') }}" class="text-sm font-semibold text-oah-muted hover:text-oah-black">
            ← Back to admins
        </a>
    </div>

    <div class="mx-auto max-w-2xl rounded-2xl border border-neutral-200 bg-white shadow-oah overflow-hidden">
        <div class="border-b border-neutral-100 px-5 pt-8 pb-6 sm:px-8 sm:pt-10">
            <h1 class="text-xl font-extrabold uppercase tracking-tight text-oah-black sm:text-2xl">New admin</h1>
            <p class="mt-2 text-sm text-oah-muted">A password will be generated and sent to the Email address below.</p>
        </div>

        <div class="px-5 py-8 sm:px-8">
            @if ($errors->any())
                <x-oah.alert type="error" class="!mt-0 mb-6">
                    <ul class="space-y-1">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
                </x-oah.alert>
            @endif

            <form method="POST" action="{{ route('admin.admins.store') }}" class="space-y-6">
                @csrf

                <x-oah.field label="Admin name" for="admin_name" required>
                    <input
                        type="text"
                        id="admin_name"
                        name="name"
                        value="{{ old('name') }}"
                        required
                        class="oah-input"
                        autocomplete="name"
                        placeholder="e.g. Jane Smith"
                    >
                </x-oah.field>

                <x-oah.field label="Admin Email" for="admin_email" required>
                    <input
                        type="email"
                        id="admin_email"
                        name="email"
                        value="{{ old('email') }}"
                        required
                        class="oah-input"
                        autocomplete="email"
                        placeholder="admin@example.com"
                    >
                </x-oah.field>

                <div class="flex flex-col-reverse gap-3 border-t border-neutral-100 pt-5 sm:flex-row sm:justify-end">
                    <a href="{{ route('admin.admins.index') }}" class="rounded-lg border border-neutral-300 px-5 py-2.5 text-sm font-medium hover:bg-neutral-50">
                        Cancel
                    </a>
                    <button type="submit" class="btn-oah rounded-lg px-6 py-2.5 text-sm font-bold">
                        Create admin
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection