<%- include("../../includes/head.ejs") %>
<div class="flex flex-col gap-5 mt-5">
  <%- include("../../components/form-errors.ejs") %>
  <h2 class="text-2xl">Add Product</h2>
  <form action="<%= locals.edit ? "/edit-product/"+locals.values.id : "/add-product"%>" method="post" enctype="multipart/form-data">
    <% if (locals.csrfToken) { %>
    <input type="hidden" name="_csrf" value="<%= locals.csrfToken %>" />
    <% } %>
    <div class="relative z-0 w-full mb-6 group">
      <label
        for="product_title"
        class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
        >Product Name</label
      >
      <input type="text" name="title" id="product_title" class="bg-gray-50
      border border-gray-300 text-gray-900 text-sm rounded-lg
      focus:ring-green-500 focus:border-green-500 block w-full p-2.5
      dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
      dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500 <%=
      locals.errorFields?.find((field) => field === "title") ? "border-red-500"
      : "" %>" value="<%= locals.values?.title %>" placeholder="" />
    </div>
    <div class="grid md:grid-cols-3 md:gap-3">
      <div class="relative z-0 w-full mb-6 group">
        <label
          for="product_price"
          class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
          >Product Price</label
        >
        <input
          type="number"
          name="price"
          step="any"
          id="product_price"
          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500"
          placeholder=""
          value="<%= locals.values?.price %>" 
        />
      </div>
      <div class="relative z-0 w-full mb-6 group">
        <label
          class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
          for="product_image"
          >Upload Product Image</label
        >
        <input
          class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
          id="product_image"
          type="file"
          name="image"
        />
      </div>
      <div class="relative z-0 w-full mb-6 group">
        <label
          for="product_quantity"
          class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
          >Quantity of Product</label
        >
        <input
          type="number"
          name="quantity"
          id="product_quantity"
          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500"
          placeholder=""
          value="<%= locals.values?.quantity %>"
        />
      </div>
    </div>
    <div class="relative z-0 w-full mb-6 group">
      <label
        for="product_description"
        class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
        >Product Description</label
      >
      <textarea
        id="product_description"
        rows="4"
        class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500 <%= locals.errorFields?.find((field) => field
        === "description") ? "border-red-500" : "" %>"
        placeholder="About product..."
        name="description"
      ><%= locals.values?.description %></textarea>
    </div>
    <button
      type="submit"
      class="text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
    >
      <%= locals.edit ? "Update!" : "Save" %>
    </button>
  </form>
</div>
<%- include("../../includes/end.ejs") %>
