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

<head>
    <%- include('../partials/head'); %>
        <link rel="stylesheet" href="/public/css/all-categories.css">
</head>

<body>


    <div class="main">

        <header class="header header-section sticky-lg-top">
            <%- include('../partials/header'); %>
        </header>



        <!-- Categories -->
        <div class="categories container">

            <h1 class="text-center py-3">All Categories</h1>

            <div class="row">
                <% for(var i=0; i < categories.length; i++) { %>
                    <div class="col-lg-3 col-md-3 col-sm-5 p-3">
                        <div class="card p-1">
                            <a href="/category-posts?id=<%=categories[i].id %>" class="text-decoration-none">
                                <div class="d-flex justify-content-between align-items-center p-2">
                                    <div class="flex-column lh-1 imagename"> <span>
                                            <%= categories[i].title %>
                                        </span> </div>
                                    <div> <img src="/public/images/<%= categories[i].image %>" height="100"
                                            width="100" />
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <% } %>
            </div>


        </div>

        <!-- Category Footer -->
        <footer class="footer">
            <%- include('../partials/footer'); %>
        </footer>

    </div>



    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"></script>
</body>

</html>