{% extends '../../layout.server.view.html' %} {% block cssFile %} {% endblock %} {% block content %}
<link href="/assets/frontend/pages/css/blog.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/blog.css">
<style>
    .sub-more {
        display: none;
    }

    .category-links a {
        margin: 0;
    }

    .category-links {
        padding: 10px 0 10px 0;
    }

    @media only screen and (max-width:767px) {
        .category-links img {
            width: 100% !important;
            height: auto !important;
        }

        .category-links {
            padding: 10px 0 10px 0;
        }

        .category-links a {
            margin: 0;
        }
    }

    .row:after {
        clear: none;
    }

  
</style>
<!-- <div class="gostore-header">
    <img class="banner-blog" src="/img/banner-tintuc.jpg" alt="" style="width:100%">

</div> -->

<!-- slider -->
<div class="slider" style="position:relative">
    <div id="jssor_1"
        style="position:relative;margin:0 auto;top:0px;left:0px;width:1300px;height:450px;overflow:hidden;">
        <!-- Loading Screen -->
        <div data-u="loading" class="jssorl-009-spin"
            style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
            <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;"
                src="/img/slider/spin.svg" />
        </div>
        <div data-u="slides"
            style="cursor:default;position:relative;top:0px;left:0px;width:1300px;height:450px;overflow:hidden;">
            <div>
                <img style="height: 450px;width: 100%;" data-u="image" src="https://i.imgur.com/QCiOQIf.jpg" />
            </div>
            <div>
                <img style="height: 450px;width: 100%;" data-u="image" src="https://i.imgur.com/6Ljug5X.png" />
            </div>
            <div>
                <img style="height: 450px;width: 100%;" data-u="image" src="https://i.imgur.com/pkumn5a.png" />
            </div>
            <div>
                <img style="height: 450px;width: 100%;" data-u="image" src="https://i.imgur.com/Cz15x8X.png" />
            </div>

        </div>

        <!-- Bullet Navigator -->
        <div data-u="navigator" class="jssorb032" style="position:absolute;bottom:25px;right:12px;" data-autocenter="1"
            data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewbox="0 0 16000 16000" style="position:absolute;left:0;width:100%;height:100%;">
                    <circle class="b" cx="8000" cy="8000" r="5800"></circle>
                </svg>
            </div>
        </div>
    </div>
</div>


