@extends('layouts.install')
@section('title', __('Requirements'))
@section('content')
    <h3 class="fw-bold mb-1" style="letter-spacing:-.03em">{{ __('Server requirements') }}</h3>
    <p class="text-muted mb-3">{{ __('Everything below must be green before continuing.') }}</p>
    <style>.lf-req{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem .6rem}.lf-req>div{display:flex;justify-content:space-between;align-items:center;padding:.35rem .6rem;border:1px solid #eef0f4;border-radius:8px;font-size:.82rem;background:#fff}.lf-req .badge{font-size:.62rem;padding:.25em .5em}@media(max-width:480px){.lf-req{grid-template-columns:1fr}}</style>
    <div class="card mb-3"><div class="card-header py-2 small fw-semibold">{{ __('PHP & extensions') }}</div><div class="card-body p-2"><div class="lf-req">
        @foreach($checks as $label => $ok)<div><span>{{ $label }}</span><span class="badge {{ $ok ? 'bg-success' : 'bg-danger' }}">{{ $ok ? __('OK') : __('Missing') }}</span></div>@endforeach
        @foreach($optional as $label => $ok)<div class="text-muted"><span>{{ $label }} <small>({{ __('optional') }})</small></span><span class="badge {{ $ok ? 'bg-success' : 'bg-secondary' }}">{{ $ok ? __('OK') : __('Not loaded') }}</span></div>@endforeach
    </div></div></div>
    <div class="card mb-3"><div class="card-header py-2 small fw-semibold">{{ __('Writable paths') }}</div><div class="card-body p-2"><div class="lf-req">
        @foreach($writable as $path => $ok)<div><code class="small">{{ $path }}</code><span class="badge {{ $ok ? 'bg-success' : 'bg-danger' }}">{{ $ok ? __('Writable') : __('Not writable') }}</span></div>@endforeach
    </div></div></div>
    <div class="d-flex justify-content-between">
        <a href="{{ route('install.requirements') }}" class="btn btn-light"><i class="bi bi-arrow-repeat me-1"></i>{{ __('Re-check') }}</a>
        <a href="{{ $ok ? route('install.database') : '#' }}" class="btn btn-primary {{ $ok ? '' : 'disabled' }}">{{ __('Continue') }} <i class="bi bi-arrow-right ms-1"></i></a>
    </div>
@endsection