<?php require __DIR__ . '/settings_nav.php'; ?>
<div class="mb-3">
    <h2 class="mb-1"><?= h(t('data.heading')) ?></h2>
    <div class="text-muted"><?= h(t('data.intro')) ?></div>
</div>
<?php if ($status === 'reset'): ?><div class="alert alert-success">
    <?= h(t('data.reset_success', ['backup' => $backup])) ?></div><?php elseif ($status === 'demo'): ?><div
    class="alert alert-success"><?= h(t('data.demo_success', ['backup' => $backup])) ?></div><?php endif; ?>
<?php if ($error !== ''): ?><div class="alert alert-danger">⚠️ <?= h($error) ?></div><?php endif; ?>
<div class="row g-3 mb-4">
    <div class="col-md-6">
        <div class="card card-sm">
            <div class="card-body">
                <div class="text-muted"><?= h(t('data.animals')) ?></div>
                <div class="h1 mb-0"><?= (int)$counts['animals'] ?></div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card card-sm">
            <div class="card-body">
                <div class="text-muted"><?= h(t('data.contacts')) ?></div>
                <div class="h1 mb-0"><?= (int)$counts['contacts'] ?></div>
            </div>
        </div>
    </div>
</div>
<div class="alert alert-warning"><strong><?= h(t('data.destructive')) ?></strong> <?= h(t('data.destructive_help')) ?>
</div>
<div class="row g-3">
    <div class="col-lg-6">
        <form class="card h-100 border-danger" method="post" action="/settings/data/reset"
            onsubmit="return confirm(<?= h(json_encode(t('data.reset_confirm'), JSON_HEX_APOS | JSON_HEX_QUOT)) ?>);">
            <input type="hidden" name="csrf" value="<?= h(Auth::csrf()) ?>">
            <div class="card-status-top bg-danger"></div>
            <div class="card-header">
                <h3 class="card-title"><?= h(t('data.reset')) ?></h3>
            </div>
            <div class="card-body">
                <p><?= h(t('data.reset_help')) ?></p><label
                    class="form-label"><?= h(t('data.confirmation')) ?></label><input class="form-control"
                    name="confirmation" required autocomplete="off" placeholder="<?= h(t('data.type_reset')) ?>">
                <div class="form-hint"><?= h(t('data.exact_phrase')) ?>
                    <strong><?= h(t('data.confirm_reset_phrase')) ?></strong></div>
            </div>
            <div class="card-footer"><button class="btn btn-danger w-100"><?= h(t('data.backup_reset')) ?></button>
            </div>
        </form>
    </div>
    <div class="col-lg-6">
        <form class="card h-100 border-purple" method="post" action="/settings/data/demo"
            onsubmit="return confirm(<?= h(json_encode(t('data.demo_confirm'), JSON_HEX_APOS | JSON_HEX_QUOT)) ?>);">
            <input type="hidden" name="csrf" value="<?= h(Auth::csrf()) ?>">
            <div class="card-status-top bg-purple"></div>
            <div class="card-header">
                <h3 class="card-title"><?= h(t('data.demo')) ?></h3>
            </div>
            <div class="card-body">
                <p><?= h(t('data.demo_help')) ?></p><label
                    class="form-label"><?= h(t('data.confirmation')) ?></label><input class="form-control"
                    name="confirmation" required autocomplete="off" placeholder="<?= h(t('data.type_demo')) ?>">
                <div class="form-hint"><?= h(t('data.exact_phrase')) ?>
                    <strong><?= h(t('data.confirm_demo_phrase')) ?></strong></div>
            </div>
            <div class="card-footer"><button class="btn btn-purple w-100"><?= h(t('data.backup_demo')) ?></button></div>
        </form>
    </div>
</div>
