<div class="d-flex flex-column gap-4">
  <!-- Change Password Card -->
  <div class="cargoo-card">
    <div class="cargoo-card-header">
      <h5 class="mb-1 fw-bold"><?= __('change_password') ?></h5>
      <p class="text-muted small mb-0"><?= __('security_subtitle') ?></p>
    </div>

    <div class="cargoo-card-body">
      <form action="<?= url('/account/security/password') ?>" method="POST" style="max-width: 500px;">
        <?= Security::csrfField() ?>

        <div class="mb-3">
          <label for="currentPassword" class="form-label"><?= __('current_password') ?> <span class="text-danger">*</span></label>
          <div class="input-group input-group-password">
            <span class="input-group-text bg-light border-end-0 text-muted"><i class="bi bi-key"></i></span>
            <input type="password" class="form-control border-start-0 border-end-0" id="currentPassword" name="current_password" required placeholder="••••••••">
            <button class="btn btn-outline-secondary btn-toggle-password" type="button" data-target="currentPassword">
              <i class="bi bi-eye"></i>
            </button>
          </div>
        </div>

        <div class="mb-3">
          <label for="newPassword" class="form-label"><?= __('new_password') ?> <span class="text-danger">*</span></label>
          <div class="input-group input-group-password">
            <span class="input-group-text bg-light border-end-0 text-muted"><i class="bi bi-lock"></i></span>
            <input type="password" class="form-control border-start-0 border-end-0" id="newPassword" name="new_password" required minlength="8" placeholder="อย่างน้อย 8 ตัวอักษร">
            <button class="btn btn-outline-secondary btn-toggle-password" type="button" data-target="newPassword">
              <i class="bi bi-eye"></i>
            </button>
          </div>
          <div class="form-text text-muted small"><?= __('password_rules') ?></div>
        </div>

        <div class="mb-4">
          <label for="confirmNewPassword" class="form-label"><?= __('confirm_new_password') ?> <span class="text-danger">*</span></label>
          <div class="input-group input-group-password">
            <span class="input-group-text bg-light border-end-0 text-muted"><i class="bi bi-shield-check"></i></span>
            <input type="password" class="form-control border-start-0 border-end-0" id="confirmNewPassword" name="confirm_new_password" required minlength="8" placeholder="พิมพ์รหัสผ่านใหม่อีกครั้ง">
            <button class="btn btn-outline-secondary btn-toggle-password" type="button" data-target="confirmNewPassword">
              <i class="bi bi-eye"></i>
            </button>
          </div>
        </div>

        <button type="submit" class="btn btn-cargoo-primary px-4 py-2">
          <i class="bi bi-shield-check me-1"></i> <?= __('change_password') ?>
        </button>
      </form>
    </div>
  </div>

  <!-- Active Remember-Me Sessions Card -->
  <div class="cargoo-card">
    <div class="cargoo-card-header">
      <h5 class="mb-1 fw-bold">อุปกรณ์ที่เข้าสู่ระบบและจดจำเซสชัน (Remember-Me)</h5>
      <p class="text-muted small mb-0">รายการอุปกรณ์ที่ได้รับอนุญาตให้เข้าสู่ระบบอัตโนมัติ</p>
    </div>

    <div class="cargoo-card-body p-0">
      <?php if (empty($activeSessions)): ?>
        <div class="p-4 text-center text-muted">
          <i class="bi bi-laptop fs-3"></i>
          <p class="mb-0 mt-2 small">ไม่มีเซสชันที่จดจำค้างไว้</p>
        </div>
      <?php else: ?>
        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0">
            <thead class="table-light small">
              <tr>
                <th class="ps-4">อุปกรณ์ / เบราว์เซอร์</th>
                <th>หมายเลข IP</th>
                <th>วันที่สร้าง</th>
                <th>หมดอายุ</th>
              </tr>
            </thead>
            <tbody class="small">
              <?php foreach ($activeSessions as $sess): ?>
                <tr>
                  <td class="ps-4 text-dark font-monospace text-truncate" style="max-width: 250px;">
                    <i class="bi bi-display me-1 text-primary"></i> <?= e($sess['user_agent'] ?? 'Unknown Browser') ?>
                  </td>
                  <td><code><?= e($sess['ip_address'] ?? '-') ?></code></td>
                  <td><?= e(date('d/m/Y H:i', strtotime($sess['created_at']))) ?></td>
                  <td><?= e(date('d/m/Y H:i', strtotime($sess['expires_at']))) ?></td>
                </tr>
              <?php endforeach; ?>
            </tbody>
          </table>
        </div>
      <?php endif; ?>
    </div>
  </div>
</div>
