@extends('layouts.install')

@section('content')

    @include('install.steps', ['steps' => [
        'welcome' => 'selected done',
        'requirements' => 'selected done',
        'permissions' => 'selected done',
        'database' => 'selected'
    ]])

    @if ($errors->any())
        <div class="mb-4 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-red-800" role="alert">
            <ul class="space-y-1">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('install.installation') }}" method="POST">
        @csrf

        <x-install.card title="Database Info">
            <div class="space-y-4">
                <x-install.field
                    name="host"
                    label="Host"
                    hint="Database host. Usually you should enter localhost or mysql."
                />

                <x-install.field
                    name="username"
                    label="Username"
                    hint="Your database username."
                />

                <x-install.field
                    name="password"
                    label="Password"
                    type="password"
                    hint="Database password for provided username."
                />

                <x-install.field
                    name="database"
                    label="Database Name"
                    hint="Name of database where tables should be created."
                />

                <x-install.field
                    name="prefix"
                    label="Tables Prefix"
                    hint="Prefix to put in front of database table names. You can leave it blank if you want."
                />
            </div>

            <div class="mt-6 flex justify-end">
                <x-install.button type="submit">
                    Next
                    <i class="fa fa-arrow-right" aria-hidden="true"></i>
                </x-install.button>
            </div>
        </x-install.card>
    </form>
@stop