<div id="mainTwo" v-cloak>
	<div class="animated fadeIn">
		<div class="col s12 card-panel white" style="margin-top: 75px;">
			<h4 id="Audiostitle">{{traducirFrase("Audios")}}</h4>

			<!--Tabla de registros-->
			<br>
			<?php require_once "tabla.php"; ?>
			<br>
			<pagination-dialvox v-model="pagina" :count="cuenta"></pagination-dialvox>
			<br>
			<!--Tabla de registros-->
			<?php if ($_SESSION["Grupo"] == GRUPO_ADMINS) { ?>
				<div class="center" id="botonCrear">
					<a class="waves-effect waves-light btn blue lighten-2 " href="#" v-on:click="modalRegistrar()">{{traducirFrase("Subir nuevo audio")}}</a>
				</div>
			<?php } ?>

			<ul class="pagination center" id='paginacion'>

			</ul>
		</div>
	</div>

	<?php require_once "modals" . DIRECTORY_SEPARATOR . "modalAdd.php"; ?>

</div>
<!-- END MAIN -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START FOOTER -->
<!-- Revisar si volver a incluir el foot.php aqui -->
<!-- END FOOTER -->
<!-- ================================================
    Scripts
    ================================================ -->
<!-- jQuery Library -->
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>jquery-3.2.1.min.js"></script>
<!--materialize js-->
<script type="text/javascript" src="<?= JS_ADMIN; ?>materialize.min.js"></script>
<!--scrollbar-->
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>perfect-scrollbar/perfect-scrollbar.min.js"></script>
<!-- chartjs -->
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>chartjs/chart.min.js"></script>
<!-- sparkline -->
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>sparkline/jquery.sparkline.min.js"></script>
<!-- google map api -->

<!--jvectormap-->
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>jvectormap/vectormap-script.js"></script>
<!--google map-->

<!--plugins.js - Some Specific JS codes for Plugin Settings-->
<script type="text/javascript" src="<?= JS_ADMIN; ?>plugins.js"></script>
<!--card-advanced.js - Page specific JS-->
<script type="text/javascript" src="<?= JS_ADMIN; ?>scripts/dashboard-analytics.js"></script>
<!--custom-script.js - Add your own theme custom JS
    <script type="text/javascript" src="<?= JS_ADMIN; ?>custom-script.js"></script>-->
<script src="<?= JS_ADMIN; ?>vue.js"></script>
<script src="<?= JS_ADMIN; ?>Chart.min.js"></script>
<script src="<?= JS_ADMIN; ?>gauge.min.js"></script>
<script src="<?= JS_ADMIN; ?>raphael.js"></script>
<script src="<?= JS_ADMIN; ?>justgage.js"></script>
<script src="<?= JS_ADMIN; ?>datepicker.js"></script>
<script src="<?= JS_ADMIN; ?>i18n/datepicker.es.js"></script>
<script src="<?= LIB_JS; ?>sweetalert2.js" type="text/javascript"></script>

<?php require_once "script.php"; ?>