{% include 'blocks/head.html' %}
<!-- Header -->
{% include 'blocks/header.html' %}
<!-- Header -->
<!-- Main Content -->
<main id="main-content">
    <div class="main-section">
        <section class="page-section" style="margin-bottom:12px; padding:51px 0 0 0;">
            <div class="container">
                <div class="row">
                    <div class="section-fullwidth">
                                <h2>Portfolio</h2>
                        <div class="element-size-100">
                            <section id="portfolio-section">
                                <div class="wrap-pad first">
                                    <div class="row">
                                        <!-- ./ Heading div-->
                                        <div class=" px-filter-holder col-md-12" >
                                            <div class="px-main-filter">
                                                <span>SORT BY:</span>
                                                <ul class="portfolio-filter">
                                                    <li><a class="btn btn-primary active margin-5" href="#" data-filter="*">List All</a></li>
                                                    {% for category in categories %}
                                                        <li><a class="btn btn-primary margin-5" href="#" data-filter=".{{ category|replace(' ','') }}">{{ category }}</a></li>
                                                    {% endfor %}                                                    
                                                </ul>
                                            </div>
                                        </div>
                                        <!-- ./ Filter Head div-->
                                            <div class="px-portfolio px-portfolio-masonary">
                                                <ul class="portfolio-items col-3">
                                                    {% for project in projects %}
                                                        <li class="portfolio-item {{ project[0]|replace(' ','') }} col-md-3">
                                                            <div class="item-main">
                                                                <div class="portfolio-image">
                                                                    <div class="px-media">
                                                                        <figure>
                                                                            <a href="#"><img src="{{ url_for('show_project_file', category=project[0], project_name=project[1], filename=project[2]) }}" alt=""></a>
                                                                            <figcaption>
                                                                                <h6><a href="{{ url_for('show_project', category=project[0], project_name=project[1]) }}">{{ project[1] }}</a></h6>
                                                                                <span><a href="{{ url_for('show_project', category=project[0], project_name=project[1]) }}">{{ project[0] }}</a></span>
                                                                            </figcaption>
                                                                        </figure>
                                                                        <h6 class="px-luxury">{{ project[0]|replace(' ','') }}</h6>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    {% endfor %}
                                                </ul>
                                            </div>
                                        <!-- ./ Content div-->
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</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/jquery.prettyPhoto.js') }}"></script>
        <script src="{{ url_for('static', filename='scripts/isotope.min.js') }}"></script>
        <script src="{{ url_for('static', filename='scripts/custom.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 >
            $('.px-carousel').owlCarousel({
                nav: true,
                margin: 20,
                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: 4, // from this breakpoint 960 to 1199
                    center: false,
                    loop: false

                  },

                  1200: {
                    items: 4,
                  }
                }
    
            });
            jQuery(window).load(function(){
            jQuery('.px-testimonial-slider, .px-bannerslider').flexslider({
              animation: "fade",
              prevText:"<em class='icon-arrow-left9'></em>",
              nextText:"<em class='icon-arrow-right9'></em>",
              start: function(slider){
                jQuery('body').removeClass('loading');
              }
            });
          });
        </script>
<!-- Main Content -->
<!-- Footer -->
{% include 'blocks/footer.html' %}
<!-- Footer -->
{% include 'blocks/foot.html' %}