<div class="container pr-2 pl-2 my-4 justify-content-center">
    <h5 class="display-6 text-center text-white mb-3">Browse Pastes</h5>
    <div class="row" data-bs-theme="dark">
        <% data.pastes.forEach(paste => { %>
            <div class="col-sm-6 mb-sm-0">
                <div class="card mb-3">
                    <div class="card-body d-flex flex-column border-secondary" style="height: 20rem">
                        <h5 class="card-title"><%= paste.title %></h5>
                        <div class="card-body rounded-3 mb-3" style="background-color: #282c34; overflow: auto; flex: 1;">
                            <% if (paste.codeblock) { %>
                                <pre class="text-white mb-0" id="paste-content" style="font-size: 13px; background-color: #282c34; overflow: auto; white-space: pre; margin: 0;"><%= paste.content %></pre>
                            <% } else { %>
                                <p class="card-text" id="paste-content"><%= paste.content %></p>
                            <% } %>
                        </div>
                        <div class="mt-auto">
                            <a href="#" class="btn btn-primary">View Full Paste</a>
                            <a href="#" class="btn btn-primary">Copy Raw</a>
                        </div>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Paste ID: <%= paste.id %></li>
                    </ul>
                </div>
            </div>
        <% }) %>
    </div>
</div>