<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>Add Attendance</title>

  <link rel="stylesheet" href="/css/style.css">
</head>

<body>

  <header>
    <h1>Add Attendance</h1>
    <p>Enter the employee attendance information</p>
  </header>

  <main class="form-container">

    <a href="/attendance" class="back-button">
      ← Back to Attendance
    </a>

    <form action="/attendance" method="POST">

      <div class="form-group">
        <label for="employee_id">Employee</label>

        <select
          id="employee_id"
          name="employee_id"
          required
        >
          <option value="" disabled selected>
            Select an employee
          </option>

          <% employees.forEach((employee) => { %>
            <option value="<%= employee.id %>">
              <%= employee.full_name %>
            </option>
          <% }); %>
        </select>
      </div>

      <div class="form-group">
  <label for="attendance_date">Attendance Date</label>

  <input
    type="date"
    id="attendance_date"
    name="attendance_date"
    required
  >
</div>

      <div class="form-group">
        <label for="status">Status</label>

        <select
          id="status"
          name="status"
          required
        >
          <option value="" disabled selected>
            Select attendance status
          </option>

          <option value="Present">Present</option>
          <option value="Absent">Absent</option>
          <option value="Late">Late</option>
          <option value="Leave">Leave</option>
        </select>
      </div>

      <div class="form-group">
        <label for="check_in">Check In</label>

        <input
          type="time"
          id="check_in"
          name="check_in"
        >
      </div>

      <div class="form-group">
        <label for="check_out">Check Out</label>

        <input
          type="time"
          id="check_out"
          name="check_out"
        >
      </div>

      <div class="form-group">
        <label for="note">Note</label>

        <textarea
          id="note"
          name="note"
          rows="4"
          placeholder="Enter an optional note"
        ></textarea>
      </div>

      <button type="submit" class="submit-button">
        Save Attendance
      </button>

    </form>

  </main>

</body>
</html>