{% extends 'base.html.twig' %}
{% block title %}Category | Blog{% endblock %}
{% block metas %}
<meta name="description" content="" />
    <meta name="keywords" content="Novamar Insurance, blog Novamar Insurance Mexico" />
    <meta name="robots" content="noindex, nofollow">
{% endblock %}
{% block css %}
<!--./ general css -->
 {{encore_entry_link_tags('blogMainCSS')}}
{{script_tag("libraries/modernizr.js")}}
<style type="text/css">
h1,
h2 {
    font-size: 24px
}

.a-none:hover {
    text-decoration: none;
    opacity: .8
}

.img-responsive2 {
    height: 140px !important;
    width: 100%
}

.img-complete-container {
    width: 100%;
    height: 400px
}

.breadcrumb {
    margin-bottom: 40px
}

.container-post {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    font-size: 14px;
    box-shadow: 0px 0px 10px black;
}

.btn-phantom {
    border: 1px solid #ccc;
    border-radius: 0;
    color: #084a7a
}

.btn-phantom:hover {
    background-color: #f36e03;
    color: #fff;
    border: none
}

@media (max-width:540px) {
    .btn-phantom {
        width: 100%;
        height: 40px;
        padding-top: 8px
    }
}

.img-responsive2 {
    height: 352px !important;
    width: 100%;
}

.container-fluid.content {
    margin-top: 60px;
}
a{
    text-decoration: none;
}
.active{
    color: #084a7a;
    text-transform: capitalize;
}
.breadcrumb li{
    margin-left:8px;
}
.main-title {
    font-size: 24px;
    text-align: center;
    margin-top: 14px;
    text-shadow: 1px 1px 1px black;
}
.btn-pagination{
    background-color: #f36e03;
    border-color: #f36e03;
    color: #fff;
    font-size: 18px;
    padding: 6px 15px;
    margin: 0 5px 0 5px;
}
</style>
{% endblock %}
{% block body %}
<div id="inner-wrap">
    <div id="category" data-post-slug="{{ url('blog')}}" data-category={{ slug }} data-id={{ id }}>
        <div class="container without-padding-left-div without-padding-right-div">
            <div class="row-fluid">
                <div class="col-lg-1 col-md-1"></div>
                <div class="container-fluid content">
                    <div class="col-lg-10 col-md-10 col-sm-12 col-xl-12 without-padding-left-div without-padding-right-div">
                        <ol class="breadcrumb">
                            <li><a href="{{ path('mx_homepage')}}">Home</a></li>
                            <li><a href="{{ path('blog')}}">Blog</a></li>
                            <li class="active">Category | [[ Category |title]]</li>
                            <li class="active"> 
                            {# {% set foo = 'true' %} {% for result in pager %} {% if foo == 'true' %} {% set foo = 'false' %} <span>{{ result.category|replace(' ','-') }}</span> {% endif %} {% endfor %}</li> #}
                        </ol>
                        <div class="clearfix"></div> 
                        <div class="col-lg-10 col-md-10 col-sm-12 col-xl-12 container-post" v-for="category in paginatedPosts">
                            <div class="col-lg-5 col-md-5 col-sm-12 col-xl-12">
                                <div class="date-container">
                                    <i class="fas fa-clock"></i>
                                    [[ category.public_date | formatDate('MMMM dd, yyyy') ]]</b>
                                </div> 
                                <img class="img-responsive2" :alt=[[category.alt_img]] :src="'/img/blogs/' + [[category.name_img]]" />
                            </div>
                            <div class="col-lg-7 col-md-7 col-sm-12 col-xl-12"> 
                                <a :href="generatePostUrl(category.slug, category.id_blog, 'blog-post')" class="a-none">
                                    <h2 class="main-title">[[category.title]] </h2>
                                </a>
                                <p>[[category.short_description]]</p>
                                <div style="text-align:right;"> 
                                    <a :href="generatePostUrl(category.slug, category.id_blog, 'blog-post')" class="btn btn-phantom"> Read more </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-1 col-md-1 col-sm-1 col-xl-1"></div>
            </div>
        </div>
        <div class="d-flex justify-content-center" v-if="allPost.length >itemsPerPage">
            <button @click="prevPage" v-show="currentPage > 1" class="btn btn-pagination">Previous</button>
                <div class="pagination-buttons">
                    <button v-for="page in totalPages" 
                            :key="page" 
                            @click="goToPage(page)" 
                            :class="{'active': page === currentPage}" 
                            class=" pagination-btn">
                             [[ page ]]
                    </button>
                </div>
            <button @click="nextPage"  v-show="currentPage < totalPages" class="btn btn-pagination">Next</button>
        </div>
    </div>
</div> <br>
{% endblock %}
{% block scripts %}
    {% if app.environment != 'dev' %}    
    <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
    {% else %}
    <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
    {% endif %}
     <script type="text/javascript">
        const elementRoot = '#category'
         const appenv = '{{ app.environment }}';
    </script>
    {{ encore_entry_script_tags('blogJS') }}
{% endblock %}