<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Edit Department</title>

  <link rel="stylesheet" href="/css/style.css">
</head>

<body>

  <header>
    <h1>Edit Department</h1>
    <p>Update the department information</p>
  </header>

  <main class="form-container">

    <a href="/departments" class="back-button">
      ← Back to Departments
    </a>

    <form
      action="/departments/<%= department.id %>/edit"
      method="POST"
    >

      <div class="form-group">
        <label for="name">Department Name</label>

        <input
          type="text"
          id="name"
          name="name"
          value="<%= department.name %>"
          required
        >
      </div>

      <div class="form-group">
        <label for="description">Description</label>

        <input
          type="text"
          id="description"
          name="description"
          value="<%= department.description || '' %>"
        >
      </div>

      <button type="submit" class="submit-button">
        Update Department
      </button>

    </form>

  </main>

</body>
</html>