<?php
    get_header();
    $posts = get_posts();
?>
<div class="content no-pb">
    <div class="blog-page">	
        <div class="bp-list-header">
            <div class="cont">						
                <h1>Blog</h1>
                <p>Welcome to LiveCarta blog! <br>Learn how to publish, teach and study efficiently.</p>
            </div>
        </div>	
        			
        <div class="bp-list-tabs">
            <div class="cont">
                <ul>
                    <li><a href="#" data-cat="cat-all" class="category-select selected">All Categories</a></li>
                    <li><a href="#" data-cat="cat-publishing" class="category-select">Publishing</a></li>
                    <li><a href="#" data-cat="cat-teaching" class="category-select">Teaching</a></li>
                    <li><a href="#" data-cat="cat-learning" class="category-select">Learning</a></li>
                </ul>
            </div>
        </div>
        <div class="bp-list cat-all">
            <div class="cont">                
                <?php foreach ($posts as $post): ?>                    
                    <a href="<?=get_permalink(); ?>" class="bp-block <?php $categories = get_the_category(); foreach($categories as $category):?><?= $category->slug; ?> <?php endforeach;?>">
                        <span class="bp-img" style="background-image: url(<?=get_the_post_thumbnail_url(); ?>);"></span>
                        <span class="bp-title"><span class="cont-overflow"><?=get_the_title($post); ?></span></span>
                        <span class="bp-description"><span class="cont-overflow"><?=get_the_excerpt(); ?></span></span>
                    </a>
                <?php endforeach; ?>
            </div>
        </div>
        <script>
            document.body.addEventListener('click', function(event){
                var catClass = '';
                if (event.target.classList.contains('category-select')) {
                    event.preventDefault();
                    document.querySelector('.category-select.selected').classList.remove('selected');
                    event.target.classList.add('selected');
                    document.querySelector('.bp-list').classList.remove('cat-publishing');
                    document.querySelector('.bp-list').classList.remove('cat-teaching'); 
                    document.querySelector('.bp-list').classList.remove('cat-learning');
                    document.querySelector('.bp-list').classList.remove('cat-all');
                    catClass = event.target.dataset.cat;
                    document.querySelector('.bp-list').classList.add(catClass);
                    return false;
                }
            });
        </script>
        
    </div>
    <div class="main-page">
        <div class="mp-small-block">
            <div class="cont">
                <div class="sb-head">Interested? Get to know more</div>
                <div class="buttons">
                    <a href="/contact-us" class="button xxl mp-top-right">Request a demo</a>
                    <a href="<?= get_lawcarta_url()?>/user/registration" class="button xxl mp-top-left">Sign Up For Free</a>
                </div>
            </div>
        </div>
    </div>
</div>
<?php
    get_footer();
