<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
    crossorigin="anonymous"></script>

  <link rel="stylesheet" href="..\..\stylesheets\product.css">
  <script src="..\..\scripts\product.js"></script>

  <link rel="stylesheet" href="..\..\stylesheets\index.css">
  <script src="..\..\scripts\index.js"></script>

  <title>Product</title>
</head>

<body style="background-color: black;">
  <div class="container-fluid">
    <%- include('header')  %>

    <%- include('searchBanner')  %>    

    <!-- Breadcrumbs -->
    <div class="row">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li style="color: white;" class="breadcrumb-item"><a href="/">Browse</a></li>
          <li style="color: white;" class="breadcrumb-item active" aria-current="page"><%= product.productname %></li>
        </ol>
      </nav>
    </div>

    <div class="row">
      <div class="col-3 p-4">
        <div class="row py-3 d-flex justify-content-center">
          <div style="height: 360px; width: 300px; background-color: red;">
            <img style="height: 100%; width: 100%;" src=<%= "../../images/products/" + product.productimage %>>
          </div>
        </div>
        <div class="row py-3">
          <div style="background-color: white;">
            <h4>Publisher Information</h4>
            <p><%= publisher.publisherdesc %></p>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="row p-3" style="background-color: white;">
          <div class="col">
            <div class="row">
              <h1><%= product.productname %></h1>

            </div>
            <div class="row">
              <h5><a href=<%= "/account/publisher/" + publisher.publisherid %>><%= publisher.publishername %></a></h5>
            </div>
          </div>
        </div>
        <div class="row p-3 my-4" style="background-color: white;">
          <div class="col-7">
            <h4>Select Format:</h4>
            <form>
              <div class="form-group">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="downloadFormat" id="downloadOption1" value="pdf">
                  <label class="form-check-label" for="downloadOption1">PDF</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="downloadFormat" id="downloadOption2" value="doc">
                  <label class="form-check-label" for="downloadOption2">DOC</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="downloadFormat" id="downloadOption3" value="txt">
                  <label class="form-check-label" for="downloadOption3">TXT</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="downloadFormat" id="downloadOption4" value="csv">
                  <label class="form-check-label" for="downloadOption4">CSV</label>
                </div>
              </div>
            </form>
          </div>
          <div class="col-sm-5 my-auto">
            <a href="/cart">
              <form class="row my-2 d-flex justify-content-center" method="post" action=<%= "/store/cart/add/" + product.productid %>>
                <button class="btn btn-primary">Add to Cart</button>
              </form>
            </a>
            <form class="row my-2 d-flex justify-content-center" method="post" action=<%= "/account/wishlist/add/" + product.productid %>>
              <button class="btn btn-secondary">Add to Wishlist</button>
            </form>
            <%- include('wishlistAlert') %>
          </div>
        </div>
        <div class="row my-4" style="background-color: white;">
          <h3>Product Description</h3>
          <p><%= product.productdesc %></p>
        </div>
        <div class="row my-4" style="background-color: white;">
          <h3>Reviews</h3>

        </div>
      </div>
      <div class="col-3">
        <div class="row" style="background-color: white;">

        </div>
      </div>
    </div>

    <%- include('footer') %>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
</body>

</html>