<?php

?>

<div id="header_placeholder"></div>
<section class="container">
    <header class="row">
        <div class="col-md-12">
            <?php // @todo We need to make use of this <h1> here or to redesign html/css, it can't be commented out. ?>
            <!--            <h1 class="title-portfolio">Portfolio Two Columns</h1>-->
            <?php // @todo This filtering should be part of some function if used at all.
            // @todo Get post categories and print out all those.
            ?>
            <ul id="filter-list" class="clearfix pull-left">
                <li class="filter all" data-filter="all">All</li>
                <li class="filter web" data-filter="webdesign">Web Design</li>
                <li class="filter print" data-filter="print">Print</li>
                <li class="filter brending" data-filter="brending">Branding</li>
            </ul>
        </div>
    </header>
</section>
<section class="container">
    <?php // @todo Difference between those templates are in <ul> class below, e.g. two-column and in <li> class, e.g. col-md-6.
    // @todo Should be checked and created optimal non-redundant solution
    ?>
    <ul id="portfolio" class="row two-column">
        <?php
        // @todo Pagination is missing. See how it can be used with filtering.
        $team_posts = get_posts(
            array(
                'post_type' => 'portfolio',
                'posts_per_page' => -1,
                'orderby' => 'title',
            )
        );
        if ($team_posts):
        foreach ($team_posts as $post):
            setup_postdata($post);
            ?>
            <?php // @todo Item must have appropriate class in order filtering to work properly. ?>
            <li class="item col-md-6">
                <aside class="overlay imagebox" role="complementary">
                    <?php // @todo Decide whether we prefer fixed height/width images or ones user upload. ?>
                    <?php echo the_post_thumbnail(); ?>
                    <a class="img-control control-right" href="<?php the_permalink(); ?>"><i class="fa fa-link"></i></a>
                </aside>
                <article>
                    <h3><?php the_title(); ?></h3>
                    <?php
                    $terms = wp_get_post_terms(get_the_ID(), 'portfolio_category');?>

                    <h5>
                        <?php
                        // @todo See if post can have multiple categories.
                        foreach ($terms as $term) {
                            echo $term->name . ' ';
                        }
                        ?>
                    </h5>

                    <p class="par-grey par-margin"><?php the_content(); ?></p>
                    <a href="<?php the_permalink(); ?>">
                        <?php // @todo "View Project" should not be static. ?>
                        <button type="button" class="btn link-btn">View Project</button>
                    </a>

                    <div class="separator"/>
                </article>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>
</section>