@extends('install.layout')

@section('content')
<div><h1>Your admin account</h1><p class="iq-muted" style="margin:4px 0 0">This is you. You'll use it to run the site and to build your own profile.</p></div>

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

<form method="POST" action="{{ route('install.run') }}" class="iq-stack" data-install-form>
  @csrf
  <x-iq.field label="Full name" name="name"><x-iq.input name="name" required maxlength="80" autocomplete="name" /></x-iq.field>
  <x-iq.field label="Your link" name="username"><x-iq.affix name="username" :prefix="request()->getHost().'/'" required maxlength="30" autocomplete="off" /></x-iq.field>
  <x-iq.field label="Email" name="email"><x-iq.input type="email" name="email" required autocomplete="email" /></x-iq.field>
  <div class="iq-grid-2">
    <x-iq.field label="Password" name="password" help="At least 10 characters, with letters and numbers."><x-iq.input type="password" name="password" required autocomplete="new-password" /></x-iq.field>
    <x-iq.field label="Confirm password" name="password_confirmation"><x-iq.input type="password" name="password_confirmation" required autocomplete="new-password" /></x-iq.field>
  </div>
  <div class="iq-row" style="justify-content:space-between">
    <a class="iq-btn iq-btn-quiet" href="{{ route('install.site') }}"><x-iq.icon name="chevronLeft" /> Back</a>
    <button class="iq-btn iq-btn-primary iq-btn-lg" data-install-button>Install InLynq</button>
  </div>
  <p class="iq-help" style="margin:0">Installing creates the database tables and saves your settings. It takes up to a minute.</p>
</form>
@endsection