@extends('install.layout')

@section('content')
<div><h1>Database</h1><p class="iq-muted" style="margin:4px 0 0">Create these in <b>cPanel → MySQL® Databases</b>: a database, a user, then <b>Add User To Database</b> with <b>All Privileges</b>.</p></div>

@error('database')
  <div class="iq-banner danger"><x-iq.icon name="alert" /><div><b>Couldn't connect.</b> {{ $message }}</div></div>
@enderror

<form method="POST" action="{{ route('install.database.save') }}" class="iq-stack">
  @csrf
  <x-iq.field label="Database name" name="database" help="cPanel adds your username in front, e.g. myuser_inlynq."><x-iq.input name="database" :value="$db['database'] ?? ''" required autocomplete="off" /></x-iq.field>
  <x-iq.field label="Database user" name="username"><x-iq.input name="username" :value="$db['username'] ?? ''" required autocomplete="off" /></x-iq.field>
  <x-iq.field label="Database password" name="password"><x-iq.input type="password" name="password" autocomplete="new-password" /></x-iq.field>
  <div class="iq-grid-2">
    <x-iq.field label="Host" name="host" help="Usually localhost."><x-iq.input name="host" :value="$db['host'] ?? 'localhost'" required /></x-iq.field>
    <x-iq.field label="Port" name="port"><x-iq.input name="port" :value="$db['port'] ?? 3306" inputmode="numeric" required /></x-iq.field>
  </div>
  <button class="iq-btn iq-btn-primary iq-btn-lg iq-btn-block">Test connection and continue</button>
</form>
@endsection