<%- include("./partials/header") -%>
<main>
  <% if(message != undefined){ %>
  <div id="message"><%= message %></div>
  <% } %>
  <section id="cards">
    <% cars.forEach( car=>{ %>
    <article class="carCard" key="<%= car.id %>">
      <img src="<%= car.img %> " alt="<%= car.name %> photo" />
      <div class="flex-row">
        <p>Model</p>
        <p><%= car.name %></p>
      </div>
      <div class="flex-row">
        <p>Horse Power</p>
        <p><%= car.hp %> HP</p>
      </div>
      <div class="flex-row">
        <p>Top speed</p>
        <p><%= car.maxVel %> Km/h</p>
      </div>
      <i
        class="fa-solid fa-ellipsis-vertical openMenu"
        title="Click for menu"
      ></i>
      <div class="cardControl">
        <div class="details">
          <a href="/details/<%= car.id %> "> Details </a>
        </div>
        <div class="update">Update</div>
        <div class="delete">Delete</div>
      </div>
    </article>
    <div class="deleteConfirmation">
      <p>
        Are you sure you want to delete this card? This action cannot be undone!
      </p>
      <button onclick="location.href='/delete/<%= car.id%>'" class="confirm">
        Yes
      </button>
      <button class="closeConfirmation">No</button>
    </div>

    <form action="/update/<%= car.id %>" method="post" class="updateForm">
      <i class="fa-solid fa-x closeUpdate"></i>
      <fieldset>
        <label for="name"> Model and Manufacture</label>
        <input type="text" name="name" value="<%= car.name %> " required />
      </fieldset>
      <fieldset>
        <label for="hp"> Horse Power </label>
        <input
          type="number"
          name="hp"
          value="<%= car.hp %>"
          max="2000"
          min="50"
          required
        />
      </fieldset>
      <fieldset>
        <label for="maxVel"> Top speed (Km/h) </label>
        <input
          type="number"
          name="maxVel"
          value="<%=car.maxVel %>"
          max="400"
          min="20"
          required
        />
      </fieldset>
      <fieldset>
        <label for="toOneHundred"> 0-100Km/h time (in seconds) </label>
        <input
          type="number"
          name="toOneHundred"
          step="0.1"
          value="<%= car.toOneHundred %>"
          max="1000"
          min="1"
          required
        />
      </fieldset>
      <fieldset>
        <label for="img"> Image URL </label>
        <input type="url" name="img" value="<%= car.img %>" />
      </fieldset>
      <fieldset>
        <label for="capacity"> Engine Capacity (cc)</label>
        <input
          type="number"
          name="capacity"
          step="0.1"
          value="<%= car.capacity %>"
          min="1.0"
          max="20.0"
          required
        />
      </fieldset>
      <fieldset>
        <label for="cylinder"> Cylinder </label>
        <input
          type="number"
          name="cylinder"
          value="<%= car.cylinder %>"
          min="1"
          max="22"
          required
        />
      </fieldset>
      <label for="description"> Description </label>
      <fieldset>
        <textarea name="description" cols="30" rows="10" required>
 <%= car.description %></textarea
        >
      </fieldset>
      <button type="submit">Submit</button>
    </form>
    <% }); %>
  </section>
</main>
<script>
  const message = document.querySelector("#message");
  if (message) {
    setTimeout(() => {
      message.style = "display: none;";
    }, 2000);
  }
</script>

<%- include("./partials/footer") -%>
