<!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\publisher.css">
  <script src="..\..\scripts\publisher.js"></script>

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

  <title>Publisher</title>
</head>

<body>
  <div class="container-fluid" style="height: 100vh;">
    <div class="row h-100">
      <%- include('navbar') %>

      <!-- Content -->
      <div class="col-9 scrollable-column p-5" style="background-color: aqua;">

        <!-- Publisher Info -->
        <div class="row">
          <div class="col-4">
            <div style="height: 300px; width: 300px; background-color: red;">
              <p>Publisher Logo</p>
            </div>
          </div>
          <div class="col-8">
            <!-- Publisher Name -->
            <div class="row text-center">
              <div class="card m-2">
                <div class="card-body">
                  <h5 class="card-title"><%= publisher.publishername %></h5>
                </div>
              </div>
            </div>
            <!-- Publisher Info -->
            <div class="row">
              <div class="card m-2">
                <div class="card-body">
                  <ul>
                    <li>
                      <p>Creation Date: 1/1/01</p>
                    </li>
                    <li>
                      <p>Items Sold: 124</p>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Search Bar -->
        <div class="row">
          <div class="row row-cols-4" style="padding: 5px;">
            <div style="width: 80%;"><input class="search-bar w-100 h-100" placeholder="Search..."></div>
            <div class="wfit"><button>Search</button></div>
          </div>
        </div>

        <!-- Filters -->
        <div class="row menu">
          <div class="col"><button>Publishers</button></div>
          <div class="col"><button>Genre</button></div>
          <div class="col"><button>Product Type</button></div>
          <div class="col"><button>Rule System</button></div>
          <div class="col"><button>Languages</button></div>
          <div class="col"><button>Format</button></div>
        </div>

        <!-- Order Items and Page Navigation -->
        <div class="row">
          <div class="col">
            <div class="dropdown show">
              <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Order Items
              </a>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </div>
          <div class="col">
            <nav aria-label="...">
              <ul class="pagination">
                <li class="page-item disabled">
                  <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item active" aria-current="page">
                  <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                  <a class="page-link" href="#">Next</a>
                </li>
              </ul>
            </nav>
          </div>
        </div>


        <!-- Items in Library -->
        <% for (product of products) { %>
        <div class="row">
          <div class="card m-2">
            <div class="card-body">
              <div class="row">
                <div class="col-2">
                  <div style="height: 190px; width: 140px; background-color: red;">
                    <img style="height: 100%; width: 100%;" src=<%= "../../images/products/" + product.productimage %>>
                  </div>
                </div>
                <div class="col-10">
                  <div class="row">
                    <div class="col">
                      <h4><%= product.productname %></h4>
                    </div>
                    <div class="col">
                      <p>Creation Date: 1/1/01</p>
                      <p>Upload Date: 1/1/01</p>
                    </div>
                    <div class="col">
                      <div class="row">
                        <a href=<%= "/store/product/" + product.productid %>>
                          <button class="btn btn-primary">View Product</button>
                        </a>
                      </div>
                      <div class="row">
                        <button class="btn btn-primary">Edit Product</button>
                      </div>
                    </div>
                    <div class="col text-center">
                      <h4>Current Price:</h4>
                      <h4>$<%= product.productprice %></h4>
                    </div>
                  </div>
                  <div class="row">
                    <div class="card m2">
                      <div class="row">
                        <div class="col-8">
                          <a href="">Download 1</a>
                        </div>
                        <div class="col-2">
                          <p>5000000 MB</p>
                        </div>
                        <div class="col-2">
                          <button class="btn btn-secondary">Download</button>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-8">
                          <a href="">Download 1</a>
                        </div>
                        <div class="col-2">
                          <p>5000000 MB</p>
                        </div>
                        <div class="col-2">
                          <button class="btn btn-secondary">Download</button>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-8">
                          <a href="">Download 1</a>
                        </div>
                        <div class="col-2">
                          <p>5000000 MB</p>
                        </div>
                        <div class="col-2">
                          <button class="btn btn-secondary">Download</button>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
        <% } %>
      </div>
    </div>
  </div>
  </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>