<modal-dialvox v-model="targets.rangos" small cancel="cerrar" @closed="closeTablaRangos" :disabled="true">
    <h4>{{traducirFrase("Rangos")}}</h4>
    <br><br>
    <div class="container animated fadeIn">
        <div class="row" v-if="!targets.addRango && !targets.editRango">
            <div class="row col s12">
                <table-dialvox
                    :headers="headers['rangos']"
                    :options="options['rangos']"
                    :hsearch="true"
                    :data="registrosRangos"
                    @delete="deleteRango"
                    @edit="showEditRango"
                >
                </table-dialvox>
                <br>
                <pagination-dialvox v-model="pagina" :count="cuenta"></pagination-dialvox>
                <br>
                <?php if ($_SESSION["Grupo"] == GRUPO_ADMINS) { ?>
                    <div class="center" id="botonCrear">
                        <a class="waves-effect waves-light btn blue lighten-2 " href="#" @click.prevent="showAddRango">{{traducirFrase("Nuevo Rango")}}</a>
                    </div>
                <?php } ?>
                <ul class="pagination center" id='paginacion'>
            </div>
        </div>
        <?php require_once "addRango.php";?>
        <?php require_once "editRango.php";?>
    </div>
</modal-dialvox>