{% include 'blocks/head.html' %}
<!-- Header -->
{% include 'blocks/header.html' %}
<!-- Header -->
<!-- Main Content -->
<!-- {% for photo in photos %}
<br><img src="../{{ photo_dir }}/{{ photo }}"> <br />
{% endfor %} -->
<main id="main-content">
                <div class="main-section">
                    <section class="page-section" style="padding:30px 0 0;">
                        <div class="container">
                            <div class="row">
                                <div class="section-fullwidth">
                                    <div class="element-size-100">
                                        <div class="px-project-block">
                                            <div class="col-md-12">
                                                <div class="px-section-title">
                                                    <h3>{{ project_name }}</h3>
                                                    <span></span>
                                                </div>
                                                <div class="element-size-100">
                                                    <div class="px-gallery">
                                                        <div id="slider">
                                                            <ul class="slides">
                                                            {% for photo in photos %}
                                                            <li>
                                                                <img src="{{ url_for('show_project_file', category=category, project_name=project_name, filename=photo) }}" alt="">
                                                            </li>
                                                            {% endfor %}
                                                         </ul>
                                                         </div>
                                                        <div id="carousel">
                                                            <ul class="slides">
                                                         {% for photo in photos %}
                                                            <li>
                                                                <img src="{{ url_for('show_project_file', category=category, project_name=project_name, filename=photo) }}" alt="">
                                                            </li>
                                                            {% endfor %}
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="element-size-100">
                                                    <div class="px-separator">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
            </main>
        <!-- jQuery (necessary for JavaScript plugins) -->
        <script src="{{ url_for('static', filename='scripts/jquery.js') }}"></script>
        <script src="{{ url_for('static', filename='scripts/bootstrap.min.js') }}"></script>
        <script src="{{ url_for('static', filename='scripts/modernizr.js') }}"></script>
        <script src="{{ url_for('static', filename='scripts/jquery.flexslider-min.js') }}"></script>
        <script src="{{ url_for('static', filename='scripts/owl.carousel.min.js') }}"></script>
        <script src="{{ url_for('static', filename='scripts/sticky_header.js') }}"></script>
        <script src="{{ url_for('static', filename='scripts/jquery.nicescroll.min.js') }}"></script>

        <script src="{{ url_for('static', filename='scripts/functions.js') }}"></script>
        <script type="text/javascript">
            $(window).load(function() {
                $('#carousel').flexslider({
                    animation: "slide",
                    prevText:"<em class='icon-arrow-left9'></em>",
                    nextText:"<em class='icon-arrow-right9'></em>",
                    controlNav: true,
                    animationLoop: false,
                    slideshow: false,
                    itemWidth: 142,
                    itemMargin: 20,
                    asNavFor: '#slider'
                });    
                $('#slider').flexslider({
                    animation: "slide",
                    controlNav: false,
                    animationLoop: false,
                    slideshow: false,
                    sync: "#carousel"
                });
            });
        </script>
        <script type="text/javascript">
            $('.px-portfolio-carousel').owlCarousel({
                nav: true,
                margin: 5,
                navText: [
                  "<i class=' icon-angle-left'></i>",
                  "<i class='icon-angle-right'></i>"
                ],
                responsive: {
                  0: {
                    items: 1 // In this configuration 1 is enabled from 0px up to 479px screen size 
                  },

                  480: {
                    items: 2, // from 480 to 677 
                    nav: false // from 480 to max 
                  },

                  678: {
                    items: 3, // from this breakpoint 678 to 959
                    center: false // only within 678 and next - 959
                  },

                  960: {
                    items: 3, // from this breakpoint 960 to 1199
                    center: false,
                    loop: false

                  },

                  1200: {
                    items: 3,
                  }
                }
    
            });
        </script>
<!-- Main Content -->
<!-- Footer -->
{% include 'blocks/footer.html' %}
<!-- Footer -->
{% include 'blocks/foot.html' %}