<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NUTREN JUNIOR - PHOTO 2026</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

  <style>
    @font-face {
      font-family: 'MyCustomFont';
      font-weight: normal;
      font-style: normal;
    }

    body {
      font-family: 'MyCustomFont', sans-serif;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, #1e3a8a, #60a5fa);
      background-repeat: no-repeat;
      background-attachment: fixed;
    }

    .container {
      background-color: #ffffff66;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .header h1 {
      font-size: 24px;
      color: #4B1606;
    }

    .header button {
      background-color: #4a90e2;
      color: #E3C766;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
    }

    .search-bar {
      display: flex;
      justify-content: flex-start;
    }

    .search-bar input {
      padding: 10px;
      border: 1px solid #E3C766;
      border-radius: 5px;
      width: 200px;
    }

    .search-bar button {
      padding: 10px;
      border: 1px solid #E3C766;
      border-radius: 5px;
      width: 80px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th,
    td {
      padding: 15px;
      text-align: left;
      border-bottom: 1px solid #E3C766;
    }

    th {
      background-color: #ffffc8;
      color: #4b1606;
    }

    td img {
      border-radius: 20%;
      width: 50px;
      height: 50px;
    }

    .actions button {
      background-color: #ffffff;
      border: 1px solid #e0e0e0;
      padding: 5px 10px;
      border-radius: 5px;
      cursor: pointer;
      margin-right: 5px;
    }

    .actions .edit {
      color: #4a90e2;
    }

    .actions .delete {
      color: #e74c3c;
    }

    .table-region {
      width: 100%;
      border-collapse: collapse;
      min-width: 600px;
    }

    .table-region th,
    .table-region td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: center;
      white-space: nowrap;
    }

    .table-region th {
      background: #2563eb;
      color: white;
    }

    .btn {
      padding: 6px 10px;
      text-decoration: none;
      border-radius: 5px;
      margin-right: 5px;
    }

    .btn-csv {
      background: #22c55e;
      color: white;
    }

    .btn-excel {
      background: #f59e0b;
      color: white;
    }

    .table-responsive {
      width: 100%;
      overflow-x: auto;
    }

    .action-cell button {
      margin: 2px;
    }

    @media (max-width: 768px) {
      .table-region {
        font-size: 14px;
      }

      .action-cell {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .action-cell button {
        width: 100%;
      }
    }
  </style>
</head>

<body>
  <main>
    <div class="container">
      <header class="d-flex flex-wrap justify-content-center py-2 mb-4 border-bottom">
        <a href="/admin/index" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
          <img src="/img/LogoApp.png" height="35px"> &nbsp;&nbsp;&nbsp;
          <span style="color:black" class="fs-4">NUTREN JUNIOR - PHOTO 2026</span>
        </a>
        <ul class="nav nav-underline" style="align-items: center !important;">
          <li class="nav-item"><a href="/admin/index" style="color:black" class="nav-link <%= tabActive == 'index' ? "active" : '' %>" aria-current="page">Trang Chủ</a></li>
          <li class="nav-item"><a href="/admin/photorecord" style="color:black" class="nav-link <%= tabActive == 'photorecord' ? "active" : '' %>">Bảng dữ liệu</a></li>
          <li class="nav-item"><a href="/admin/information" style="color:black" class="nav-link <%= tabActive == 'information' ? "active" : '' %>">Thống kê dữ liệu</a></li>
          <li class="nav-item"><a href="/admin/reward-summary" style="color:black" class="nav-link <%= tabActive == 'reward-summary' ? "active" : '' %>">Thống kê quà</a></li>
          <li class="nav-item"><a href="/admin/report" style="color:black" class="nav-link <%= tabActive == 'report' ? "active" : '' %>">Báo cáo</a></li>
          <li class="nav-item"><a href="#" style="color:black" class="nav-link" id="logoutButton">Đăng Xuất</a></li>
        </ul>
      </header>
