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

{% block title %}
    Bienvenue sur la plateforme de collecte de fonds
{% endblock %}


{% block body %}


    <main id="main" class="site-main">
        <div class="sideshow">
            <div class="container">
                <div class="sideshow-content">
                    <h1 class="wow fadeInUp"
                        data-wow-delay=".1s">{% trans %}Contribuez au développement des entreprises locales {% endtrans %} </h1>
                    <div class="sideshow-description wow fadeInUp"
                         data-wow-delay=".1s">{% trans %} Donnez du sens à votre argent en ligne{% endtrans %}</div>

                    {# <div class="process wow fadeInUp" data-scroll-nav="1">
							<div class="raised"><span></span></div>
							{# <div class="process-info">
								<div class="process-funded"><span>46%</span>funded</div>
								<div class="process-pledged"><span>$46.000</span>pledged</div>
								<div class="process-backers"><span>32</span>backers</div>
								<div class="process-time"><span>21</span>days ago</div>
							</div> 
						</div> #}
                    {# <div class="button wow fadeInUp" data-wow-delay="0.1s">
							<a href="#" class="btn-secondary">Voir les Projects En cours ...</a>
							<a href="#" class="btn-primary">Crééer un nouveau project</a>
						</div> #}
                </div><!-- .sideshow-content -->
            </div>
        </div><!-- .sideshow -->

        <div class="project-love">
            <div class="container">
                <h2 class="title">{{ "Projets à la Une" }}</h2>
                <div class="description">

                </div>
                <div class="tab-menu tab-row">
                    <ul id="bx-pager" class="menu-category">
                        {% for category in categories %}
                            <li class="mc-option" data-tab="pp{{ category.id }}">
                                <a href="{{ path('category.index',{'category': category.slug}) }}"
                                                                                    data-slide-index="{{ category.id }}">{{ category.name }}</a>
                            </li>
                        {% endfor %}


                    </ul>
                </div>
                <div class="row">
                    <div class="col-lg-4">
                        <div class="popular-project">
                            <div id="pp0" class="pp-item active">
                                <img src="images/assets/book-bookmark.svg" alt="">
                                <h4>290+ Project Book</h4>
                            </div>
                            <div id="pp1" class="pp-item">
                                <img src="images/assets/manga-62.svg" alt="">
                                <h4>290+ Project Comics</h4>
                            </div>
                            <div id="pp2" class="pp-item">
                                <img src="images/assets/needle.svg" alt="">
                                <h4>290+ Project Crafts</h4>
                            </div>
                            <div id="pp3" class="pp-item">
                                <img src="images/assets/responsive.svg" alt="">
                                <h4>290+ Project Design & Art</h4>
                            </div>
                            <div id="pp4" class="pp-item">
                                <img src="images/assets/dress-woman.svg" alt="">
                                <h4>290+ Project Fashion</h4>
                            </div>
                            <div id="pp5" class="pp-item">
                                <img src="images/assets/video-66.svg" alt="">
                                <h4>290+ Project Film & Video</h4>
                            </div>
                            <div id="pp6" class="pp-item">
                                <img src="images/assets/soup.svg" alt="">
                                <h4>290+ Project Food</h4>
                            </div>
                            <div id="pp7" class="pp-item">
                                <img src="images/assets/note-04.svg" alt="">
                                <h4>290+ Project Music</h4>
                            </div>
                            <div id="pp8" class="pp-item">
                                <img src="images/assets/controller-3.svg" alt="">
                                <h4>290+ Project Games</h4>
                            </div>
                            <div id="pp9" class="pp-item">
                                <img src="images/assets/guitar.svg" alt="">
                                <h4>290+ Project Performances</h4>
                            </div>
                            <div id="pp10" class="pp-item">
                                <img src="images/assets/printer.svg" alt="">
                                <h4>290+ Project Publishing</h4>
                            </div>
                            <p>Discover projects just for you and get great recommendations when you select your
                                interests.</p>
                            <a href="create_a_campaign.html" class="btn-primary">Start a Campaign</a>
                        </div>
                    </div>
                    {% if campagns %}
                        <div class="col-lg-8">
                            <ul class="project-love-slider pls-col">
                                {% for campagn in campagns %}
                                    <li>
                                        <div class="project-love-item clearfix">
                                            <a class="project-love-image"
                                               href="{{ path('campagn.show',{ 'slug': campagn.slug, 'id': campagn.id}) }}">
                                                {% if  vich_uploader_asset(campagn, 'imageFile') %}
                                                    <img src="{{ vich_uploader_asset(campagn, 'imageFile') | imagine_filter('thumb') }}"
                                                         alt="{{ campagn.title }}">
                                                {% else %}
                                                    <img src="images/placeholder/470x340.png" alt="">
                                                    {# <img src="{{ vich_uploader_asset(campagn.category, 'image') | imagine_filter('thumb') }}" alt="{{ campagn.title }}" > #}
                                                {% endif %}

                                            </a>
                                            <div class="project-love-item-content project-love-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="project-love-description">{{ campagn.description }}</div>
                                                <div class="project-love-author">
                                                    <div class="author-profile">
                                                        <a class="author-avatar" href="#">

                                                            <img src="images/placeholder/40x40.png" alt="">
                                                        </a>Par <a class="author-name"
                                                                   href="#">{{ campagn.user._shortFullName }}</a>
                                                    </div>
                                                    <div class="author-address"><span
                                                                class="ion-location"></span>{{ campagn.place }}</div>
                                                </div>
                                                <div class="process">

                                                    {# force la taille du progress bar #}
                                                    <div class="raised"><span
                                                                style="width: {{ campagn.percentProgressBar }}%!important;"></span>
                                                    </div>
                                                    <div class="process-info">
                                                        <div class="process-pledged"><span
                                                                    class="small">{{ campagn.amountCollected |format_currency('GNF') }}</span>{{ "Récolté" }}
                                                        </div>
                                                        <div class="process-funded">
                                                            <span>{{ campagn.amountCollectedPercentage }}%</span>{{ "objectifs" }}
                                                        </div>
                                                        <div class="process-time">
                                                            <span>fin</span>{{ campagn.campagnEndAt | ago }}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>

                    {% endif %}
                </div>
            </div>
        </div><!-- .project-love -->
        <div class="latest campaign">
            <div class="container">
                <h2 class="title">{{ "Découverte de Campagnes"| trans }}</h2>
                <div class="campaign-tabs filter-theme">
                    <button class="button is-checked" data-filter=".filterinteresting">{{ "intéressant" }}</button>
                    <button class="button" data-filter=".filtersuccessful">{{ "Succès" }}</button>
                    <button class="button" data-filter=".filterpopular">{{ "Populaire" }}</button>
                    <button class="button" data-filter=".filterlatest">{{ "Dernière Campagne" }} </button>
                </div>
                <div class="campaign-content grid">
                    <div class="row">
                        {% for campagn in lastcampagns %}
                            <div class="col-lg-4 col-md-6 col-sm-6 col-6 filterinteresting filterpopular filterlatest">
                                <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="latest-button"><a href="{{ path('category.index') }}" class="btn-primary">{{ "Voir toutes les campagnes" | trans }}</a>
                </div>
            </div>
        </div><!-- .latest -->

        <section class="statics section">
            <h2 class="title">{% trans %}investissez en toute sereinité {% endtrans %}.</h2>
            <div class="description">
                <p>{% trans %}Trouvez l'offre d'investissement durable qui vous convient{% endtrans %}.</p>
                <p>{{ siteName }} {{ " est une plateforme de crowdfunding qui renforce vos levées de fonds avec des solutions de financement adaptées, un accompagnement personnalisé et une dynamique collaborative unique" | trans }}
                    .</p>
            </div>
            <div class="statics-content">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-sm-6 col-6">
                            <div class="statics-item">
                                <h3>{% trans %}Découvrez{% endtrans %}</h3>
                                <div class="statics-item-desc">
                                    <p>{% trans %}Des entreprises sélectionnées sur leurs perspectives de croissance, leur responsabilité et leur impact positif sur la société{% endtrans %}
                                        .</p></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-6">
                            <div class="statics-item">
                                <h3>{% trans %}Investissez{% endtrans %} </h3>
                                <div class="statics-item-desc"><p>100% en ligne, 100% transparent et 100 %
                                        responsable</p></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-6">
                            <div class="statics-item">
                                <h3>{% trans %}Bénéficiez{% endtrans %}</h3>
                                <div class="statics-item-desc">
                                    <p>{% trans %}D’éventuels dividendes et/ou plus-value si vous avez investi au capital de l’entreprise OU du versement d’intérêts périodiques si vous avez prêté votre argent à l’entreprise{% endtrans %}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-6">
                            <div class="statics-item">
                                <h3>{% trans %}Suivez{% endtrans %}</h3>
                                <div class="statics-item-desc">
                                    <p>{% trans %}En toute transparence l’évolution de l’entreprise dans laquelle vous avez investi, directement depuis votre compte {% endtrans %}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section><!-- .statics -->


        {# <div class="how-it-work">
				<div class="container">
					<h2 class="title">See How It Work</h2>
					<div class="description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</div>
					<div class="row">
						<div class="col-lg-4">
							<div class="item-work">
								<div class="item-icon"><span>01</span><i class="fa fa-flask" aria-hidden="true"></i></div>
								<div class="item-content">
									<h3 class="item-title">{{ "Découverte d'idée" }}</h3>
									<div class="item-desc">
										<p>{{ siteName }}{{ " est une plateforme de crowdfunding qui renforce vos levées de fonds avec des solutions de financement adaptées, un accompagnement personnalisé et une dynamique collaborative unique" | trans }}</p>
									</div>
								</div>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="item-work">
								<div class="item-icon"><span>02</span><i class="fa fa-leaf" aria-hidden="true"></i></div>
								<div class="item-content">
									<h3 class="item-title">Create a Campaigns</h3>
									<div class="item-desc"><p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.</p></div>
								</div>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="item-work">
								<div class="item-icon"><span>03</span><i class="fa fa-money" aria-hidden="true"></i></div>
								<div class="item-content">
									<h3 class="item-title">Get Funded</h3>
									<div class="item-desc"><p>Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.</p></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div><!-- .how-it-work --> #}

        {# <div class="partners">
				<div class="container">
					<div class="partners-slider owl-carousel">
						<div><a href="#"><img src="images/partner-01.png" alt=""></a></div>
						<div><a href="#"><img src="images/partner-02.png" alt=""></a></div>
						<div><a href="#"><img src="images/partner-03.png" alt=""></a></div>
						<div><a href="#"><img src="images/partner-04.png" alt=""></a></div>
						<div><a href="#"><img src="images/partner-05.png" alt=""></a></div>
						<div><a href="#"><img src="images/partner-06.png" alt=""></a></div>
					</div>
				</div>
			</div><!-- .partners --> #}

    </main>
{% endblock %}