<div class="auth-content">
    <h1 class="auth-title"><?= t('install_title') ?></h1>
    <p class="auth-subtitle"><?= t('install_subtitle') ?></p>

    <?php
    $reqFailed  = array_filter($checks['required'], fn($c) => !$c['ok']);
    $optMissing = array_filter($checks['optional'], fn($c) => !$c['ok']);
    $allOk      = empty($reqFailed) && empty($optMissing);
    ?>

    <div class="install-checks">
        <div class="install-checks-header">
            <span><?= t('sys_requirements') ?></span>
            <?php if (!empty($reqFailed)): ?>
                <span class="checks-badge checks-badge--error"><?= t('sys_req_critical_missing') ?></span>
            <?php elseif (!empty($optMissing)): ?>
                <span class="checks-badge checks-badge--warn"><?= t('sys_req_optional_missing') ?></span>
            <?php else: ?>
                <span class="checks-badge checks-badge--ok"><?= t('sys_req_all_ok') ?></span>
            <?php endif; ?>
        </div>
        <ul class="checks-list">
            <?php foreach ($checks['required'] as $c): ?>
            <li class="checks-item">
                <?php if ($c['ok']): ?>
                    <svg class="checks-icon checks-icon--ok" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="15" height="15"><polyline points="20 6 9 17 4 12"/></svg>
                <?php else: ?>
                    <svg class="checks-icon checks-icon--error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="15" height="15"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                <?php endif; ?>
                <span class="checks-label"><?= $c['label'] ?></span>
                <span class="checks-detail"><?= Helper::e($c['detail']) ?></span>
            </li>
            <?php endforeach; ?>
            <?php foreach ($checks['optional'] as $c): ?>
            <li class="checks-item">
                <?php if ($c['ok']): ?>
                    <svg class="checks-icon checks-icon--ok" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="15" height="15"><polyline points="20 6 9 17 4 12"/></svg>
                <?php else: ?>
                    <svg class="checks-icon checks-icon--warn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                <?php endif; ?>
                <span class="checks-label"><?= $c['label'] ?></span>
                <span class="checks-detail"><?= Helper::e($c['detail']) ?> &mdash; <em><?= t('sys_req_optional') ?></em></span>
            </li>
            <?php endforeach; ?>
        </ul>
    </div>

    <style>
    .auth-wrapper { max-width: 620px; }
    .install-checks { border:1px solid var(--border-color); border-radius:var(--border-radius); margin-bottom:24px; overflow:hidden; }
    .install-checks-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--bg-card); border-bottom:1px solid var(--border-color); font-size:.78rem; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.06em; }
    .checks-badge { font-size:.7rem; font-weight:600; padding:2px 8px; border-radius:20px; letter-spacing:.02em; }
    .checks-badge--ok    { background:rgba(34,197,94,.12); color:#16a34a; }
    .checks-badge--warn  { background:rgba(234,179, 8,.12); color:#b45309; }
    .checks-badge--error { background:rgba(239, 68,68,.12); color:#dc2626; }
    .checks-list { list-style:none; margin:0; padding:0; }
    .checks-item { display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid var(--border-color); font-size:.84rem; }
    .checks-item:last-child { border-bottom:none; }
    .checks-icon--ok    { color:#16a34a; flex-shrink:0; }
    .checks-icon--warn  { color:#d97706; flex-shrink:0; }
    .checks-icon--error { color:#dc2626; flex-shrink:0; }
    .checks-label  { font-weight:500; color:var(--text-primary); white-space:nowrap; }
    .checks-detail { color:var(--text-muted); font-size:.78rem; flex:1; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .checks-detail em { font-style:normal; opacity:.7; }
    </style>

    <?php if (!empty($errors)): ?>
    <div class="alert alert-error">
        <?php foreach ($errors as $e): ?>
        <div><?= Helper::e($e) ?></div>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>

    <form method="POST" action="/install" class="auth-form">
        <div class="form-group">
            <label for="app_url" class="form-label"><?= t('app_url') ?></label>
            <input type="url" id="app_url" name="app_url" class="form-input"
                   placeholder="https://example.com"
                   value="<?= Helper::e(Helper::post('app_url', ((!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http') . '://' . ($_SERVER['HTTP_HOST'] ?? '') . APP_BASE)) ?>">
            <span class="form-hint"><?= t('app_url_hint') ?></span>
        </div>
        <div class="form-group">
            <label for="username" class="form-label"><?= t('admin_username') ?></label>
            <input type="text" id="username" name="username" class="form-input" required autofocus
                   value="<?= Helper::e(Helper::post('username', 'admin')) ?>" minlength="3">
        </div>
        <div class="form-group">
            <label for="email" class="form-label"><?= t('admin_email') ?></label>
            <input type="email" id="email" name="email" class="form-input" required
                   value="<?= Helper::e(Helper::post('email')) ?>">
        </div>
        <div class="form-group">
            <label for="password" class="form-label"><?= t('admin_password') ?></label>
            <div class="input-with-toggle">
                <input type="password" id="password" name="password" class="form-input" required minlength="8">
                <button type="button" class="pw-toggle" data-pw-toggle="password">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                </button>
            </div>
        </div>
        <div class="form-group">
            <label for="password_confirm" class="form-label"><?= t('password_confirm') ?></label>
            <input type="password" id="password_confirm" name="password_confirm" class="form-input" required minlength="8">
        </div>
        <button type="submit" class="btn btn-primary btn-block"><?= t('install_btn') ?></button>
    </form>
</div>
<script nonce="<?= csp_nonce() ?>">
function togglePassword(id) {
    const el = document.getElementById(id);
    el.type = el.type === 'password' ? 'text' : 'password';
}
</script>
