<div class="d-flex flex-wrap align-items-center gap-2 mb-3">
    <div class="me-auto">
        <h2 class="mb-1">📱 <?= h(t('devices.title')) ?></h2>
        <div class="text-muted"><?= h(t('devices.intro')) ?></div>
    </div>
    <form method="post" action="/account/devices/revoke-all"
        onsubmit="return confirm(<?= h(json_encode(t('devices.revoke_all_confirm'), JSON_HEX_APOS | JSON_HEX_QUOT)) ?>)">
        <button class="btn btn-outline-danger"><?= h(t('devices.revoke_all')) ?></button></form>
</div>
<?php if ($saved): ?><div class="alert alert-success">✅ <?= h(t('devices.revoked')) ?></div><?php endif; ?>
<div class="row g-3">
    <?php foreach ($devices as $device): $active = !$device['revoked_at'] && strtotime($device['expires_at']) > time(); ?>
    <div class="col-12 col-lg-6">
        <div class="card h-100">
            <div class="card-body d-flex gap-3">
                <div class="fs-1">📱</div>
                <div class="flex-fill">
                    <div class="d-flex flex-wrap gap-2 align-items-center">
                        <strong><?= h($device['device_name']) ?></strong><?php if ($device['selector'] === $currentSelector): ?><span
                            class="badge bg-green-lt"><?= h(t('devices.this_device')) ?></span><?php endif; ?><span
                            class="badge <?= $active ? 'bg-blue-lt' : 'bg-secondary-lt' ?>"><?= h(t($active ? 'devices.active' : 'devices.inactive')) ?></span>
                    </div>
                    <div class="small text-muted mt-2">
                        <?= h(t('devices.created', ['date' => date('d/m/Y H:i', strtotime($device['created_at']))])) ?><br><?= h(t('devices.last_used', ['date' => date('d/m/Y H:i', strtotime($device['last_used_at']))])) ?><br><?= h(t('devices.expires', ['date' => date('d/m/Y', strtotime($device['expires_at']))])) ?>
                    </div>
                </div><?php if ($active): ?><form method="post" action="/account/devices/revoke"><input type="hidden"
                        name="id" value="<?= (int)$device['id'] ?>"><button class="btn btn-sm btn-outline-danger"
                        title="<?= h(t('devices.revoke')) ?>">×</button></form><?php endif; ?>
            </div>
        </div>
    </div><?php endforeach; ?><?php if (!$devices): ?><div class="col-12">
        <div class="card">
            <div class="card-body text-center text-muted py-5"><?= h(t('devices.none')) ?></div>
        </div>
    </div><?php endif; ?></div>
