inventory-app/templates/item/item-create-form.html

<form
  id="item-create"
  hx-post="/item/create"
  hx-target="this"
  hx-swap="outerHTML"
  x-on:htmx:response-error="$dispatch('notice', {type: 'error', text: 'Unknown error'})"
  x-on:form-submit-success="$dispatch('notice', {type: 'info', text: 'New item created'})"
>
  <div class="mb-5 grid grid-cols-6 gap-4 p-2">
      <div class="col-span-6">
          <label for="name" class="mb-2 block text-sm font-medium">Name</label>
          <input
                  type="text"
                  id="name"
                  name="name"
                  class="block w-11/12 p-2 rounded-lg border border-neutral-900 text-sm text-neutral-900 focus:border-paynes-gray focus:ring-paynes-gray dark:text-slate-100"
                  aria-label="name"
                  value="{{ name_value }}"
                  required
                  {% if !name_error.is_empty() -%}
                  aria-invalid="true"
                  aria-describedby="invalid-name"
                  {% endif -%}
          />
          {% if !name_error.is_empty() -%}
          <small id="invalid-name" class="block mt-2 text-sm text-cerise">
              {{ name_error }}
          </small>
          {% endif -%}
      </div>

      <div class="col-span-2">
          <label for="reorder_point" class="mb-2 block text-sm font-medium">Reorder Point</label>
          <input
                  type="number"
                  id="reorder_point"
                  name="reorder_point"
                  step="0.01"
                  class="block w-3/4 p-2 rounded-lg border border-neutral-900 text-sm text-neutral-900 focus:border-paynes-gray focus:ring-paynes-gray dark:text-slate-100"
                  aria-label="reorder point"
                  value="{{ reorder_point_value }}"
                  {% if !reorder_point_error.is_empty() -%}
                  aria-invalid="true"
                  aria-describedby="invalid-reorder-point"
                  {% endif -%}
          />
          {% if !reorder_point_error.is_empty() -%}
          <small id="invalid-reorder-point" class="block mt-2 text-sm text-cerise">
              {{ pims_id_error }}
          </small>
          {% endif -%}
      </div>

      <div class="col-span-2">
          <label for="display_unit" class="mb-2 block text-sm font-medium">Unit</label>
          <select
                  id="display_unit"
                  name="display_unit"
                  class="block rounded-lg border border-neutral-900 p-2 text-sm text-neutral-900 focus:border-paynes-gray focus:ring-paynes-gray dark:text-slate-100"
                  aria-label="name"
                  required
                  {% if !display_unit_error.is_empty() -%}
                  aria-invalid="true"
                  aria-describedby="invalid-display-unit"
                  {% endif -%}
          >
              {% for unit in display_units -%}
              <option value="{{ unit.abbreviation }}" {% if unit.abbreviation == display_unit_value %} selected {% endif %}>{{ unit.unit }}</option>
              {% endfor %}
          </select>
          {% if !display_unit_error.is_empty() -%}
          <small id="invalid-display-unit" class="block mt-2 text-sm text-cerise">
              {{ display_unit_error }}
          </small>
          {% endif -%}
      </div>

      <div class="col-span-2">
          <label for="allow_fractional_units" class="block mb-2 text-sm font-medium">Fractional</label>
          <input
                  type="checkbox"
                  id="allow_fractional_units"
                  name="allow_fractional_units"
                  class="block w-4 h-4 text-dark-cyan  border-slate-100 rounded-sm focus:ring-space-cadet focus:ring-2"
                  {% if allow_fractional_units_value -%} checked {% endif -%}
          />
      </div>


      <div class="col-span-3">
          <label for="pims_id" class="mb-2 block text-sm font-medium">PIMS Id</label>
          <input
                  type="text"
                  id="pims_id"
                  name="pims_id"
                  class="block p-2 rounded-lg border border-neutral-900 text-sm text-neutral-900 focus:border-paynes-gray focus:ring-paynes-gray dark:text-slate-100"
                  value="{{ pims_id_value }}"
                  aria-label="pims id"
                  {% if !pims_id_error.is_empty() -%}
                  aria-invalid="true"
                  aria-describedby="invalid-pims-id"
                  {% endif -%}
          />
          {% if !pims_id_error.is_empty() -%}
          <small id="invalid-pims-id" class="block mt-2 text-sm text-cerise">
              {{ pims_id_error }}
          </small>
          {% endif -%}
      </div>

      <div class="col-span-3">
          <label for="vetcove_id" class="mb-2 block text-sm font-medium">Vetcove Id</label>
          <input
                  type="text"
                  id="vetcove_id"
                  name="vetcove_id"
                  class="block p-2 rounded-lg border border-neutral-900 text-sm text-neutral-900 focus:border-paynes-gray focus:ring-paynes-gray dark:text-slate-100"
                  value="{{ vetcove_id_value }}"
                  aria-label="vetcove id"
                  {% if !vetcove_id_error.is_empty() -%}
                  aria-invalid="true"
                  aria-describedby="invalid-vetcove-id"
                  {% endif -%}
          />
          {% if !vetcove_id_error.is_empty() -%}
          <small id="invalid-vetcove-id" class="block mt-2 text-sm text-cerise">
              {{ vetcove_id_error }}
          </small>
          {% endif -%}
      </div>
      <div class="col-span-4">
          <button
                  class="mb-2 me-2 rounded-lg bg-english-violet px-5 py-2.5 text-sm font-medium text-slate-100 hover:bg-dark-cyan focus:outline-none focus:ring-4 focus:ring-dark-cyan"
          >
              Submit
          </button>
      </div>
  </div>
</form>