@extends('installer.layout')

@section('content')
    <div>
        <p class="text-sm font-bold uppercase tracking-wide text-blue-600 dark:text-blue-300">Database Setup</p>
        <h2 class="mt-2 text-2xl font-black text-slate-950 dark:text-white">Connect your MySQL database.</h2>
        <p class="mt-3 text-sm text-slate-600 dark:text-slate-300">Create the database and database user in cPanel first, then enter those details here. Your password is never shown again after submission.</p>
    </div>

    <form method="POST" action="{{ route('install.database.test') }}" class="mt-6 grid gap-5">
        @csrf
        @include('installer.partials.database-fields')

        <div class="flex flex-col gap-3 sm:flex-row sm:justify-between">
            <a href="{{ route('install.permissions') }}" class="rounded-lg border border-blue-100 px-5 py-2.5 text-center text-sm font-bold text-blue-700 dark:border-blue-900 dark:text-blue-300">Back</a>
            <div class="flex flex-col gap-3 sm:flex-row">
                <button type="submit" class="rounded-lg border border-blue-100 px-5 py-2.5 text-sm font-bold text-blue-700 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">
                    Test Connection
                </button>
                <button type="submit" formaction="{{ route('install.database.save') }}" class="rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-bold text-white hover:bg-blue-700">
                    Save and Continue
                </button>
            </div>
        </div>
    </form>
@endsection