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

{% block title %}
{{ campagn.title }}
{% endblock %}

{% block body %}

    <main id="main" class="site-main">
        <div class="page-title background-campaign">
            <div class="container">
                <h1>{{ campagn.title }}</h1>
                <div class="breadcrumbs">
                    <ul>
                        <li><a href="{{ path('page.home') }}">Home</a><span>/</span></li>
                        <li>{{ campagn.slogan }}</li>
                    </ul>
                </div><!-- .breadcrumbs -->
            </div>
        </div><!-- .page-title -->
        <div class="campaign-content">
            <div class="container">
                <div class="campaign">
                    <div class="campaign-item clearfix">
                        <div class="campaign-image">
                            <div id="owl-campaign" class="campaign-slider owl-carousel owl-theme"
                                 style="opacity: 1; display: block;">
                                <div class="owl-wrapper-outer">
                                    <div class="owl-wrapper"
                                         style="width: 2292px; left: 0px; display: block; transition: all 0ms ease 0s; transform: translate3d(-382px, 0px, 0px);">
                                        <div class="owl-item" style="width: 382px;">
                                            <div class="item">
                                                <img src="{{ vich_uploader_asset(campagn, 'imageFile') | imagine_filter('show') }}" alt="{{ campagn.title }}" >
                                            </div>
                                        </div>
                                        {#<div class="owl-item" style="width: 382px;">
                                            <div class="item"><img src="{{ asset('images/placeholder/570x400.png') }}" alt=""></div>
                                        </div>
                                        <div class="owl-item" style="width: 382px;">
                                            <div class="item"><img src="{{ asset('images/placeholder/570x400.png') }}" alt=""></div>
                                        </div>#}
                                    </div>
                                </div>


                                <div class="owl-controls clickable">
                                    <div class="owl-pagination">
                                        <div class="owl-page active"
                                             style="background: url(&quot;{{ vich_uploader_asset(campagn, 'imageFile') | imagine_filter('show') }}&quot;) 0% 0% / cover;">
                                            <span class=""></span></div>
                                        <div class="owl-page"
                                             style="background: url(&quot;{{ vich_uploader_asset(campagn, 'imageFile') | imagine_filter('show') }}&quot;) 0% 0% / cover;">
                                            <span class=""></span></div>
                                        <div class="owl-page"
                                             style="background: url(&quot;{{ vich_uploader_asset(campagn, 'imageFile') | imagine_filter('show') }}&quot;) 0% 0% / cover;">
                                            <span class=""></span></div>
                                    </div>
                                    <div class="owl-buttons">
                                        <div class="owl-prev"><span class="ion-ios-arrow-back"></span></div>
                                        <div class="owl-next"><span class="ion-ios-arrow-forward"></span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="campaign-box">
                            <a href="#" class="category">{{ campagn.category.name }}</a>
                            <h3>{{ campagn.title }}</h3>
                            <div class="campaign-description">

                                {{ campagn.slogan | raw | nl2br }}
                            </div>
                            <div class="campaign-author clearfix">
                                <div class="author-profile">
                                    <a class="author-icon" href="#"><img src="{{ asset('images/placeholder/35x35.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">
                                <div class="raised"><span style="width: 262px;"></span></div>
                                <div class="process-info">
                                    <div class="process-pledged"><span class="small">5000 GNF</span>{{ "Récolté" }}</div>
                                    <div class="process-funded"><span>41%</span>{{ "objectifs" }}</div>
                                    <div class="process-time"><span>37</span>Contrib.</div>
                                    <div class="process-time"><span>fin</span>{{ campagn.campagnEndAt | ago }}</div>

                                </div>
                            </div>
                            <div class="button">
                                <form action="#" id="priceForm" class="campaign-price quantity">

                                    <button class="btn-primary" type="submit">Soutenir cette Campagne</button>
                                </form>
                                <a href="#" class="btn-secondary"><i class="fa fa-heart" aria-hidden="true"></i>Me Rappler</a>
                            </div>
                            <div class="share">
                                <p>Partager ce Projet</p>
                                <ul>
                                    <li class="share-facebook"><a href="#"><i class="fa fa-facebook"
                                                                              aria-hidden="true"></i></a></li>
                                    <li class="share-twitter"><a href="#"><i class="fa fa-twitter"
                                                                             aria-hidden="true"></i></a></li>
                                    <li class="share-google-plus"><a href="#"><i class="fa fa-google-plus"
                                                                                 aria-hidden="true"></i></a></li>
                                    <li class="share-linkedin"><a href="#"><i class="fa fa-linkedin"
                                                                              aria-hidden="true"></i></a></li>
                                    <li class="share-code"><a href="#"><i class="fa fa-code" aria-hidden="true"></i></a>
                                    </li>
                                </ul>

                                {% if campagn.socialMedia %}
                                <p>Suivez également le projet sur</p>
                                <ul>
                                    {% if campagn.socialMedia.facebook %}
                                    <li class="share-facebook"><a href="{{ campagn.socialMedia.facebook }}"><i class="fa fa-facebook"
                                                                              aria-hidden="true"></i></a></li>
                                    {% endif %}
                                    {% if campagn.socialMedia.twitter %}
                                    <li class="share-twitter"><a href="{{ campagn.socialMedia.twitter }}"><i class="fa fa-twitter"
                                                                             aria-hidden="true"></i></a></li>
                                    {% endif %}
                                    <li class="share-google-plus"><a href="#"><i class="fa fa-google-plus"
                                                                                 aria-hidden="true"></i></a></li>
                                    {% if campagn.socialMedia.instagram %}
                                    <li class="share-instagram"><a href="{{ campagn.socialMedia.instagram }}"><i class="fa fa-instagram"
                                                                              aria-hidden="true"></i></a></li>
                                    {% endif %}
                                    {% if campagn.socialMedia.site %}
                                    <li class="share-code"><a href="{{ campagn.socialMedia.site }}"><i class="fa fa-code" aria-hidden="true"></i></a>
                                    </li>
                                    {% endif %}
                                </ul>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- .campaign-content -->
        <div class="campaign-history">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="campaign-tabs">
                            <ul class="tabs-controls">
                                <li class="active" data-tab="campaign"><a href="#">Projet</a></li>
                                <li data-tab="backer" class=""><a href="#">Contributeurs</a></li>
                                <li data-tab="faq" class=""><a href="#">FAQ</a></li>
                                <li data-tab="updates" class=""><a href="#">Actualité</a></li>
                                <li data-tab="comment" class=""><a href="#">Commentaires</a></li>
                            </ul>
                            <div class="campaign-content">
                                <div id="campaign" class="tabs active">

                                    <p>{{ campagn.description | raw }}</p>
                                    <h2>À quoi servira la collecte</h2>

                                    <p>{{ campagn.reason | raw }} </p>
                                </div>
                                <div id="backer" class="tabs">
                                    <table>
                                        <tbody>
                                        <tr>
                                            <th>Name</th>
                                            <th>Donate Amount</th>
                                            <th>Date</th>
                                        </tr>
                                        <tr>
                                            <td>Andrew</td>
                                            <td>$100</td>
                                            <td>June 25, 2017</td>
                                        </tr>
                                        <tr>
                                            <td>Andrew</td>
                                            <td>$60</td>
                                            <td>December 25, 2017</td>
                                        </tr>
                                        <tr>
                                            <td>Andrew</td>
                                            <td>$70</td>
                                            <td>November 25, 2017</td>
                                        </tr>
                                        <tr>
                                            <td>Andrew</td>
                                            <td>$90</td>
                                            <td>February 25, 2017</td>
                                        </tr>
                                        <tr>
                                            <td>Andrew</td>
                                            <td>$30</td>
                                            <td>January 25, 2017</td>
                                        </tr>
                                        <tr>
                                            <td>Andrew</td>
                                            <td>$80</td>
                                            <td>June 15, 2017</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div id="faq" class="tabs">
                                    <h2>Frequently Asked Questions</h2>
                                    <p>Looks like there aren't any frequently asked questions yet. Ask the project
                                        creator directly.</p>
                                    <a href="#" class="btn-primary">Ask a question</a>
                                </div>
                                <div id="updates" class="tabs">
                                    <ul>
                                        <li>
                                            <p class="date">30-06-2017</p>
                                            <h3>New Project Launches in Bangalore</h3>
                                            <div class="desc"><p>Bacon spare ribs rump chuck turkey, ham hock capicola.
                                                    Strip steak tongue kielbasa, boudin hamburger t-bone capicola
                                                    turducken. Landjaeger meatloaf pork belly spare ribs chuck.</p>
                                            </div>
                                        </li>
                                        <li>
                                            <p class="date">31-05-2018</p>
                                            <h3>Our First Office Start</h3>
                                            <div class="desc"><p>Corned beef leberkas fatback porchetta, strip steak
                                                    salami turkey short loin flank ham hock landjaeger. Leberkas pork
                                                    belly kevin shoulder filet mignon. Bacon spare ribs rump chuck
                                                    turkey, ham hock capicola. Strip steak tongue kielbasa, boudin
                                                    hamburger t-bone capicola turducken. Landjaeger meatloaf pork belly
                                                    spare ribs chuck.</p></div>
                                        </li>
                                        <li>
                                            <p class="date">31-05-2018</p>
                                            <h3>We Touch the Million Dollar Milestone</h3>
                                            <div class="desc"><p>Corned beef leberkas fatback porchetta, strip steak
                                                    salami turkey short loin flank ham hock landjaeger. Leberkas pork
                                                    belly kevin shoulder filet mignon. Bacon spare ribs rump chuck
                                                    turkey, ham hock capicola. Strip steak tongue kielbasa, boudin
                                                    hamburger t-bone capicola turducken. Landjaeger meatloaf pork belly
                                                    spare ribs chuck.</p></div>
                                        </li>
                                        <li>
                                            <p class="date">31-05-2018</p>
                                            <h3>Our Employee Reach 100 Person</h3>
                                            <div class="desc"><p>Sed cursus hendrerit odio, at aliquet leo hendrerit a.
                                                    Nulla ultricies sagittis dolor, quis maximus magna consectetur eu.
                                                    Cras pharetra aliquam fringilla. Integer placerat sapien dapibus
                                                    varius luctus. Lorem ipsum dolor sit amet, consectetur adipiscing
                                                    elit. Vestibulum in aliquam urna, ultrices lobortis lacus. Praesent
                                                    mi enim, congue semper volutpat ut, bibendum tempor arcu.</p></div>
                                        </li>
                                    </ul>
                                </div>
                                <div id="comment" class="tabs comment-area">
                                    <h3 class="comments-title">1 Comment</h3>
                                    <ol class="comments-list">
                                        <li class="comment clearfix">
                                            <div class="comment-body">
                                                <div class="comment-avatar"><img src="images/placeholder/70x70.png"
                                                                                 alt=""></div>
                                                <div class="comment-info">
                                                    <header class="comment-meta"></header>
                                                    <cite class="comment-author">Jordan B. Goodale</cite>
                                                    <div class="comment-inline">
                                                        <span class="comment-date">2 days ago</span>
                                                        <a href="#" class="comment-reply">Reply</a>
                                                    </div>
                                                    <div class="comment-content"><p>Lorem ipsum dolor sit amet,
                                                            consectetur adipiscing elit. Equidem e Cn. Sequitur
                                                            disserendi ratio cognitioque naturae; Nunc vides, quid
                                                            faciat. Duo Reges: constructio interrete. Memini vero,
                                                            inquam; Quis Aristidem non mortuum diligit?</p></div>
                                                </div>
                                            </div>
                                        </li>
                                    </ol>
                                    <div id="respond" class="comment-respond">
                                        <h3 id="reply-title" class="comment-reply-title">Leave A Comment?</h3>
                                        <form action="#" id="commentForm">
                                            <div class="field-textarea">
                                                <textarea rows="8" placeholder="Your Comment"></textarea>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-4 field">
                                                    <input type="text" value="" name="s" placeholder="Your Name">
                                                </div>
                                                <div class="col-md-4 field">
                                                    <input type="text" value="" name="s" placeholder="Your Email">
                                                </div>
                                                <div class="col-md-4 field">
                                                    <input type="text" value="" name="s" placeholder="Website">
                                                </div>
                                            </div>
                                            <button type="submit" value="Send Messager" class="btn-primary">Post
                                                Comment
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- .main-content -->
                    {% if campagn.reward %}
                    <div class="col-lg-4">
                        <div class="support support-campaign">
                            <h3 class="support-campaign-title">Soutenir cette Campagne</h3>

                            {% for reward in campagn.reward %}
                                {% if reward %}
                                    <div class="plan">
                                        <a href="{{ path('contribution.show',{'campagn_slug': campagn.slug, 'campagn_id': campagn.id, 'reward_slug': reward.slug, 'reward_id': reward.id}) }}">
                                            <img src="{{ vich_uploader_asset(reward, 'imageFile') | imagine_filter('cover') }}" alt="{{ reward.title }}" >
                                            <p>&nbsp;</p>
                                            <h4>{{ reward.title}}</h4>
                                            <h4>{{ reward.amount | format_currency('GNF') }}</h4>
                                            <div class="plan-desc">{{ reward.description | raw  }}</div>
                                            <div class="plan-date">{{ reward.deliveryAt | ago }}</div>
                                   {#         <div class="plan-author">Estimated Delivery</div>#}
                                            <div class="backer">35 contributeurs </div>
                                            <button class="btn-primary mt-1" type="submit">Soutenir cette Campagne</button>
                                        </a>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div><!-- .sidebar -->
                    {% endif %}
                </div>
            </div>
        </div><!-- .campaign-history -->
    </main>
{% endblock %}