<div class="row">
  <div class="col-md-12 mt-2">
    <form
      id="cmsForm"
      method="post"
      action="/products/add"
      enctype="multipart/form-data"
      novalidate
    >
      <div class="card card-info">
        <div class="card-header">
          <h4 class="card-title"><%= sectionTitle %></h4>
        </div>
        <div class="card-body">
          <div class="form-row">

            <!-- Produktname -->
            <div class="form-group col-md-6">
              <label class="required" for="model_name">Produktname</label>
              <input
                type="text"
                id="model_name"
                name="model_name"
                class="form-control"
                placeholder="Enter Produktname"
                required
                onkeypress="return /[a-zA-Z0-9 ]/i.test(event.key)"
  oninput="this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '')"
              />
            </div>

            <!-- Kategorie -->
            <div class="form-group col-md-6">
              <label class="required" for="category_id">Kategorie</label>
              <select
                id="category_id"
                name="category_id"
                class="form-control"
                required
              >
                <option selected disabled>Wähle Kategorie</option>
                <% categories.forEach(function(category) { %>
                  <option value="<%= category.id %>"><%= category.category_name %></option>
                <% }) %>
              </select>
            </div>

          </div>

          <!-- <div class="form-row">
            <div class="form-group col-md-6">
              <label for="item_number">Artikelnummer</label>
              <input
                type="text"
                id="item_number"
                name="item_number"
                class="form-control"
                placeholder="Enter Item Number"
              />
            </div>

            <div class="form-group col-md-6">
              <label for="supplier">Lieferant</label>
              <input
                type="text"
                id="supplier"
                name="supplier"
                class="form-control"
                placeholder="Enter Supplier"
              />
            </div>
          </div> -->

        </div>

        <div class="card-footer">
          <button type="submit" id="savebtn" class="btn btn-info">
            Speichern
          </button>
          <button type="button" class="btn btn-default">
            <a href="/products/list">Zurück</a>
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<%- contentFor('pageStyleSection') %>
<link rel="stylesheet" href="/stylesheets/style.css" />
