{% extends 'base.html.twig' %}

{% block title %}Portfolio{% endblock %}

{% block body %}
    <div id="main" class="site-main">
                <div id="main-content" class="single-page-content">
                    <div id="primary" class="content-area">

                        <div class="page-title">
                            <h1>Portfolio</h1>
                            <div class="page-subtitle">
                                <h4> Mes Travaux</h4>
                            </div>
                        </div>

                        <div id="content" class="page-content site-content single-post" role="main">

                            <div class="row">
                                <div class=" col-xs-12 col-sm-12 ">
                                    <!-- Portfolio Content -->
                                    <div id="portfolio_content_q" class="portfolio-content">

                                        <ul class="portfolio-filters">
                                            <li class="active">
                                                <a class="filter btn btn-sm btn-link" data-group="category_all">Tout</a>
                                            </li>

                                            {% for category in categories %}
                                                <li>
                                                    <a class="filter btn btn-sm btn-link" data-group="category_{{ category.name }}">{{ category.name }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>


                                        <!-- Portfolio Grid -->
                                        <div class="portfolio-grid three-columns shuffle">

                                            <!-- Portfolio Item -->
                                            {% for portfolio in portfolios %}
                                            <figure class="item standard" data-groups='["category_all", {% for category in portfolio.categories %}"category_{{ category.name }}" {% endfor %}]'>
                                                <div class="portfolio-item-img">
                                                    <img src="assets/img/portfolio/{{ portfolio.image }}" alt="{{ portfolio.title }}" title="" />
                                                    <a href="{{ path('app_portfolio_details', { id: portfolio.id }) }}" class="ajax-page-load"></a>
                                                </div>

                                                <i class="far fa-file-alt"></i>
                                                <h4 class="name">{{ portfolio.title }}</h4>
                                                <span class="category">{% for category in portfolio.categories %}{{ category.name }} {% endfor%}</span>
                                            </figure>
                                            {% endfor %}
                                            <!-- /Portfolio Item -->
                                        </div>
                                        <!-- /Portfolio Content -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
{% endblock %}