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

{% block title %} Soutenez les projets de votre choix{% endblock %}

{% block body %}
    <main id="main" class="site-main">
     {#   <div class="page-title background-page">
            <div class="container">
                <h1>Discover projects</h1>
                <div class="breadcrumbs">
                    <ul>
                        <li><a href="index.html">Home</a><span>/</span></li>
                        <li>Layout</li>
                    </ul>
                </div><!-- .breadcrumbs -->
            </div>
        </div><!-- .page-title -->#}
        <div class="campaigns-action clearfix">
            <div class="container">
          {#      <div class="sort">
                    <span>Sort by:</span>
                    <ul>
                        <li class="active"><a href="#">Recent Project</a></li>
                        <li><a href="#">Most Project</a></li>
                    </ul>
                </div><!-- .sort -->#}
                <div class="filter">


                    {{ form_start(form) }}
                    <div class="field-select mb-2">
                        {{ form_row(form.city) }}
                    </div>

                    <div class="field-select mb-2">
                        {{ form_row(form.status) }}
                    </div>

                    <div class="field-select mb-2">
                        {{ form_row(form.type) }}
                    </div>

                    <div class="field-select mb-2">
                        {{ form_row(form.category) }}
                    </div>
                    <button type="submit" class="btn-primary"><i class="fa fa-search"></i></button>
                    {{ form_end(form) }}
                </div><!-- .filter -->
            </div>
        </div><!-- .campaigns-action -->
        <div class="campaigns">
            <div class="container">
                <div class="campaign-content">
                    <div class="row">
                   {#     <div class="col-lg-12">
                            <div class="campaign-big-item clearfix">
                                <a href="campaign_detail.html" class="campaign-big-image"><img
                                            src="images/placeholder/570x350.png" alt=""></a>
                                <div class="campaign-big-box">
                                    <a href="#" class="category">Design & Art</a>
                                    <h3><a href="campaign_detail.html">Creative Furniture Designs</a></h3>
                                    <div class="campaign-description">He lay on his armour-like back, and if he lifted
                                        his head a little he could see his brown belly, slightly domed and divided by
                                        arches into stiff sections. The bedding was hardly able to cover it and seemed
                                        ready to slide off any moment.
                                    </div>
                                    <div class="staff-picks-author">
                                        <div class="author-profile">
                                            <a class="author-avatar" href="#"><img src="images/placeholder/35x35.png"
                                                                                   alt=""></a>by <a class="author-name"
                                                                                                    href="#">Andrew
                                                Noah</a>
                                        </div>
                                        <div class="author-address"><span class="ion-location"></span>Melbourne,
                                            Victoria, AU
                                        </div>
                                    </div>
                                    <div class="process">
                                        <div class="raised"><span></span></div>
                                        <div class="process-info">
                                            <div class="process-pledged"><span>$10000</span>pledged</div>
                                            <div class="process-funded"><span>81%</span>funded</div>
                                            <div class="process-time"><span>37</span>backers</div>
                                            <div class="process-time"><span>23</span>days ago</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>#}
                        {% for campagn in campagns %}
                            <div class="col-lg-4 col-md-6 col-sm-6 col-6">
                                <div class="campaign-item">
                                    <a class="overlay"
                                       href="{{ path('campagn.show',{ 'slug': campagn.slug, 'id': campagn.id}) }}">
                                        <img src="{{ vich_uploader_asset(campagn, 'imageFile') | imagine_filter('minithumb') }}"
                                             alt="{{ campagn.title }}">
                                        <span class="ion-ios-search-strong"></span>
                                    </a>
                                    <div class="campaign-box">
                                        <a href="{{ path('category.index',{'category': campagn.category.slug}) }}" class="category">{{ campagn.category.name }}</a>&nbsp; | &nbsp;<span
                                                class="badge-primary"> {{ campagn.campagnType.name }} </span>
                                        <h3>
                                            <a href="{{ path('campagn.show',{ 'slug': campagn.slug, 'id': campagn.id}) }}">{{ campagn.title }}</a>
                                        </h3>
                                        <div class="campaign-description">{{ campagn.description }}.</div>
                                        <div class="campaign-author"><a class="author-icon" href="#"><img
                                                        src="images/placeholder/35x35.png" alt=""></a>Par <a
                                                    class="author-name" href="#">{{ campagn.user._shortFullName }}</a>
                                        </div>
                                        <div class="process">
                                            <div class="raised"><span
                                                        style="width: {{ campagn.percentProgressBar }}%!important;"></span>
                                            </div>
                                            <div class="process-info">
                                                <div class="process-pledged">
                                                    <span>Récoltés</span>{{ campagn.amountCollected |format_currency('GNF') }}
                                                </div>
                                                <div class="process-funded"><span>{{ campagn.contributorsCount }}</span>Acteurs
                                                </div>
                                                <div class="process-time">
                                                    <span>fin </span>{{ campagn.campagnEndAt | ago }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}

                    </div>
                </div>

{#                <div class="page-navigation">#}
{#                    <span class="page-numbers current">1</span>#}
{#                    <a href="#" class="page-numbers">2</a>#}
{#                    <a href="#" class="page-numbers">3</a>#}
{#                </div>#}

                <div class="page-navigation d-flex justify-content-center">

                    {{ knp_pagination_render(campagns) }}
                </div>

            </div>
        </div><!-- .latest -->
    </main><!-- .site-main -->

{% endblock %}