<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>Edit Expense Category</title>

  <link rel="stylesheet" href="/css/style.css">
</head>

<body>

  <main class="page-container">

    <a
      href="/expense-categories"
      class="back-button"
    >
      ← Back to Categories
    </a>

    <h1 class="page-heading">
      Edit Expense Category
    </h1>

    <div class="form-container">

      <form
        action="/expense-categories/<%= category.id %>/update"
        method="POST"
      >

        <div class="form-group">

          <label for="category_name">
            Category Name
          </label>

          <input
            type="text"
            id="category_name"
            name="category_name"
            value="<%= category.category_name %>"
            maxlength="150"
            required
          >

        </div>

        <div class="form-group">

          <label for="category_code">
            Category Code
          </label>

          <input
            type="text"
            id="category_code"
            name="category_code"
            value="<%= category.category_code || '' %>"
            maxlength="20"
            placeholder="Example: TR"
          >

        </div>

        <button
          type="submit"
          class="submit-button"
        >
          Update Category
        </button>

      </form>

    </div>

  </main>

</body>
</html>