<?php /* Template Name: Home */ ?>

<?php get_header(); ?>

<section class="home-nav">

    <h1>MOHN</h1>

    <div class="nav-row">

        <ul class="filter-nav">
            <li class="filter">
                <a href="/" class="filter-btn active">
                    <span class="icon"><?php include('assets/img/icon-filter-default.svg'); ?></span>
                    <span class="label">Toon alles</span>
                </a>
            </li>
            <?php
            $categories = get_categories( array(
                'orderby' => 'name',
                'order'   => 'ASC'
            ) );

            foreach( $categories as $category ) {
                ?>
                <li class="filter">
                    <a href="/categorie/<?= $category->slug ?>" class="filter-btn">
                        <span class="icon"><?php include('assets/img/icon-filter-'.$category->slug.'.svg'); ?></span>
                        <span class="label"><?= $category->name ?></span>
                    </a>
                </li>
                <?php
            }
            ?>
        </ul>

    </div>

</section>

<section class="page page-blog">

    <div class="white-fold"></div>

    <div class="container">

        <div class="home-column left-column">

            <?php
            $slug = explode("/",$_SERVER['REQUEST_URI']);
            $category = get_category_by_slug($slug[2]);
            $catID = $category->term_id;
            ?>

            <div class="article-con" <?php if($catID){ echo("data-category='".$catID."'"); } ?>>

                <?php
                $numPosts = wp_count_posts();
                $args = array( 'posts_per_page' => '9', 'cat' => $catID );
                query_posts( $args );
                $i = 1;
                while ( have_posts() ) {
                    the_post();
                ?>
                    <a href="<?php the_permalink(); ?>" class="blog-post <?php if($i == 1){ echo("large"); } ?>">
                        <div class="blog-thumb">
                            <?php
                            if ( has_post_thumbnail() ) {
                            ?>
                                <img src="<?php the_post_thumbnail_url('large'); ?>" alt="" />
                            <?php
                            }
                            ?>
                        </div>
                        <div class="blog-content">
                            <?php
                            $categories = get_the_category();
                            ?>
                            <span class="date"><?= str_replace("/", ".", get_the_date()); ?> - <ul><?php foreach($categories as $category){ echo("<li>".$category->name."</li>"); } ?></ul></span>
                            <h3><?php the_title(); ?></h3>
                            <h4><?php the_field('subtitle'); ?></h4>
                        </div>
                    </a>
                <?php
                    $i++;
                }
                ?>

                <div class="article-counter" data-counter="9" data-total="<?= $numPosts->publish ?>"></div>

            </div>

        </div>

        <div class="home-column right-column">

            <div class="extra-con featured-con">
                <h2>Uitgelicht</h2>
                <ul>

                    <?php
                    $args = array( 'posts_per_page' => '6', 'meta_query' =>
                        array(
                            array(
                                'key' => 'featured',
                                'compare' => '==',
                                'value' => '1'
                            )
                        )
                    );
                    query_posts( $args );
                    $i = 1;
                    while ( have_posts() ) {
                        the_post();
                        ?>
                        <li class="blog-post">
                            <a href="<?php the_permalink(); ?>">
                                <span class="number"><?= $i ?></span>
                                <h3><?php the_title(); ?></h3>
                            </a>
                        </li>
                        <?php
                        $i++;
                    }
                    ?>

                </ul>
            </div>

            <div class="portrait"></div>
            <div class="extra-con profile-con">
                <h2>Over MOHN</h2>
                <p>Hi! Mijn naam is Shari Pelkmans, een ontwerper uit regio Eindhoven. Onder de naam MOHN ga ik op zoek naar inspiratie op het gebied van interieur en lifestyle. Het liefste met een duurzame knipoog.</p>

                <hr/>

                <div class="links">
                    <a class="img-link" target="_blank" href="http://instagram.com/littlemohn">
                        <?php include('assets/img/icon-social-instagram.svg'); ?>
                    </a>
                    <a class="img-link" target="_blank" href="http://facebook.com/littlemohn">
                        <?php include('assets/img/icon-social-facebook.svg'); ?>
                    </a>
                    <a class="img-link" target="_blank" href="http://pinterest.com/littlemohn">
                        <?php include('assets/img/icon-social-pinterest.svg'); ?>
                    </a>
                </div>
                <iframe src="https://www.bloglovin.com/v2/widget/follow-btn?id=14867169&amp;counter=false" scrolling="no" class="bloglovin-widget-follow-btn" style="border: 0px; width: 110px; height: 20px;"></iframe>

            </div>

<!--            <div class="extra-con subscribe-con">-->
<!--                <h2>Nieuwsbrief</h2>-->
<!--                <p>Nooit meer iets missen? Schrijf je in voor de nieuwsbrief!</p>-->
<!--                <form>-->
<!--                    <input type="text" class="input" name="subscribe-email" placeholder="Je e-mailadres" />-->
<!--                    <input type="submit" class="submit" name="subscribe-send" value="Inschrijven" />-->
<!--                </form>-->
<!--            </div>-->

            <div class="extra-con subscribe-con">
                <h2>Pers</h2>
                <p>MOHN gefeatured in andere media.</p>
                <div class="links">
                    <a class="list-link" target="_blank" href="https://www.ladylemonade.nl/babykamer-inspiratie-jongen-binnenkijken/">
                        <span class="bullet">•</span>
                        Lady Lemonade
                    </a>
                    <a class="list-link" target="_blank" href="http://www.telegraaf.nl/vrij/wonen/26170440/__Nieuwbouw_met_karakter__.html">
                        <span class="bullet">•</span>
                        VRIJ (Telegraaf)
                    </a>
                    <a class="list-link" target="_blank" href="https://homedeco.nl/blog/blogger-we-love-little-mohn/">
                        <span class="bullet">•</span>
                        Homedeco.nl
                    </a>
                </div>
            </div>

        </div>

    </div>

</section>

<?php get_footer(); ?>