<div class="grid gap-5 sm:grid-cols-2">
    <div>
        <label for="host" class="text-sm font-bold text-slate-700 dark:text-slate-200">DB Host</label>
        <input id="host" name="host" value="{{ old('host', $database['host'] ?? '127.0.0.1') }}" required class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-white">
    </div>

    <div>
        <label for="port" class="text-sm font-bold text-slate-700 dark:text-slate-200">DB Port</label>
        <input id="port" name="port" value="{{ old('port', $database['port'] ?? '3306') }}" required class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-white">
    </div>

    <div>
        <label for="database" class="text-sm font-bold text-slate-700 dark:text-slate-200">DB Database</label>
        <input id="database" name="database" value="{{ old('database', $database['database'] ?? '') }}" required class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-white">
    </div>

    <div>
        <label for="username" class="text-sm font-bold text-slate-700 dark:text-slate-200">DB Username</label>
        <input id="username" name="username" value="{{ old('username', $database['username'] ?? '') }}" required class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-white">
    </div>

    <div class="sm:col-span-2">
        <label for="password" class="text-sm font-bold text-slate-700 dark:text-slate-200">DB Password</label>
        <input id="password" name="password" type="password" autocomplete="new-password" class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-white">
        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">The installer will not print this value back to you. After a successful test, you can leave it blank to reuse the saved password.</p>
    </div>
</div>
