{% extends 'base.html.twig' %}
{% block title %} Tags Blog Novamar Insurance Mexico{% 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 %}
{{script_tag("libraries/modernizr.js")}}
 {{encore_entry_link_tags('blogMainCSS')}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/glyphicons/1.9.2/css/glyphicons.css">

{# <!--[if (lt IE 9) & (!IEMobile)]>
    <link rel="stylesheet" href="{{ app.asset_path }}/assets/css/ie.css">
    <![endif]--> #}
<style type="text/css">
.main-title {
    font-size: 26px
}
a{
    text-decoration: none;
}
.Container-logo-two-lines {
    display: none
}

@media (min-width:768px) {
    .Container-logo-two-lines {
        display: block
    }
}

.img-responsive2 {
    height: auto;
    width: 100%;
}

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

.breadcrumb {
    margin-bottom: 30px;
    Font-size: 18px; 
    font-weight: bold
}
.active{
    color: #084a7a;
    text-transform: capitalize;
}
.container-post {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    padding: 15px 0;
    font-size: 14px
}

.btn-phantom {
    border: 1px solid #ccc;
    border-radius: 35px;
    width: 121px;
    color: #084a7a;
    padding: 10px;
    font-size: initial;
    box-shadow: 1px 1px 6px black;
}

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

.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 30px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 20px;
    min-width: 0;
    word-wrap: break-word;
    box-shadow: 1px 2px 11px black;
    background-color: #fff;
    margin-top: 43px;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
    margin-bottom: 54px;
}
.breadcrumb li{
    margin-left:8px;
}
h2.main-title {
    padding: 10px;
    text-align: center;
    color: black;
    border-line: 2px #00000 solid;
    border-bottom: 2px solid #f36e03 !important;
}
.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="tag" data-post-slug="{{ url('blog')}}" data-tag="{{ slug }}"  data-id={{ id_tag }} >
    <div id="inner-wrap" > <br>
        <div class="container-fluid without-padding-left-div without-padding-right-div" id="main" role="main"  v-if="name">
            <div class="row-fluid">
                <div class="col-lg-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 ><a href="#" class="active">Tag | [[ Tag |title]]</a></li>
                        {# <li class="active">{{ slug|title }}</li> #}
                    </ol>
                </div>
                <div class="clearfix"></div>
                <div class="row" style="border-top:1px solid #cc;padding-top:20px"  v-for="tags in paginatedPosts" >
                    <div class="container">
                        <div class="col-12 card">
                            <div class="col-12">
                                <img class="img-responsive2" :alt=[[tags.alt_img]] :src="generateImgUrl(tags.name_img)" >
                            </div>
                            <div class="col-12">
                                <a :href="generatePostUrl(tags.slug, tags.id_blog, 'blog-post')" class="a-none">
                                    <h2 class="main-title">[[tags.title]]</h2>
                                </a> <b style="color:#8b8b8b;">
                                <i class="fa-solid fa-calendar-days"></i>
                                 [[ tags.public_date | formatDate('MMMM dd, yyyy') ]]</b>
                                <p>[[tags.short_description ]] </p>
                                <div style="text-align:right;"> 
                                    <a :href="generatePostUrl(tags.slug, tags.id_blog, 'blog-post')" class="btn btn-phantom"> <span><b>Read more</b></span> </a>
                                </div>
                            </div>
                        </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>
    </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 = '#tag'
         const appenv = '{{ app.environment }}';
    </script>
    {{ encore_entry_script_tags('blogJS') }}
{% endblock %}