{% extends 'frontNEW.html.twig' %}
{% block title %} {{ 'page.index.title' |trans }} {% endblock %}

{% block body %}
    <!-- slider start -->
    <div class="home-slides owl-carousel owl-theme">
        {% for slider in sliders %}
        <div class="main-banner jarallax" data-jarallax='{"speed": 0.3}'
             style="background: url('{{ asset('uploads/sliders/'~slider.path) }}');">
            <div class="d-table">
                <div class="d-table-cell">
                    <div class="container">
                        <div class="banner-content">
{#                            <h1>CNFCE</h1>#}
                            {% if slider.description is defined and slider.description != null %}
                                <h1>{{ slider.description|raw }}</h1>
                            {% endif %}
                            {% if slider.link is defined and slider.link != null %}
                                <a href="{{ slider.link }}" class="default-btn">{{ 'ensp'|trans }}</a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <section class="boxes-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-6 col-sm-6">
                    <div class="single-box">
                        <div class="icon">
                            <i class="flaticon-money"></i>
                        </div>
                        <h3>Economical Stability</h3>
                        <p>Lorem ipsum dolor sit consectetua dipiscing elit sed do eiusmod.</p>
                        <a href="#" class="details-btn"><i class="flaticon-right-arrow"></i></a>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-6">
                    <div class="single-box">
                        <div class="icon">
                            <i class="flaticon-tax"></i>
                        </div>
                        <h3>Tax Reform</h3>
                        <p>Lorem ipsum dolor sit consectetua dipiscing elit sed do eiusmod.</p>
                        <a href="#" class="details-btn"><i class="flaticon-right-arrow"></i></a>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-6 offset-lg-0 offset-md-3 offset-sm-3">
                    <div class="single-box">
                        <div class="icon">
                            <i class="flaticon-university"></i>
                        </div>
                        <h3>Educational Institution</h3>
                        <p>Lorem ipsum dolor sit consectetua dipiscing elit sed do eiusmod.</p>
                        <a href="#" class="details-btn"><i class="flaticon-right-arrow"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- slider fin -->
    <!-- présentation start -->
    {% if page != null %}
    <section class="about-area ptb-100 {% if app.request.locale != 'ar' %}pt-0{% endif %}">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-12 col-sm-12">
                    <div class="about-image">
                        <img src="{{ asset('uploads/pages/'~page[0].path) }}" alt="image" />
                        <div class="text">More than <span>20</span> years of Leadership</div>
                        <div class="shape">
                            <img src="{{ asset('assetsNEW/img/dot.png') }}" alt="image" />
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-12 col-sm-12">
                    <div class="about-content">
                        {% if app.request.locale != 'ar' %}
                            <span class="sub-title">&nbsp;</span>
                            <br><br>
                        {% endif %}
                        <h2>{{ 'page.index.qsn1'| trans }} {{ 'page.index.qsn2'| trans }} {{ 'page.index.qsn3'| trans }}</h2>
                        <p>
                            {{ page[0].content[:1143]|raw }}
                        </p>
                        <div class="signature-image">
                            <a href="{{ path('presentation') }}" class="default-btn">{{ 'ensp'|trans }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {% endif %}
    <!-- présentation fin -->

    <!-- adhésion start -->
    <section class="donate-area jarallax extra-pb" data-jarallax='{"speed": 0.3}' style="padding-top: 25px;">
        <div class="container">
            <div class="section-title" style="margin-bottom: 0px;">
                <span class="sub-title" style="font-size: 27px;">{{ 'menu.nav.nav5' |trans }}</span>
                <h2>Bienvenue à la CFNCE </h2>
            </div>
            <div class="donate-content">
                <a href="{{ path('fos_user_registration_register') }}" class="give-btn">{{ 'head.adhesion'|trans }}</a>
            </div>
        </div>
    </section>

    <section class="join-with-us-area">
        <div class="container">
            <div class="join-with-us-content">
                <h4 style="color: #EE7A00">{{'newsletter.modal03' | trans}}</h4>
                <h3 style="color: white;">{{'newsletter.modal04' | trans}}</h3>
                <form onsubmit="return false;">
                    <input type="email" class="input-email newsletter2" placeholder="{{'newsletter.modal02' | trans}}" name="EMAIL" autocomplete="off" />
                    <button class="btn-newsletter" type="submit" data-id="2">{{'newsletter.modal01' | trans}}</button>
                    <br>
                    <div class="alert alert-success msg-newsletter2 col-12" role="alert" style="display: none;">
                        <a href="#" class="alert-link">{{'newsletter.modal05' | trans}}</a>
                    </div>
                </form>
                <div class="shape"><img src="{{ asset('assetsNEW/img/dot-shape.png') }}" alt="image" /></div>
            </div>
        </div>
    </section>
    <!-- adhésion end -->

    <!-- events start -->
    {% if events != null %}
    <section class="upcoming-events-area ptb-100 pb-70">
        <div class="container">
            <div class="section-title">
                <h2>{{ 'menu.nav.nav3.sounav1' |trans }}</h2>
            </div>
            {% for event in events %}
            <div class="single-upcoming-events-box">
                <div class="events-box">
                    <div class="events-image">
                        {% if event.gallerie|length < 1 %}
                            <div class="image" style="background-image: url('{{ asset('uploads/galleries_events/emptyImage.png') }}');">
                                <img src="{{ asset('uploads/galleries_events/emptyImage.png') }}" alt="event">
                            </div>
                        {% else %}
                            {% for gallery in event.gallerie %}
                                {% if loop.index == 1 %}
                                    <div class="image" style="background-image: url('{{ asset('uploads/galleries_events/'~gallery.path) }}');">
                                        <img src="{{ asset('uploads/galleries_events/'~gallery.path) }}" alt="event">
                                    </div>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                    </div>
                    <div class="events-content">
                        <div class="content">
                            <h3>
                                <a href="{{ path('front_events_detail',{'token':event.token, 'type' :  1 }) }}">
                                    {{ event.title }}</a>
                            </h3>
                            <p>{{ event.description|length > 100 ? event.description|slice(0, 100) ~ '...' : event.description }}</p>
                            <a href="{{ path('front_events_detail',{'token':event.token, 'type' :  1 }) }}"
                               class="join-now-btn">{{ 'ensp'|trans }}</a>
                        </div>
                    </div>
                    <div class="events-date">
                        <div class="date">
                            <div class="d-table">
                                <div class="d-table-cell">
                                    <p><h4 style="color: white;">
                                        {% set month_start = event.start|date("F") %}
                                        {{ event.start|date('d') }} {{ month_start|trans }} {{ event.start|date('Y') }}</h4></p>
                                    <br><i class="fas fa-arrows-alt-v" style="font-size: 20px;opacity: 1;"></i>
                                    <p><h4 style="color: white;">
                                        {% set month_end = event.end|date("F") %}
                                        {{ event.end|date('d') }} {{ month_end|trans }} {{ event.end|date('Y') }}</h4></p>
                                    <i class="flaticon-calendar"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>
    {% endif %}
    <!-- events fin -->

    <!-- news start -->
    {% if news != null %}
    <section class="blog-area ptb-100 pb-70 bg-FAFAFA">
        <div class="container">
            <div class="section-title">
                <h2>{{ 'page.index.new1'| trans }} {{ 'page.index.new2'| trans }}</h2>
            </div>
            <div class="row">
                {% for n in news %}
                <div class="col-lg-4 col-md-6">
                    <div class="single-blog-post">
                        <div class="post-image">
                            {% if n.gallerie | length <1 %}
                            <a href="{{ path('news_front_detail',{'token':n.token}) }}">
                                <img src="{{ asset('uploads/galleries/emptyImage.png') }}" style="width: 100%;height: 200px;" alt="news" /></a>
                            {% else %}
                                {% for picture in n.gallerie %}
                                    {% if loop.index == 1 %}
                                        <a href="{{ path('news_front_detail',{'token':n.token}) }}">
                                            <img src="{{ asset('uploads/galleries/'~picture.path) }}" style="width: 100%;height: 200px;" alt="news" /></a>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                        </div>
                        <div class="post-content" style="height: 240px;">
                            <div class="post-meta">
                                <ul>
                                    <li><a href="javascript:void(0)">{{ n.category.name }}</a></li>
                                    <li>
                                        {% set month = n.createdAt|date('F') %}
                                        {{ n.createdAt|date('d') }} {{ month|trans }} {{ n.createdAt|date('Y') }}
                                    </li>
                                </ul>
                            </div>
                            <h3><a href="{{ path('news_front_detail',{'token':n.token}) }}">{{ n.title }}</a></h3>
                            <p>{{ n.description[:200]|raw }}</p>
                        </div>
                        <div class="post-content">
                            <a href="{{ path('news_front_detail',{'token':n.token}) }}" class="read-more-btn">{{ 'ensp'|trans }} <i class="flaticon-right-arrow"></i></a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </section>
    {% endif %}
    <!-- news fin -->
    <!-- partner start -->
    <div class="partner-area ptb-100 pb-0">
        <div class="partner-slides owl-carousel owl-theme">
            <div class="partner-item">
                <a href="#">
                    <img src="{{ asset('uploads/partners/p0.png') }}" alt="UTICA" />
                    <img src="{{ asset('uploads/partners/p0.png') }}" alt="UTICA" />
                </a>
            </div>
            <div class="partner-item">
                <a href="#">
                    <img src="{{ asset('uploads/partners/p1.jpg') }}" alt="MINA" />
                    <img src="{{ asset('uploads/partners/p1.jpg') }}" alt="MINA" />
                </a>
            </div>
            <div class="partner-item">
                <a href="#">
                    <img src="{{ asset('uploads/partners/p2.jpg') }}" alt="Konrad AdenauenStiftung" />
                    <img src="{{ asset('uploads/partners/p2.jpg') }}" alt="Konrad AdenauenStiftung" />
                </a>
            </div>
            <div class="partner-item">
                <a href="#">
                    <img src="{{ asset('uploads/partners/p3.png') }}" alt="ILO" />
                    <img src="{{ asset('uploads/partners/p3.png') }}" alt="ILO" />
                </a>
            </div>
            <div class="partner-item">
                <a href="#">
                    <img src="{{ asset('uploads/partners/p4.png') }}" alt="GP" />
                    <img src="{{ asset('uploads/partners/p4.png') }}" alt="GP" />
                </a>
            </div>
            <div class="partner-item">
                <a href="#">
                    <img src="{{ asset('uploads/partners/p5.jpg') }}" alt="Ministre du femme et de la famille" />
                    <img src="{{ asset('uploads/partners/p5.jpg') }}" alt="Ministre du femme et de la famille" />
                </a>
            </div>
            <div class="partner-item">
                <a href="#">
                    <img src="{{ asset('uploads/partners/p6.png') }}" alt="FCEM" />
                    <img src="{{ asset('uploads/partners/p6.png') }}" alt="FCEM" />
                </a>
            </div>
        </div>
    </div>
    <!-- partner fin -->
    <!-- info start -->
    <section class="testimonial-area ptb-100 pt-0">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <div class="testimonial-slides owl-carousel owl-theme">
                        <div class="testimonial-item">
                            <p>"The more you observe politics, the more you've got to admit that each party is worse than the other."</p>
                            <span class="name">Mainsor Smith</span>
                        </div>
                        <div class="testimonial-item">
                            <p>"The more you observe politics, the more you've got to admit that each party is worse than the other."</p>
                            <span class="name">Mainsor Smith</span>
                        </div>
                        <div class="testimonial-item">
                            <p>"The more you observe politics, the more you've got to admit that each party is worse than the other."</p>
                            <span class="name">Mainsor Smith</span>
                        </div>
                    </div>
                    <div class="funfact-area">
                        <div class="row">
                            <div class="col-lg-3 col-md-3 col-sm-3 col-6">
                                <div class="single-funfact">
                                    <h3><span class="odometer" data-count="1">00</span><span class="sign-icon">M</span></h3>
                                    <p>Active Volunteers</p>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-3 col-6">
                                <div class="single-funfact">
                                    <h3><span class="odometer" data-count="20">00</span><span class="sign-icon">K</span></h3>
                                    <p>Campaign Done</p>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-3 col-6">
                                <div class="single-funfact">
                                    <h3><span class="odometer" data-count="503">00</span></h3>
                                    <p>Area Coverage</p>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-3 col-6">
                                <div class="single-funfact">
                                    <h3><span class="odometer" data-count="177">00</span><span class="sign-icon">K</span></h3>
                                    <p>Projects Done</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- info end -->
{% endblock %}