<div class="blogdetails">
    <div class="container">
        <div class="row" style="margin-top: 20px;">
            <div class="col-md-9 col-sm-9 col-xs-12 border-right ">
                <div class="bre" style="border-bottom: 1px solid #ccc;padding-bottom: 20px;margin-bottom: 30px;">
                    <a href="/" class="category-heading" style="color:#333 !important">Trang chủ</a>
                    <span class="doted"></span>
                    <a href="/blog" class="category-heading" style="color:#333 !important">Tin tức</a>
                    <!-- <h1 class="heading-1 text-center" style="margin-bottom: 20px;">
                    <a href="/blog" style="text-decoration:none;font-size: 24px;">
                        TIN TỨC HÓA ĐƠN ĐIỆN TỬ
                    </a>
                </h1> -->
                </div>
                <div class="row">
                    {% for item in blog %}
                    <div class="col-md-6 posts-box">
                        <a href="/blog/{{item.TITLE_URL}}" class="img-link">
                            <img class="lazy" title="{{item.TITLE}}" class="blog-image" data-original="{{item.IMAGE}}"
                                alt="{{item.TITLE}}" style="width: 100%;height: 200px;overflow: hidden;">
                        </a>
                        <div class="time">

                            <a href="/blog/{{item.TITLE_URL}}" class="category-heading" title="{{item.TITLE}}"
                                style="text-decoration: none;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;height: 50px;">
                                <i class="fa fa-calendar" style="color:#767676;font-size: 12px;padding-right: 5px;"></i>
                                <span style="color: #767676;font-size: 12px;">
                                    {{item.CREATED_DATE | date('d-m-Y')}}
                                </span>
                                <span class="doted" style="color: #767676;font-size: 12px;"></span>
                                {{item.TITLE}}
                            </a>
                        </div>
                        <h2>
                            <p title="{{item.DESCRIPTION}}"
                                style="font-size: 14px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical">
                                {{item.DESCRIPTION}}
                            </p>
                        </h2>
                    </div>
                    {% endfor %}
                    <div class="col-md-12">
                        <div class="">
                            <ul id="pagination-demo" class="sync-pagination pagination-sm"></ul>
                            <input class="totalPage" style="display: none" value="{{ totalPage }}" />
                        </div>
                    </div>
                </div>
            </div>
            <!-- danh mục tin -->
            <div class="col-md-3 col-sm-3 col-xs-12 blog-heading">
                <div class="search" style="display:none">
                    <label class="search-lable">
                        <i class="fa fa-search" aria-hidden="true"></i>
                    </label>
                    <input class="search-form__input marketing-input" id="SearchInput" placeholder="Search articles"
                        type="search">
                </div>
                <h3 class="category-blog">
                    Danh mục tin
                </h3>
                <div class="category-links">
                    {% for item in blogCategory %}
                    <a title="{{item.TITLE}}" href="/blog/cate/{{item.TITLE_URL}}">
                        <h4>{{item.TITLE}}</h4>
                        <p class="subtitle"></p>
                    </a>
                    {% endfor %}
                    <h3 class="post-blog">Xem nhiều nhất</h3>
                    {% for item in topBlog %}
                    <div class="category-links"
                        style="width:100%;float:left;margin-bottom: 5px;border-bottom: 1px solid #ccc;">
                        <div class="col-md-4 col-xs-6">
                            <img class="lazy" style="width:75px;height:75px;margin: auto;display: block;"
                                src="{{item.IMAGE}}" alt="{{item.TITLE}}">
                        </div>
                        <div class="col-md-8 col-xs-6">
                            <a style="border-bottom:none" href="/blog/{{item.TITLE_URL}}" title="{{item.TITLE}}">
                                <p
                                    style="overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
                                    {{item.TITLE}}
                                </p>
                            </a>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} {% block jsFile %}
<script src="/js/lazy-load/jquery.min.js"></script>
<script src="/js/lazy-load/jquery.lazyload.min.js"></script>
<script>
    $("img.lazy").lazyload(
        {
            effect: "fadeIn"
        }
    );
    $('img').addClass('lazy');
</script>
<script src="/assets/frontend/pages/scripts/jquery.twbsPagination.min.js" type="text/javascript"></script>
<link href="/assets/global/plugins/carousel-owl-carousel/owl-carousel2/owl.carousel.min.css" rel="stylesheet">
<script src="/assets/global/plugins/carousel-owl-carousel/owl-carousel2/owl.carousel.min.js"
    type="text/javascript"></script>
<!-- load more blog -->
<script>
    $(function () {
        $(".sub-more").slice(0, 3).show();
        $("#loading").on('click', function (e) {
            e.preventDefault();
            $(".sub-more:hidden").slice(0, 3).slideDown();
            if ($(".sub-more:hidden").length == 0) {
                $("#load").fadeOut('slow');
            }
        });

    });
</script>
<!-- paging -->
<script>
    $(document).ready(function () {
        // let totalPage = {{ totalPage }};
        var totalPage = parseInt($(".totalPage").val());
        $('#pagination-demo').twbsPagination({
            totalPages: totalPage,
            href: '?page={% raw %}{{number}}{% endraw %}',
            startPage: 1,
            last: 'Cuối cùng',
            first: 'Đầu tiên',
            next: '<i class="fa fa-angle-right" aria-hidden="true"></i>',
            prev: '<i class="fa fa-angle-left" aria-hidden="true"></i>'
        });
    });
</script>
{% endblock %}