{% extends 'base.html.twig' %}
{% block title %}Media - Blog{% endblock %}
{% block stylesheets %}	
{{ parent() }}
{{encore_entry_link_tags('mainCSS')}}
<style>
.btn-novamar, .btn-novamar:hover {
    background-color: #f36e03;
    border-color: #f36e03;
    color: #fff;
    font-size: 16px;
    padding: 6px 20px;
}
.pagination-btn {
    font-size: 13px;
    padding-left: 10px;
    padding-right: 10px;
    height: 44px;
    margin: 4px;
    background-color: #fff;
    border: 2px solid #eee;
    color: #007bff;
}
.pagination-btn.active {
    background-color: #f9f9f6;
    font-weight: 800;
}
</style>
{% endblock %}
{% block body %}
	{{ include("blog/nav_menu.html.twig", {option:'media'}) }}
	<div class="row p-3">
		<div class="col-12" id="main">
				<div id="blog-container" class="white p-3">
					<h4>Media</h4>
					<div class="line orange"></div>
					<br>
					<label>Page:</label>
					<select  id ="filterType" v-model="filterType" class="col-3 col-lg-1">
						<option value="NI">NI</option>
						<option value="NIM">NIM</option>
					</select>
					<div class="row">
						<div class="col-md-3 col-12 media-container mb-3" v-for="(img, index) in  paginatedMedia" :key="index">
							<img  width="100%" :src="generateImgUrl(img)">
						</div>
						<div class="clearfix"></div>
						<!-- Controles de paginación -->
						<div class="d-flex justify-content-center">
							<button @click="prevPage" :disabled="currentPage === 1" class="btn btn-novamar">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" :disabled="currentPage === totalPages" class="btn btn-novamar">Next</button>
						</div>				  
					</div>
				</div>
			<div class="clearfix"></div>
				
		</div>
	</div>
{% endblock %}

{% block javascripts %}
	 <!-- jQuery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	 {% 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.js"></script>
    {% endif %}
	 {{ encore_entry_script_tags('blogMediaJS') }}
	
{% endblock %}