<?php


$pageTitle = 'Database';
$pageDesc = 'Configure the connection to your MySQL database';

ob_start();
?>

<?php if (!empty($error)): ?>
    <div class="alert alert-error"><?= htmlspecialchars($error) ?></div>
<?php endif; ?>

<form method="post" action="/install/database">
    <?= Router::csrfField() ?>

    <div class="form-group">
        <label class="form-label" for="db_host">Database Host <span class="required">*</span></label>
        <input type="text" id="db_host" name="db_host" class="form-input"
               value="<?= htmlspecialchars($_POST['db_host'] ?? '127.0.0.1') ?>"
               placeholder="127.0.0.1">
        <div class="form-hint">Usually 127.0.0.1 or localhost</div>
    </div>

    <div class="form-group">
        <label class="form-label" for="db_name">Database Name <span class="required">*</span></label>
        <input type="text" id="db_name" name="db_name" class="form-input"
               value="<?= htmlspecialchars($_POST['db_name'] ?? '') ?>"
               placeholder="tubepress" required>
        <div class="form-hint">The database will be created automatically if it does not exist</div>
    </div>

    <div class="form-row">
        <div class="form-group">
            <label class="form-label" for="db_user">Username <span class="required">*</span></label>
            <input type="text" id="db_user" name="db_user" class="form-input"
                   value="<?= htmlspecialchars($_POST['db_user'] ?? '') ?>"
                   placeholder="root" required>
        </div>

        <div class="form-group">
            <label class="form-label" for="db_password">Password</label>
            <input type="password" id="db_password" name="db_password" class="form-input"
                   value=""
                   placeholder="Password">
        </div>
    </div>

    <div style="margin-top: 8px; display: flex; justify-content: space-between; align-items: center;">
        <a href="/install" class="btn btn-secondary">Back</a>
        <button type="submit" id="dbBtn" class="btn btn-primary">Test & Continue</button>
    </div>
</form>
<script>
document.querySelector('form').addEventListener('submit', function() {
    var btn = document.getElementById('dbBtn');
    btn.disabled = true;
    btn.textContent = 'Connecting...';
});
</script>

<?php
$content = ob_get_clean();
require APP_ROOT . '/templates/install/layout.php';
