<script type="text/javascript">
    function ShowHidePosts(btn) {
        var posts = document.getElementsByClassName('post');
        for (var i = 0; i < posts.length; i++) {
            posts[i].style.display = btn.checked ? "block" : "none"; 
        }
    }
    function ShowHideLessons(btn) {
        var lessons = document.getElementsByClassName('lesson');
        for (var i = 0; i < lessons.length; i++) {
            lessons[i].style.display = btn.checked ? "block" : "none"; 
        }
    }
</script>

<div class="container">
    <label for="posts_checkbox" class="mt-5">
        <input type="checkbox" onclick="ShowHidePosts(this)" id="posts_checkbox" checked />
        Posts
    </label>
    <br>
    <label for="lessons_checkbox">
        <input type="checkbox" onclick="ShowHideLessons(this)" id="lessons_checkbox" checked />
        Lessons
    </label>
    <% fav_posts.forEach(post => { %>
        <div class="card mb-5 mt-5 post" style="width: 100%;">
            <div class="card-header">
                <a href="/forum/post/<%= post.id %>"><%= post.title %></a>
            </div>
            <div class="card-body" style="display: flex; justify-content: right;">
                <div class="left" style="width: 80%;">
                    <p><%= post.body.substring(0, 40); %> <% if (post.body.length > 40) { %>...<% } %></p>
                    <footer class="blockquote-footer">Gepost door <a href="/users/profile/<%= post.posted_by %>"><%= post.username %></a></footer>
                </div>
                <div class="left" style="width: 20%; text-align: right;">
                    <p><i class="far fa-comment-dots" style="color: green;"></i> <%= post.comment_count %></p>
                </div>
            </div>
        </div>
    <% }); %>
</div>