<!DOCTYPE html> 
<html>
<head>
  <title>Dashboard Peserta</title>

  <!-- BOOTSTRAP -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- ICON -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

  <style>
    body {
      background: #f4f6f9;
      font-family: 'Segoe UI', sans-serif;
    }

    /* NAVBAR */
    .navbar-custom {
      background: linear-gradient(90deg, #e60023, #b8001c);
      padding: 12px 0;
    }

    .navbar-brand {
      color: white;
      font-weight: 600;
      font-size: 18px;
    }

    /* PROFILE HEADER */
    .profile-box {
      background: white;
      padding: 22px 25px;
      border-radius: 15px;
      margin-top: 25px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .profile-icon {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      background: #e60023;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

    .profile-info h5 {
      margin: 0;
      font-weight: 600;
      line-height: 1.3;
    }

    /* TEXT CLEAN */
    .profile-sub {
      color: #777;
      font-size: 14px;
      margin-top: 4px;
    }

    /* MENU CARD */
    .card-menu {
      background: white;
      border-radius: 18px;
      padding: 30px;
      text-align: center;
      box-shadow: 0 6px 18px rgba(0,0,0,0.08);
      transition: all 0.3s ease;
      cursor: pointer;
      height: 100%;
    }

    .card-menu:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 25px rgba(0,0,0,0.12);
    }

    .icon {
      font-size: 45px;
      color: #e60023;
      margin-bottom: 10px;
    }

    .card-menu h5 {
      font-weight: 600;
    }

    .card-menu p {
      color: #777;
      font-size: 14px;
    }

    /* RESPONSIVE */
    @media(max-width: 768px) {
      .profile-box {
        flex-direction: column;
        text-align: center;
      }

      .card-menu {
        padding: 20px;
      }
    }
  </style>
</head>

<body>

<!-- NAVBAR -->
<nav class="navbar navbar-custom">
  <div class="container d-flex justify-content-between align-items-center">
    <span class="navbar-brand">
      <i class="bi bi-building"></i> Dashboard Peserta
    </span>

    <a href="/logout" class="btn btn-light btn-sm">
      <i class="bi bi-box-arrow-right"></i> Logout
    </a>
  </div>
</nav>

<div class="container">

  <!-- PROFILE HEADER -->
  <div class="profile-box">
    
    <div class="profile-icon">
      <i class="bi bi-person-fill"></i>
    </div>

    <div class="profile-info">
      <h5>
        Selamat Datang
        <%= user.username %>
      </h5>

      <!-- TANPA LABEL (CLEAN KE BAWAH) -->
      <div class="profile-sub">
        <%= user.instansi %>
      </div>

      <div class="profile-sub">
        <%= user.bagian %>
      </div>
    </div>

  </div>

  <!-- MENU -->
  <div class="row mt-4 g-4">

    <!-- ABSEN -->
    <div class="col-md-6">
      <div class="card-menu" onclick="location.href='/absen'">
        <div class="icon">
          <i class="bi bi-camera-fill"></i>
        </div>
        <h5>Absensi</h5>
        <p>Melakukan absensi kehadiran</p>
      </div>
    </div>

    <!-- RIWAYAT -->
    <div class="col-md-6">
      <div class="card-menu" onclick="location.href='/riwayat'">
        <div class="icon">
          <i class="bi bi-clock-history"></i>
        </div>
        <h5>Riwayat Absensi</h5>
        <p>Melihat histori kehadiran</p>
      </div>
    </div>

  </div>

</div>

</body>
</html>