<div ng:controller="BlogMainController" class="row-fluid" id="body-main" qn:fillheight>
    <script type="text/javascript">
        /* Flexslider */
        $(window).load(function () {
            "use strict";
            $('.flexslider').flexslider({
                animation: "fade",
                start: function (slider) {
                    $('.np-controls a.next').click(function (event) {
                        event.preventDefault();
                        slider.flexAnimate(slider.getTarget("next"));
                    });
                    $('.np-controls a.previous').click(function (event) {
                        event.preventDefault();
                        slider.flexAnimate(slider.getTarget("previous"));
                    });
                }
            });
        });
    </script>
    <div class="flexslider">
        <div class="slides">
            <section class="flex-active">
                <div class="item blog" id="4">
                    <div class="page-head">
                        <div class="row">
                            <div class="col-md-5">
                                <h3>Blog</h3>
                            </div>
                            <div class="col-md-7">
                                <div class="np-main">
                                    <div class="np-controls">
                                        <a href="#/resume" class="previous"><i class="fa fa-arrow-circle-left"></i></a>
                                        <a href="#/contact" class="next"><i class="fa fa-arrow-circle-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="blog-wrap">
                        <article ng:repeat="blog in blogs">
                            <div class="row">
                                <div class="col-md-12">
                                    <h3><a href="#/blogs/{{blog.ID}}">{{blog.Title}}</a></h3>
                                    <div class="post-meta">
                                        <i class="fa fa-calendar"></i> <a href="#/blogs/{{blog.ID}}">{{blog.PublishedOn | date}}</a>
                                        <i class="fa fa-user"></i> <a href="#/blogs/{{blog.ID}}">{{blog.CreatedBy}}</a>
                                        <i class="fa fa-comments"></i> <a href="#/blogs/{{blog.ID}}">{{blog.PostsCount}}</a>
                                    </div>
                                    <p>{{blog.Summary}}</p>
                                </div>
                            </div>
                        </article>
                        <div class="page-head">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="np-main">
                                        <div class="np-controls">
                                            <a class="previous" ng:disabled="!pager.canPrev()" ng:click="pager.prev()"><i class="fa fa-arrow-circle-left"></i></a>
                                            <a class="next" ng:disabled="!pager.canNext()" ng:click="pager.next()"><i class="fa fa-arrow-circle-right"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </section>
        </div>
    </div>
</div>