{% extends 'front.html.twig' %}
{% block title %} Welcome CNFCE {% endblock %}
{% block stytesheets %}
    {{ parent() }}
{% endblock %}
{% block body %}
    <!-- hero area start -->
    <section style="margin-top: -20px;" id="home">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                {% for slider in sliders %}
                    <li data-target="#carouselExampleIndicators" data-slide-to="{{ loop.index }}"
                        {% if loop.index == 1 %}class="active"{% endif %}></li>
                {% endfor %}
            </ol>
            <div class="carousel-inner">
                {% for slider in sliders %}
                    <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                        <img class="d-block w-100" src="{{ asset('uploads/sliders/'~slider.path) }}"
                             alt="slide {{ loop.index }}">
                        <div class="carousel-caption d-none d-md-block">
                            <span>{{ slider.description|raw }}</span>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </section>
    <!-- hero area end -->

    <section class="ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="sec-title mb-20">
                        <h2>Who <span class="title-span">We </span> Are
                            <span class="sec-title-border">
									<span></span>
									<span></span>
									<span></span>
								</span>
                        </h2>
                        {#<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>#}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="single-success-box">
                        <p>
                            {{ page.content|raw }}
                        </p>
                    </div>
                </div>
                <div class="col-lg-5 offset-lg-1">
                    <div class="single-success-box">
                        <img src="{{ asset('uploads/pages/'~page.path) }}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- service bottom section start -->
    <section class="service-bottom2 ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="sec-title mb-20">
                        <h2>Latest <span class="title-span"> Events</span>
                            <span class="sec-title-border">
									<span></span>
									<span></span>
									<span></span>
								</span>
                        </h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                {% for event in events %}
                    <div class="col-lg-4 col-md-6">
                        <div class="service-bottom-box">
                            <div class="service-bottom-icon">
                                <div class="display-table">
                                    <div class="display-tablecell">
                                        <i class="icofont icofont-bag-alt"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="service-bottom-text">
                                <h4>{{ event.title }}</h4>
                                <p>{{ event.description|length > 100 ? event.description|slice(0, 100) ~ '...' : event.description }}</p>
                                <a href="#" class="theme-btn theme-btn3">Read More</a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
    <!-- service section end -->

    <!-- blog section start -->
    <section class="blog-area ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="sec-title mb-20">
                        <h2>Our <span class="title-span">Latest</span> News
                            <span class="sec-title-border">
									<span></span>
									<span></span>
									<span></span>
								</span>
                        </h2>
                        {#<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut#}
                        {#labore et dolore magna aliqua.</p>#}
                    </div>
                </div>
            </div>
            <div class="row">
                {% for n in news %}
                    <div class="col-lg-4 col-sm-6">
                        <div class="single-post">
                            <div class="post-thumbnail">
                                {% for picture in n.gallerie %}
                                    {% if loop.index == 1 %}
                                        <a href="#"><img src="{{ asset('uploads/galleries/'~picture.path) }}"
                                                         alt="blog"></a>
                                    {% endif %}
                                {% endfor %}
                            </div>
                            <div class="post-details">
                                <div class="post-author">
                                    <a href="#"><i class="icofont icofont-heart"></i>69</a>
                                    <a href="#"><i class="icofont icofont-share"></i>share</a>
                                    <a href="#"><i class="icofont icofont-speech-comments"></i>Comments</a>
                                </div>
                                <h4 class="post-title"><a href="blog.html">{{ n.title }}</a></h4>
                                <div class="post-author">
                                    <a href="#"><i class="icofont icofont-user"></i>By {{ n.category.name }}
                                        | {{ n.createdAt|date('d M Y') }}</a>
                                </div>
                                <p>{{ n.content|raw }}</p>
                                <a href="{{ path('news_front_detail',{'token':n.token}) }}"
                                   class="theme-btn theme-btn5">Read More</a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
    <!-- blog section end -->

    <!-- offices section start -->
    <section class=" ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="sec-title mb-50">
                        <h2>Our <span class="title-span">Offices</span>
                            <span class="sec-title-border">
									<span></span>
									<span></span>
									<span></span>
								</span>
                        </h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="testimonial-slide">
                        {% for office in offices %}
                            <div class="single-team-member">
                                <div class="team-member-img">
                                    <img src="{{ asset('uploads/offices/'~office.id~'/'~office.path) }}" alt="team">
                                    {#<div class="team-member-icon">#}
                                    {#<div class="display-table">#}
                                    {#<div class="display-tablecell">#}
                                    {#<a href="#"><i class="icofont icofont-social-facebook"></i></a>#}
                                    {#<a href="#"><i class="icofont icofont-social-twitter"></i></a>#}
                                    {#<a href="#"><i class="icofont icofont-social-dribbble"></i></a>#}
                                    {#<a href="#"><i class="icofont icofont-social-google-plus"></i></a>#}
                                    {#</div>#}
                                    {#</div>#}
                                    {#</div>#}
                                </div>
                                <div class="team-member-info">
                                    <a href="#"><h4>{{ office.title }}</h4></a>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- testimonial section end -->

    {#<div id="map"></div>#}
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>
        function initMap() {
            var uluru = {lat: -26.397, lng: 135.644};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 6,
                center: uluru
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
        }
    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBnKyOpsNq-vWYtrwayN3BkF3b4k3O9A_A&callback=initMap"></script>
{% endblock %}