<!DOCTYPE html>
<html lang="en">
  <%- include('partials/head') %>

  <body class="mb-5 pb-3">
    <%- include('partials/header') %>

    <main>
      <div class="container">
        <% if (language == "ru") { %>
          <h1 class="display-3 fw-bold mb-1 text-center">Блог</h1>
        <% } else { %>
          <h1 class="display-3 fw-bold mb-1 text-center">Blog</h1>
        <% } %>
        <div class="d-flex flex-wrap justify-content-around align-items-center gap-4">
          <% items.forEach(function(item) { %>
            <% if (!item.deletion_date) { %>
            <div class="card">
              <div class="card-header">
                <div id="carousel<%= item.id %>" class="carousel slide w-100 h-100">
                  <div class="carousel-inner w-100 h-100">
                    <div class="carousel-item active">
                      <img src="<%= item.image_1 %>" class="object-fit-cover" alt="image_1">
                    </div>
                    <div class="carousel-item">
                      <img src="<%= item.image_2 %>" class="object-fit-cover" alt="image_2">
                    </div>
                    <div class="carousel-item">
                      <img src="<%= item.image_3 %>" class="object-fit-cover" alt="image_3">
                    </div>
                  </div>
                  <button class="carousel-control-prev" type="button" data-bs-target="#carousel<%= item.id %>" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                  </button>
                  <button class="carousel-control-next" type="button" data-bs-target="#carousel<%= item.id %>" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                  </button>
                </div>
              </div>
              <% if (language == "ru") { %>
                <div class="card-body overflow-auto">
                  <h5 class="card-title text-center"><%= item.title_ru %></h5>
                  <p class="card-text"><%= item.description_ru %></p>
                </div>
              <% } else { %>
                <div class="card-body overflow-auto">
                  <h5 class="card-title text-center"><%= item.title_en %></h5>
                  <p class="card-text"><%= item.description_en %></p>
                </div>
              <% } %>
            </div>
            <% } %>
          <% }) %>
        </div>
      </div>
    </main>

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

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
