<div ng:controller="BlogDetailsController" 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.Title}}</h3>
                            </div>
                            <div class="col-md-7">
                                <div class="np-main">
                                    <p>Go to next/previous page</p>
                                    <div class="np-controls">
                                        <a href="#/blogs" 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="post in posts">
                            <div class="row">
                                <div class="col-md-12">
                                    <h3><a href="#">{{post.Title}}</a></h3>
                                    <div class="post-meta">
                                        <i class="fa fa-calendar"></i> <a href="#">{{post.CreatedOn | date}}</a>
                                        <i class="fa fa-user"></i> <a href="#">{{post.CreatedBy}}</a>
                                        <i class="fa fa-comments"></i> <a href="#">{{blog.PostsCount}}</a>
                                    </div>
                                    <p ng-bind-html="renderHtml(post.Content)"></p>
                                </div>
                            </div>
                        </article>
                        <div class="page-head">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="np-main">
                                        <p>Go to next/previous page</p>
                                        <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>