<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>Add Employee</title>

  <link rel="stylesheet" href="/css/style.css">
</head>

<body>

  <header>
    <h1>Add New Employee</h1>
    <p>Enter the employee information</p>
  </header>

  <main class="form-container">

    <a href="/employees" class="back-button">
      ← Back to Employees
    </a>

    <form action="/employees" method="POST">

      <div class="form-group">
        <label for="full_name">
          Full Name
        </label>

        <input
          type="text"
          id="full_name"
          name="full_name"
          placeholder="Enter employee full name"
          required
        >
      </div>

      <div class="form-group">
        <label for="email">
          Email
        </label>

        <input
          type="email"
          id="email"
          name="email"
          placeholder="Enter employee email"
          required
        >
      </div>

      <div class="form-group">
        <label for="department_id">
          Department
        </label>

        <select
          id="department_id"
          name="department_id"
          required
        >
          <option value="" disabled selected>
            Select a department
          </option>

          <% departments.forEach((department) => { %>
            <option value="<%= department.id %>">
              <%= department.name %>
            </option>
          <% }); %>
        </select>
      </div>

      <div class="form-group">
        <label for="position">
          Position
        </label>

        <input
          type="text"
          id="position"
          name="position"
          placeholder="Enter employee position"
          required
        >
      </div>

      <div class="form-group">
        <label for="monthly_salary">
          Monthly Salary
        </label>

        <input
          type="number"
          id="monthly_salary"
          name="monthly_salary"
          min="0"
          step="0.01"
          placeholder="Enter monthly salary"
          required
        >
      </div>

      <button
        type="submit"
        class="submit-button"
      >
        Save Employee
      </button>

    </form>

  </main>

</body>
</html>