<%- include('./partials/header') %>
<!-- ==================================================== -->
<!-- Start right Content here -->
<!-- ==================================================== -->
<div>

  <div class="page-content">

    <!-- Start Container Fluid -->
    <div class="container-xxl">


      <div class="row">

        <div class="col-12">

          <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center gap-1">
              <h4 class="card-title flex-grow-1"><%- letterType.toUpperCase() %> Letters List</h4>

              <a href="product-add.html" class="btn btn-sm btn-primary">
                Add Product
              </a>

              <div class="dropdown">
                <a href="#" class="dropdown-toggle btn btn-sm btn-outline-light" data-bs-toggle="dropdown" aria-expanded="false">
                  Select Letter (<%- char %>)
                </a>
                <div class="dropdown-menu dropdown-menu-end">
                  <% uniqueLetters.forEach((letter) => { %>
                  <a href="?char=<%= letter %>" class="dropdown-item"><%- letter %></a>
                  <% }) %>
                </div>
              </div>
            </div>
            <div class="card-body">
              <div class="row">
                <% letter.forEach((item, index) => { %>
                <% item.images.forEach((image, index) => { %>
                <div class="col-md-6 col-xl-3">
                  <div class="card">
                    <img src="<%- encodeURIComponent(image).replaceAll('%2F','/') %>" alt="" class="img-fluid ">
                    <div class="card-body bg-light-subtle rounded-bottom">
                      <a href="product-details.html" class="text-dark fw-medium fs-16"><%- item.letter %></a>
                      <div class="mt-3">
                        <div class="d-flex gap-2">
                          <div class="dropdown">
                            <a href="#" class="btn btn-soft-primary border border-primary-subtle" data-bs-toggle="dropdown" aria-expanded="false"><i class="bx bx-dots-horizontal-rounded"></i></a>
                            <div class="dropdown-menu">
                              <a href="#!" class="dropdown-item">Edit</a>
                              <a href="#!" class="dropdown-item">Delete</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <% }) %>
                <% }) %>
              </div>
            </div>
            <div class="card-footer border-top">
              <ul class="pagination pagination-rounded m-0 justify-content-end">
                <li class="page-item">
                  <a href="#" class="page-link"><i class="bx bx-left-arrow-alt"></i></a>
                </li>
                <li class="page-item active">
                  <a href="#" class="page-link">1</a>
                </li>
                <li class="page-item">
                  <a href="#" class="page-link">2</a>
                </li>
                <li class="page-item">
                  <a href="#" class="page-link">3</a>
                </li>
                <li class="page-item">
                  <a href="#" class="page-link"><i class="bx bx-right-arrow-alt"></i></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>


    </div>
    <!-- End Container Fluid -->
  </div>
  <!-- ==================================================== -->
  <!-- End Page Content -->
  <!-- ==================================================== -->

</div>
<%- include('./partials/footer') %>>