<%- include('./partials/header.ejs') %>

<div class="container">
  <div class="row">
    <div class="col-3">
      <% if (locals.product.featured) { %>
          <img src="<%= locals.product.featured.link %>" alt="" style="max-width:100%;">
      <% } %>
      <% if (locals.product.uploads && locals.product.uploads.length > 0) { %>
        <% locals.product.uploads.forEach(upload => { %>
          <% if (locals.product.featured && upload.id === locals.product.featured.id) { return; } %>
          <img src="<%= upload.link %>" alt="" style="max-width:100%;">
        <% }) %>
      <% } %>
    </div>
    <div class="col-9">
      <div class="row">
        <div class="col-12 col-md-8">
          <h1 class="product-name"><%= locals.product.name %></h1>
          <div class="product-description"><%= locals.product.description %></div>
        </div>
        <div class="col-12 col-md-4 text-center">
          <div class="product-price p-2" style="font-size: 2rem;"><%= locals.product.price %> <%= locals.config.currency.symbol %></div>
          <div class="">
            <form action="<%= locals.linkTo('cart', 'products', locals.product._id) %>" method="POST">
              <input type="hidden" value="<%= locals.csrf %>" name="_csrf">
              <input type="submit" value="Add to cart" class="btn btn-outline-primary" <%= locals.product.stock < 1 ? 'disabled' : '' %>>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<%- include('./partials/footer.ejs') %>
