@extends('layouts.install')

@section('content')

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

    @if (! $allLoaded)
        <div class="mb-4 flex items-start gap-2 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-red-800" role="alert">
            <i class="fa fa-times-circle mt-1 shrink-0" aria-hidden="true"></i>
            <div>
                <strong>Oh snap!</strong> Your system does not meet the requirements.
                You have to fix them in order to continue.
            </div>
        </div>
    @endif

    <x-install.card title="System Requirements">
        <ul class="mb-6 divide-y divide-slate-100 rounded-md border border-slate-200">
            @foreach ($requirements as $extension => $loaded)
                <li class="flex items-center justify-between px-4 py-3 {{ ! $loaded ? 'bg-red-50 text-red-800' : '' }}">
                    <span>{{ $extension }}</span>

                    <span class="flex size-6 items-center justify-center rounded-full text-xs text-white {{ $loaded ? 'bg-green-600' : 'bg-red-600' }}">
                        <i class="fa {{ $loaded ? 'fa-check' : 'fa-times' }}" aria-hidden="true"></i>
                    </span>
                </li>
            @endforeach
        </ul>

        <div class="flex justify-end">
            <x-install.button :href="route('install.permissions')" :disabled="! $allLoaded">
                Next
                <i class="fa fa-arrow-right" aria-hidden="true"></i>
            </x-install.button>
        </div>
    </x-install.card>
@stop