<%- include('../includes/head.ejs') %>
<script src="/js/forms.js" defer></script>
  <link rel="stylesheet" href="/css/forms.css" />
  <link rel="stylesheet" href="/css/queries.css" />
  </head>

  <body>
    <%- include('../includes/navigation.ejs') %>

      <!-- MAIN CONTENT -->
      <main>
        <div class="container">
          <% if (errorMessages.length > 0) { %>
            <p class="error-message error-message-popup"><%= errorMessages[0] %></p>
            <% } %>
          <form 
          id="submitForm"
            action="/admin/<%= editing ? 'edit-product' : 'add-product'%>" 
            method="POST" 
            class="form-control grid grid--2-cols"
            enctype="multipart/form-data"
            >
            <div class="inputs">
              <input 
                class="<%= invalidFields.includes('title') ? 'err' : '' %>" 
                type="text" 
                name="title" 
                placeholder="Enter product title" 
                minlength="5" 
                maxlength="30"
                value="<%= (editing || errorMessages.length > 0) ? product.title : '' %>"
                onInput="this.classList.remove('err')"
               />
              <input 
                class="<%= invalidFields.includes('price') ? 'err' : '' %>" 
                type="number" 
                name="price" 
                placeholder="Enter product price" 
                step="0.01" 
                min="1" 
                max="99999"
                value="<%= (editing || errorMessages.length > 0) ? product.price : '' %>"
                onInput="this.classList.remove('err')" />
              <textarea 
                class="<%= invalidFields.includes('description') ? 'err' : '' %>" 
                name="description" 
                rows="10" 
                placeholder="Enter product description." 
                minlength="5"
                onInput="this.classList.remove('err')"
                >
                  <%= (editing || errorMessages.length > 0) ? product.description : '' %>
              </textarea>
              <button class="submit-btn" type="submit">
                <%= editing ? 'Save Changes' : 'Add Product' %>
              </button>
            </div>

            <div class="image-selection">
              <label for="file">
                <div class="img-container card">
                  <p class="img-icon"><span class="material-symbols-outlined img-icon">image</span></p>
                  <p>
                    <%= editing ? 'Click here to update your image' : 'Click here to add your image' %>
                  </p>
                </div>
              </label>
              <input type="file" name="img" id="file" class="img-input" accept=".png,.jpeg,.jpg" />
            </div>
            <% if (editing) {%>
              <input type="hidden" name="id" value="<%= product._id %>" />
              <% } %>
              <input type="hidden" name="_csrf" value="<%= CSRFToken %>">
          </form>

        <%- include('../includes/end.ejs') %>