@extends('layouts.admin')

@section('title', 'Admins — 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="rounded-2xl border border-neutral-200 bg-white shadow-oah overflow-hidden">
        <div class="border-b border-neutral-100 px-5 pt-10 pb-8 sm:px-8 sm:pt-12 sm:pb-10">
            <div class="flex flex-col items-start justify-between gap-6 sm:flex-row sm:items-center">
                <div>
                    <h1 class="text-xl font-extrabold uppercase leading-tight tracking-tight text-oah-black sm:text-2xl lg:text-3xl">
                        Admins
                    </h1>
                    <p class="mt-2 text-sm text-oah-muted">
                        Manage admin accounts and send login credentials by Email.
                    </p>
                </div>
                <a href="{{ route('admin.admins.create') }}"
                    class="btn-oah inline-flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-bold">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" d="M12 5v14M5 12h14"/></svg>
                    Add admin
                </a>
            </div>
        </div>

        <div class="px-5 py-6 sm:px-8 sm:py-8">
            @if ($admins->isNotEmpty())
                <x-admin.admins-table :admins="$admins" />
            @else
                <div class="rounded-xl border-2 border-dashed border-neutral-200 bg-neutral-50/50 px-6 py-16 text-center">
                    <p class="font-semibold text-oah-black">No other admins</p>
                    <p class="mt-2 text-sm text-oah-muted">
                        Add an admin and login credentials will be sent to their Email.
                    </p>
                    <a href="{{ route('admin.admins.create') }}" class="btn-oah mt-5 inline-flex rounded-lg px-6 py-2.5 text-sm font-bold">
                        Add admin
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection