<nav class="dashboard-nav">
    <ul>
      <li>
        <a
          type="button"
          class="btn btn-primary"
          data-bs-toggle="modal"
          data-bs-target="#staticBackdrop"
          href="#"
          >Create New Ticket</a
        >
      </li>
      <!-- Button trigger modal -->

      <!-- Modal -->
      <div
        class="modal fade"
        id="staticBackdrop"
        data-bs-backdrop="static"
        data-bs-keyboard="false"
        tabindex="-1"
        aria-labelledby="staticBackdropLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="staticBackdropLabel">
                Create new Ticket
              </h1>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <div class="modal-body">
              <form
                action="/ticket/create"
                method="post"
                class="create-ticket-form"
              >
                <label for="title">Title</label>
                <input type="text" id="title" name="title" required />

                <label for="description">Description</label>
                <textarea
                  id="description"
                  class="description"
                  name="description"
                  rows="4"
                  required
                ></textarea>

                <label for="assignee">Assign To</label>
                <select id="assignee" name="assignee" required>
                  <% departments.forEach(department => { %>
                  <option value="<%= department %>">
                    <%= department %>
                  </option>
                  <% }); %>
                </select>

                <label for="priority">Priority Level</label>
                <select id="priority" name="priority" required>
                  <option value="low">Low</option>
                  <option value="medium">Medium</option>
                  <option value="high">High</option>
                </select>

                <button class="create-ticket-btn">Create Ticket</button>
              </form>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
      <li><a href="/ticket/employee">My Tickets</a></li>
    </ul>
  </nav>