<commit_before><link rel="stylesheet" type="text/css" href="css/background.css" />
<link rel="stylesheet" type="text/css" href="css/grid-definitions.css" />
<link rel="stylesheet" type="text/css" href="css/grid-portadas.css" />

<style>
/*Color de texto del contenedor de la información*/
.container {
  color: #f0fff0;
}

/*Permite separar los checkbox del filtrado de búsqueda*/
.list-unstyled > .interline-small{
  margin-bottom: 1em;
  line-height: 1.2;
}

/*CONFIGURACIÓN DEL PANEL LATERAL DE BÚSQUEDA*/
#panel-lateral{
  /*width: initial;*/
  height: 90vh;
  overflow-y: scroll;
}
.affix {
  top: 65px;
  /*width: inherit;*/
}
.affix-top {
  /*top: 65px;*/
  /*width: initial;*/
}

/*Espaciado lateral para las keywords*/
.busqueda-rubro{
  margin-left: 3px;
  margin-right: 3px;
}
/*Color para las pestañas del modal (dentro de "Ver más")*/
.nav-pills li a{
  color: #C2C2C2;
}


/*CORRECCIONES DE TAMAÑO (para ajustarse junto con la barra de búsqueda)*/
/*Posición y tamaño para decorado de capturas de pantalla (img-landscape)*/
.frame-decorator {
  width: 100%;
  height: 134px;
}
/*Tamaño para imagen que representa una portada*/
.img-portrait{
  width: 80%;
  height: 100%;
}
/*Tamaño para imagen que representa una captura de pantalla*/
.img-landscape {
  width: 75%;
  height: 115px;
}

/*Animación solamente para cada documental:*/
/* Cuando se esconde un documental (mediante ng-show) */
.documental.ng-hide-add{
  animation:0.5s fadeOutUp linear;
}
/* Cuando se muestra un documental (mediante ng-show) */
.documental.ng-hide-remove{
  animation:0.5s fadeIn linear;
}

.container-nav-left{
  position: fixed;
  width: 2em;
  height: 100%;
  border: 1px solid green;
  top: 0px;
  left: -2em;
}
.container-nav-right{
  position: fixed;
  width: 2em;
  height: 100%;
  border: 1px solid green;
  top: 0px;
  right: -2em;
}
.arrow-nav{
  position: absolute;
  top: 50%;
  left: 0px;
}
</style>

<body>
  <br><br><br>
  <div class="container container-large">
    <div class="row">
      <div class="col-xs-12">
        <h2>Colección de documentales en video</h2>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12 col-md-2 hidden-xs hidden-sm">
        <div id="panel-lateral"> <!-- data-spy="affix" -->
          Tipos de resultados de la búsqueda
          <ul class="list-inline">
            <li><button class="btn btn-default btn-xs" type="button" ng-click="setAllFilters(true)"> Seleccionar todos</button></li>
            <li><button class="btn btn-default btn-xs" type="button" ng-click="setAllFilters(false)"> Limpiar selección</button></li>
          </ul>

          <hr>

          <ul class="list-unstyled"> <!-- data-spy="affix" data-offset-top="50"-->
            <li ng-repeat="rubro in inputQuery" class="interline-small">
              <input type="checkbox" ng-model="rubro.ticked" ng-change="updateView()"> {{rubro.total}} documental<span ng-if="rubro.total > 1">es</span> en "<strong>{{rubro.name}}</strong>", área de <em>{{rubro.area}}</em>
            </li>
          </ul>
        </div>
      </div>

      <div class="col-xs-12 col-md-10">
        <span style="font-size: large;">Búsqueda de <em>"{{query}}"</em></span>
        <br>
        <span style="font-size: larger;">{{archivos.length}} resultados ({{visibles}} visibles)</span>

        <span ng-if="loading"><center><i class="fa fa-spinner fa-pulse fa-2x"></i></center></span>
        <center ng-if="!loading"><div class="alert alert-warning" role="alert" ng-show="archivos.length === 0" ng-cloak><strong>No hay coincidencias en la base de datos.</strong> Intente otra búsqueda.</div></center>
        

        <div class="row">
          <div ng-repeat="archivo in archivos">
            <!-- <div ng-if="($index % 6 == 0) && ($index != 0)" class="clearfix"></div> -->

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 documental" ng-show="archivo.show">
              <div class="thumbnail simple-container">
                <a href="" data-toggle="modal" data-target="#modalInfo" ng-click="getAllInfo(archivo.codigo_de_referencia)">
                  <div class="img-container">
                    <img ng-cloak class="img-center frame-decorator hidden-xs hidden-sm visible-md-block visible-lg-block" src="imgs/frame6.png" ng-if="archivo.orientacion === 'landscape'">
                    <img ng-cloak class="img-center hidden-xs hidden-sm visible-md-block visible-lg-block" ng-class="{'img-portrait': (archivo.orientacion === 'portrait'), 'img-landscape': archivo.orientacion === 'landscape'}" ng-src="{{(archivo.imagen != '') ? ('imgs/Portadas/' + archivo.imagen) : ('imgs/Portadas2/' + archivo.codigo_de_referencia + '.jpg')}}">

                    <img ng-cloak class="img-center img-aspect-ratio visible-xs-block visible-sm-block hidden-md hidden-lg" ng-src="{{(archivo.imagen != '') ? ('imgs/Portadas/' + archivo.imagen) : ('imgs/Portadas2/' + archivo.codigo_de_referencia + '.jpg')}}">
                  </div>
                  <div class="title-container no-overflow">
                    <p class="text-center">
                      <!-- Esto era para hacer más grande el tamaño de letra en moviles. -->
                      <!-- <span class="title-on-mobile visible-xs-block visible-sm-block hidden-md hidden-lg">{{archivo.titulo_adecuado}}</span>
                      <span class="visible-md-block visible-lg-block hidden-xs hidden-sm">{{archivo.titulo_adecuado}}</span> -->
                      {{archivo.titulo_adecuado}}
                    </p>
                  </div>
                  
                  <p class="text-center">
                    {{archivo.fecha}}
                  </p>
                </a>
              </div>
            </div>
          </div>
          <!-- Debug Log: -->
          <!-- <div class="col-xs-10">
            <pre>archivos:</pre>
            <pre>{{archivos | json}}</pre>
          </div> -->
        </div>

      </div>

    </div>
  </div> <!-- container -->

  <!--Modal que muestra la información de los audiovisuales -->
  <div class="modal fade" id="modalInfo" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">

        <!-- Propuesta de flechas de navegación -->
        <!-- <div class="container-nav-left"><i class="fa fa-arrow-left fa-3x arrow-nav" aria-hidden="true"></i></div>
        <div class="container-nav-right"><i class="fa fa-arrow-right fa-3x arrow-nav" aria-hidden="true"></i></div> -->

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
          <h1 class="modal-title" id="myModalLabel">{{allInfo.secret.titulo_adecuado}}
            <a ng-show="sesion" class="iconEdicion" href="" ng-click="editar(allInfo.identificacion.codigo_de_referencia)" >
              <span class="glyphicon glyphicon-edit"></span>
            </a>
            <a href="" class="iconEdicion" ng-show="sesion" uib-popover-template="'popover-tmpl.html'" popover-title="Eliminar registro" popover-placement="bottom" popover-trigger="focus">
              <span class="glyphicon glyphicon-remove-circle"></span>
            </a>
            <script type="text/ng-template" id="popover-tmpl.html">
              <form>
                    <div class="form-group">
                        ¿Seguro que deseas borrar el registro "{{allInfo.identificacion.titulo_propio}}"?
                        <br>
                        <br>
                        <label for="<PASSWORD>">Confirmar contraseña</label>
                        <input type="password" class="form-control" id="pass" name="pass" data-ng-model="pass">
                    </div>
                    <!--Errores de Validaciones que se muestran verificando las validaciones de cada input-->
                      <div class="alert alert-danger" role="alert" ng-model="errores" style="height=20px" ng-show="errores">
                          <small class="errorConfirmacion" ng-show="errores">
                              <strong>ERROR:</strong>Contraseña invalida!
                          </small>
                      </div>
                    <button type="submit" ng-click="confirmar(user,pass)" class="btn btn-danger">Eliminar</button>
                </form>
            </script>
          </h1>
        </div>

        <div class="modal-body">
          <div class="container-fluid">
            <div class="row">
              <div class="col-xs-12 col-md-4 col-lg-4">
                <!-- id="img-portada" se usa en controller para generar imagen en PDF -->
                <!-- Desktop view: -->
                <img ng-cloak class="hidden-xs hidden-sm visible-md-block visible-lg-block modal-frame-decorator" src="imgs/frame6.png" ng-if="allInfo.secret.orientacion.toLowerCase() === 'landscape'">
                <img ng-cloak class="hidden-xs hidden-sm visible-md-block visible-lg-block" ng-class="{'modal-img-responsive': (allInfo.secret.orientacion.toLowerCase() === 'portrait'), 'modal-img-landscape': allInfo.secret.orientacion.toLowerCase() === 'landscape'}" ng-src="{{(allInfo.adicional.imagen != '') ? ('imgs/Portadas/' + allInfo.adicional.imagen) : ('imgs/Portadas2/' + allInfo.identificacion.codigo_de_referencia + '.jpg')}}" id="img-portada">
                <!-- Mobile view: -->
                <img ng-cloak class="visible-xs-block visible-sm-block hidden-md hidden-lg modal-mobile-frame-decorator" src="imgs/frame6.png" ng-if="allInfo.secret.orientacion.toLowerCase() === 'landscape'">
                <img ng-cloak class="visible-xs-block visible-sm-block hidden-md hidden-lg" ng-class="{'modal-img-responsive': (allInfo.secret.orientacion.toLowerCase() === 'portrait'), 'modal-mobile-img-landscape': allInfo.secret.orientacion.toLowerCase() === 'landscape'}" ng-src="{{(allInfo.adicional.imagen != '') ? ('imgs/Portadas/' + allInfo.adicional.imagen) : ('imgs/Portadas2/' + allInfo.identificacion.codigo_de_referencia + '.jpg')}}" id="img-portada">
              </div>
              <div class="col-xs-12 col-md-8 col-lg-8">
                <p><span class="titularModalContent">Sinopsis</span></p>
                <p ng-bind-html="allInfo.contenido_y_estructura.sinopsis"></p>
                <p ng-show="allInfo.contenido_y_estructura.sinopsis === ''"><em>Pendiente.</em></p>
                <p><span class="titularModalContent">Año</span> {{allInfo.identificacion.fecha}} <span class="titularModalContent" style="margin-left: 1em;">Duración</span> {{allInfo.identificacion.duracion}}</p>
                <p ng-show="allInfo.identificacion.realizacion !== ''"><span class="titularModalContent">Realizador</span> {{allInfo.identificacion.realizacion}}</p>
                <p class="text-right" ng-show="allInfo.adicional.url !== ''">
                  <a class="btn btn-default" href="{{allInfoCopy.adicional.url}}" target="_blank" role="button">
                    Video <span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span>
                  </a>
                </p>
              </div> 
            </div>
            <div class="row">
              <div class="col-xs-12 col-md-12 col-lg-12">
                <p class="text-center">
                  <strong>Resultados de la búsqueda</strong>
                </p>
                <!-- <p class="text-center" ng-repeat="(keyword, rubros) in findRubros(allInfo.identificacion.codigo_de_referencia)">
                   <span class="glyphicon glyphicon-tag" aria-hidden="true"></span> <strong><em>{{keyword}}</em>:</strong> <button ng-repeat="rubro in rubros" class="btn btn-default btn-xs busqueda-rubro" ng-click="focus(keyword, rubro)">{{encabezados[rubro]}}</button>
                 </p> -->
                 <p class="text-center">
                   <button ng-repeat="rubro in listRubros(allInfo.identificacion.codigo_de_referencia)" class="btn btn-default btn-xs busqueda-rubro" ng-click="focusKeywords(listRubrosKeys(allInfo.identificacion.codigo_de_referencia), rubro)"><i class="fa fa-tag" aria-hidden="true"></i> {{encabezados[rubro]}}</button>
                 </p>
              </div>
            </div>
            <br> <!--Espaciado para el botón-->
            <div class="row">
              <div class="col-xs-12 col-md-12 col-lg-12">
                
                <!-- BOTÓN PARA MOSTRAR DETALLES -->
                <button type="button" ng-show="!hideInfo" ng-click="hideInfos()" class="btn btn-primary btn-lg btn-block btn-detalles">Ver más <span class="glyphicon glyphicon-menu-down"></span></button>
                
                <!-- DETALLES DEL AUDIOVISUAL -->
                <div ng-show="hideInfo" class="contenedorInfo">
                  <!-- Nav tabs -->
                  <ul class="nav nav-pills nav-justified" role="tablist" id="myTabs">
                    <li ng-show="!isEmpty(allInfo.identificacion)" role="presentation" class="active"><a data-target="#identificacion" aria-controls="identificacion" role="tab" data-toggle="pill" href=""><span class="glyphicon glyphicon-film" aria-hidden="true"></span><br class="hidden-xs hidden-sm"><span class="visible-xs-inline visible-sm-inline"> </span>Identificación</a></li>
                    <li ng-show="!isEmpty(allInfo.contexto)" role="presentation"><a data-target="#contexto" aria-controls="contexto" role="tab" data-toggle="pill" href=""><span class="glyphicon glyphicon-file" aria-hidden="true"></span><br class="hidden-xs hidden-sm"><span class="visible-xs-inline visible-sm-inline"> </span>Contexto</a></li>
                    <li ng-show="!isEmpty(allInfo.contenido_y_estructura)" role="presentation"><a data-target="#contenido" aria-controls="contenido" role="tab" data-toggle="pill" href=""><span class="glyphicon glyphicon-comment" aria-hidden="true"></span><br class="hidden-xs hidden-sm"><span class="visible-xs-inline visible-sm-inline"> </span>Contenido y estructura</a></li>
                    <li ng-show="!isEmpty(allInfo.condiciones_de_acceso)" role="presentation"><a data-target="#condiciones" aria-controls="condiciones" role="tab" data-toggle="pill" href=""><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span><br class="hidden-xs hidden-sm"><span class="visible-xs-inline visible-sm-inline"> </span>Condiciones de Acceso</a></li>
                    <li ng-show="!isEmpty(allInfo.documentacion_asociada)" role="presentation"><a data-target="#documentacion" aria-controls="documentacion" role="tab" data-toggle="pill" href=""><span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span><br class="hidden-xs hidden-sm"><span class="visible-xs-inline visible-sm-inline"> </span>Documentación asociada</a></li>
                    <li ng-show="!isEmpty(allInfo.notas)" role="presentation"><a data-target="#notas" aria-controls="notas" role="tab" data-toggle="pill" href=""><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span><br class="hidden-xs hidden-sm"><span class="visible-xs-inline visible-sm-inline"> </span>Notas</a></li>
                    <li ng-show="(!isEmpty(allInfo.descripcion)) && (permiso > 0)" role="presentation"><a data-target="#descripcion" aria-controls="descripcion" role="tab" data-toggle="pill" href=""><span class="glyphicon glyphicon-user" aria-hidden="true"></span><br class="hidden-xs hidden-sm"><span class="visible-xs-inline visible-sm-inline"> </span>Control de la descripción</a></li>
                    <li ng-show="(!isEmpty(allInfo.adicional)) && (permiso > 0)" role="presentation"><a data-target="#adicional" aria-controls="adicional" role="tab" data-toggle="pill" href=""><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span><br class="hidden-xs hidden-sm"><span class="visible-xs-inline visible-sm-inline"> </span>Información adicional</a></li>
                  </ul>
                  <center><h4><strong>{{allInfo.secret.titulo_adecuado}}</strong></h4></center>
                  <!-- Tab panes -->
                  <div class="tab-content">
                    <!-- AREA DE INDENTIFICACION -->
                    <div role="tabpanel" class="tab-pane fade in active" id="identificacion">
                      <table class="table table-condensed">
                        <tbody>
                          <tr ng-repeat="key in notSort(allInfo.identificacion)" ng-show="allInfo.identificacion[key] != ''">
                            <td class="col-xs-2 col-xs-2 col-md-2 col-lg-2 col-lg-2"><strong>{{encabezados[key]}}</strong></td>
                            <td class="col-xs-10 col-xs-10 col-md-10 col-lg-10 col-lg-10"><span ng-bind-html="allInfo.identificacion[key]"></span></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- AREA DE CONTEXTO -->
                    <div role="tabpanel" class="tab-pane fade" id="contexto">
                      <table class="table table-condensed">
                        <tbody>
                          <tr ng-repeat="key in notSort(allInfo.contexto)" ng-show="allInfo.contexto[key] != ''">
                            <td class="col-xs-2 col-md-2 col-lg-2"><strong>{{encabezados[key]}}</strong></td>
                            <td class="col-xs-10 col-md-10 col-lg-10"><span ng-bind-html="allInfo.contexto[key]"></span></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- AREA DE CONTENIDO -->
                    <div role="tabpanel" class="tab-pane fade" id="contenido">
                      <table class="table table-condensed">
                        <tbody>
                          <tr ng-repeat="key in notSort(allInfo.contenido_y_estructura)" ng-show="allInfo.contenido_y_estructura[key] != ''">
                            <td class="col-xs-2 col-md-2 col-lg-2"><strong>{{encabezados[key]}}</strong></td>
                            <td class="col-xs-10 col-md-10 col-lg-10"><span ng-bind-html="allInfo.contenido_y_estructura[key]"></span></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- AREA DE CONDICIONES DE ACCESO -->
                    <div role="tabpanel" class="tab-pane fade" id="condiciones">
                      <table class="table table-condensed">
                        <tbody>
                          <tr ng-repeat="key in notSort(allInfo.condiciones_de_acceso)" ng-show="allInfo.condiciones_de_acceso[key] != ''">
                            <td class="col-xs-2 col-md-2 col-lg-2"><strong>{{encabezados[key]}}</strong></td>
                            <td class="col-xs-10 col-md-10 col-lg-10"><span ng-bind-html="allInfo.condiciones_de_acceso[key]"></span></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- AREA DE DOCUMENTACION ASOCIADA -->
                    <div role="tabpanel" class="tab-pane fade" id="documentacion">
                      <table class="table table-condensed">
                        <tbody>
                          <tr ng-repeat="key in notSort(allInfo.documentacion_asociada)" ng-show="allInfo.documentacion_asociada[key] != ''">
                            <td class="col-xs-2 col-md-2 col-lg-2"><strong>{{encabezados[key]}}</strong></td>
                            <td class="col-xs-10 col-md-10 col-lg-10"><span ng-bind-html="allInfo.documentacion_asociada[key]"></span></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- AREA DE NOTAS -->
                    <div role="tabpanel" class="tab-pane fade" id="notas">
                      <table class="table table-condensed">
                        <tbody>
                          <tr ng-repeat="key in notSort(allInfo.notas)" ng-show="allInfo.notas[key] != ''">
                            <td class="col-xs-2 col-md-2 col-lg-2"><strong>{{encabezados[key]}}</strong></td>
                            <td class="col-xs-10 col-md-10 col-lg-10"><span ng-bind-html="allInfo.notas[key]"></span></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- AREA DE DESCRIPCION -->
                    <div role="tabpanel" class="tab-pane fade" id="descripcion">
                      <table class="table table-condensed">
                        <tbody>
                          <tr ng-repeat="key in notSort(allInfo.descripcion)" ng-show="allInfo.descripcion[key] != ''">
                            <td class="col-xs-2 col-md-2 col-lg-2"><strong>{{encabezados[key]}}</strong></td>
                            <td class="col-xs-10 col-md-10 col-lg-10">{{allInfoCopy.descripcion[key]}}</td><!--No se cambian las URL-->
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- AREA DE INFORMACION ADICIONAL -->
                    <div role="tabpanel" class="tab-pane fade" id="adicional">
                      <table class="table table-condensed">
                        <tbody>
                          <tr ng-repeat="key in notSort(allInfo.adicional)" ng-show="allInfo.adicional[key] != ''">
                            <td class="col-xs-2 col-md-2 col-lg-2"><strong>{{encabezados[key]}}</strong></td>
                            <td class="col-xs-10 col-md-10 col-lg-10">{{allInfoCopy.adicional[key]}}</td><!--No se cambian las URL-->
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div><!-- DETALLES DEL AUDIOVISUAL -->

              </div>
            </div> <!--row-->
          </div> <!--container-fluid-->
        </div> <!--modal-body-->

        <div class="modal-footer">
          <a href="" ng-show="allInfo.identificacion.codigo_de_referencia !== archivos[0].codigo_de_referencia" ng-click="getAllInfoNear(allInfo.identificacion.codigo_de_referencia, 'prev')" class="navDocumental navSpacing"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> Anterior</a>
          <a href="" ng-show="allInfo.identificacion.codigo_de_referencia !== archivos[archivos.length - 1].codigo_de_referencia" ng-click="getAllInfoNear(allInfo.identificacion.codigo_de_referencia, 'next')" class="navDocumental">Siguiente <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
          <button type="button" class="btn btn-default" ng-click="openPDF()">Ver en PDF</button>
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
        </div>

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

</body>

<!--Togglable Tab para mostrar toda la información de cada audiovisual-->
<script type="text/javascript">
    $(document).ready(function(){
        $('#modalInfo').on('hidden.bs.modal', function () {
          
        });
        $('#myTab').click(function(e){
          e.preventDefault();
          $(this).tab('show');
        });

        // Habilita input selectpicker para ordenamiento
        $('.selectpicker').selectpicker();
        //$('.selectpicker').selectpicker('show');
        //$('.selectpicker').selectpicker('refresh');
        

        // Habilitar affix
        $("#panel-lateral").affix({
          offset: { 
            top: 65 
          }
        });
        
        // Ajusta el ancho del panel-lateral para que no se desborde el contenido
        $(function() {
          var $affixElement = $('#panel-lateral');
          $affixElement.width($affixElement.parent().width());
        });
        $(window).resize(function () {
          var $affixElement = $('#panel-lateral');
          $affixElement.width($affixElement.parent().width());
        });
    });

</script>
<commit_msg>corrección en popover para borrar de busquedas<commit_after><link rel="stylesheet" type="text/css" href="css/background.css" />
<link rel="stylesheet" type="text/css" href="css/grid-definitions.css" />
<link rel="stylesheet" type="text/css" href="css/grid-portadas.css" />

<style>
/*Color de texto del contenedor de la información*/
.container {
  color: #f0fff0;
}

/*Permite separar los checkbox del filtrado de búsqueda*/
.list-unstyled > .interline-small{
  margin-bottom: 1em;
  line-height: 1.2;
}

/*CONFIGURACIÓN DEL PANEL LATERAL DE BÚSQUEDA*/
#panel-lateral{
  /*width: initial;*/
  height: 90vh;
  overflow-y: scroll;
}
.affix {
  top: 65px;
  /*width: inherit;*/
}
.affix-top {
  /*top: 65px;*/
  /*width: initial;*/
}

/*Espaciado lateral para las keywords*/
.busqueda-rubro{
  margin-left: 3px;
  margin-right: 3px;
}
/*Color para las pestañas del modal (dentro de "Ver más")*/
.nav-pills li a{
  color: #C2C2C2;
}


/*CORRECCIONES DE TAMAÑO (para ajustarse junto con la barra de búsqueda)*/
/*Posición y tamaño para decorado de capturas de pantalla (img-landscape)*/
.frame-decorator {
  width: 100%;
  height: 134px;
}
/*Tamaño para imagen que representa una portada*/
.img-portrait{
  width: 80%;
  height: 100%;
}
/*Tamaño para imagen que representa una captura de pantalla*/
.img-landscape {
  width: 75%;
  height: 115px;
}

/*Animación solamente para cada documental:*/
/* Cuando se esconde un documental (mediante ng-show) */
.documental.ng-hide-add{
  animation:0.5s fadeOutUp linear;
}
/* Cuando se muestra un documental (mediante ng-show) */
.documental.ng-hide-remove{
  animation:0.5s fadeIn linear;
}

.container-nav-left{
  position: fixed;
  width: 2em;
  height: 100%;
  border: 1px solid green;
  top: 0px;
  left: -2em;
}
.container-nav-right{
  position: fixed;
  width: 2em;
  height: 100%;
  border: 1px solid green;
  top: 0px;
  right: -2em;
}
.arrow-nav{
  position: absolute;
  top: 50%;
  left: 0px;
}
</style>

<body>
  <br><br><br>
  <div class="container container-large">
    <div class="row">
      <div class="col-xs-12">
        <h2>Colección de documentales en video</h2>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12 col-md-2 hidden-xs hidden-sm">
        <div id="panel-lateral"> <!-- data-spy="affix" -->
          Tipos de resultados de la búsqueda
          <ul class="list-inline">
            <li><button class="btn btn-default btn-xs" type="button" ng-click="setAllFilters(true)"> Seleccionar todos</button></li>
            <li><button class="btn btn-default btn-xs" type="button" ng-click="setAllFilters(false)"> Limpiar selección</button></li>
          </ul>

          <hr>

          <ul class="list-unstyled"> <!-- data-spy="affix" data-offset-top="50"-->
            <li ng-repeat="rubro in inputQuery" class="interline-small">
              <input type="checkbox" ng-model="rubro.ticked" ng-change="updateView()"> {{rubro.total}} documental<span ng-if="rubro.total > 1">es</span> en "<strong>{{rubro.name}}</strong>", área de <em>{{rubro.area}}</em>
            </li>
          </ul>
        </div>
      </div>

      <div class="col-xs-12 col-md-10">
        <span style="font-size: large;">Búsqueda de <em>"{{query}}"</em></span>
        <br>
        <span style="font-size: larger;">{{archivos.length}} resultados ({{visibles}} visibles)</span>

        <span ng-if="loading"><center><i class="fa fa-spinner fa-pulse fa-2x"></i></center></span>
        <center ng-if="!loading"><div class="alert alert-warning" role="alert" ng-show="archivos.length === 0" ng-cloak><strong>No hay coincidencias en la base de datos.</strong> Intente otra búsqueda.</div></center>
        

        <div class="row">
          <div ng-repeat="archivo in archivos">
            <!-- <div ng-if="($index % 6 == 0) && ($index != 0)" class="clearfix"></div> -->

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 documental" ng-show="archivo.show">
              <div class="thumbnail simple-container">
                <a href="" data-toggle="modal" data-target="#modalInfo" ng-click="getAllInfo(archivo.codigo_de_referencia)">
                  <div class="img-container">
                    <img ng-cloak class="img-center frame-decorator hidden-xs hidden-sm visible-md-block visible-lg-block" src="imgs/frame6.png" ng-if="archivo.orientacion === 'landscape'">
                    <img ng-cloak class="img-center hidden-xs hidden-sm visible-md-block visible-lg-block" ng-class="{'img-portrait': (archivo.orientacion === 'portrait'), 'img-landscape': archivo.orientacion === 'landscape'}" ng-src="{{(archivo.imagen != '') ? ('imgs/Portadas/' + archivo.imagen) : ('imgs/Portadas2/' + archivo.codigo_de_referencia + '.jpg')}}">

                    <img ng-cloak class="img-center img-aspect-ratio visible-xs-block visible-sm-block hidden-md hidden-lg" ng-src="{{(archivo.imagen != '') ? ('imgs/Portadas/' + archivo.imagen) : ('imgs/Portadas2/' + archivo.codigo_de_referencia + '.jpg')}}">
                  </div>
                  <div class="title-container no-overflow">
                    <p class="text-center">
                      <!-- Esto era para hacer más grande el tamaño de letra en moviles. -->
                      <!-- <span class="title-on-mobile visible-xs-block visible-sm-block hidden-md hidden-lg">{{archivo.titulo_adecuado}}</span>
                      <span class="visible-md-block visible-lg-block hidden-xs hidden-sm">{{archivo.titulo_adecuado}}</span> -->
                      {{archivo.titulo_adecuado}}
                    </p>
                  </div>
                  
                  <p class="text-center">
                    {{archivo.fecha}}
                  </p>
                </a>
              </div>
            </div>
          </div>
          <!-- Debug Log: -->
          <!-- <div class="col-xs-10">
            <pre>archivos:</pre>
            <pre>{{archivos | json}}</pre>
          </div> -->
        </div>

      </div>

    </div>
  </div> <!-- container -->

  <!--Modal que muestra la información de los audiovisuales -->
  <div class="modal fade" id="modalInfo" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">

        <!-- Propuesta de flechas de navegación -->
        <!-- <div class="container-nav-left"><i class="fa fa-arrow-left fa-3x arrow-nav" aria-hidden="true"></i></div>
        <div class="container-nav-right"><i class="fa fa-arrow-right fa-3x arrow-nav" aria-hidden="true"></i></div> -->

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
          <h1 class="modal-title" id="myModalLabel">{{allInfo.secret.titulo_adecuado}}
            <a ng-show="sesion" class="iconEdicion" href="" ng-click="editar(allInfo.identificacion.codigo_de_referencia)" >
              <span class="glyphicon glyphicon-edit"></span>
            </a>
            <a href="" class="iconEdicion" ng-show="sesion" uib-popover-template="'popover-tmpl.html'" popover-title="Eliminar registro" popover-placement="bottom">
              <span class="glyphicon glyphicon-remove-circle"></span>
            </a>
            <script type="text/ng-template" id="popover-tmpl.html">
              <form>
                    <div class="form-group">
                        ¿Seguro que deseas borrar el registro "{{allInfo.identificacion.titulo_propio}}"?
                        <br>
                        <br>
                        <label for="exampleInputPassword1">Confirmar contraseña</label>
                        <input type="password" class="form-control" id="pass" name="pass" data-ng-model="pass">
                    </div>
                    <!--Errores de Validaciones que se muestran verificando las validaciones de cada input-->
                      <div class="alert alert-danger" role="alert" ng-model="errores" style="height=20px" ng-show="errores">
                          <small class="errorConfirmacion" ng-show="errores">
                              <strong>ERROR:</strong>Contraseña invalida!
                          </small>
                      </div>
                    <button type="submit" ng-click="confirmar(user,pass)" class="btn btn-danger">Eliminar</button>
                </form>
            </script>
          </h1>
        </div>

        <div class="modal-body">
          <div class="container-fluid">
            <div class="row">
              <div class="col-xs-12 col-md-4 col-lg-4">
                <!-- id="img-portada" se usa en controller para generar imagen en PDF -->
                <!-- Desktop view: -->
                <img ng-cloak class="hidden-xs hidden-sm visible-md-block visible-lg-block modal-frame-decorator" src="imgs/frame6.png" ng-if="allInfo.secret.orientacion.toLowerCase() === 'landscape'">
                <img ng-cloak class="hidden-xs hidden-sm visible-md-block visible-lg-block" ng-class="{'modal-img-responsive': (allInfo.secret.orientacion.toLowerCase() === 'portrait'), 'modal-img-landscape': allInfo.secret.orientacion.toLowerCase() === 'landscape'}" ng-src="{{(allInfo.adicional.imagen != '') ? ('imgs/Portadas/' + allInfo.adicional.imagen) : ('imgs/Portadas2/' + allInfo.identificacion.codigo_de_referencia + '.jpg')}}" id="img-portada">
                <!-- Mobile view: -->
                <img ng-cloak class="visible-xs-block visible-sm-block hidden-md hidden-lg modal-mobile-frame-decorator" src="imgs/frame6.png" ng-if="allInfo.secret.orientacion.toLowerCase() === 'landscape'">
                <img ng-cloak class="visible-xs-block visible-sm-block hidden-md hidden-lg" ng-class="{'modal-img-responsive': (allInfo.secret.orientacion.toLowerCase() === 'portrait'), 'modal-mobile-img-landscape': allInfo.secret.orientacion.toLowerCase() === 'landscape'}" ng-src="{{(allInfo.adicional.imagen != '') ? ('imgs/Portadas/' + allInfo.adicional.imagen) : ('imgs/Portadas2/' + allInfo.identificacion.codigo_de_referencia + '.jpg')}}" id="img-portada">
              </div>
              <div class="col-xs-12 col-md-8 col-lg-8">
                <p><span class="titularModalContent">Sinopsis</span></p>
                <p ng-bind-html="allInfo.contenido_y_estructura.sinopsis"></p>
                <p ng-show="allInfo.contenido_y_estructura.sinopsis === ''"><em>Pendiente.</em></p>
                <p><span class="titularModalContent">Año</span> {{allInfo.identificacion.fecha}} <span class="titularModalContent" style="margin-left: 1em;">Duración</span> {{allInfo.identificacion.duracion}}</p>
                <p ng-show="allInfo.identificacion.realizacion !== ''"><span class="titularModalContent">Realizador</span> {{allInfo.identificacion.realizacion}}</p>
                <p class="text-right" ng-show="allInfo.adicional.url !== ''">
                  <a class="btn btn-default" href="{{allInfoCopy.adicional.url}}" target="_blank" role="button">
                    Video <span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span>
                  </a>
                </p>
              </div> 
            </div>
            <div class="row">
              <div class="col-xs-12 col-md-12 col-lg-12">
                <p class="text-center">
                  <strong>Resultados de la búsqueda</strong>
                </p>
                <!-- <p class="text-center" ng-repeat="(keyword, rubros) in findRubros(allInfo.identificacion.codigo_de_referencia)">
                   <span class="glyphicon glyphicon-tag" aria-hidden="true"></span> <strong><em>{{keyword}}</em>:</strong> <button ng-repeat="rubro in rubros" class="btn btn-default btn-xs busqueda-rubro" ng-click="focus(keyword, rubro)">{{encabezados[rubro]}}</button>
                 </p> -->
                 <p class="text-center">
                   <button ng-repeat="rubro in listRubros(allInfo.identificacion.codigo_de_referencia)" class="btn btn-default btn-xs busqueda-rubro" ng-click="focusKeywords(listRubrosKeys(allInfo.identificacion.codigo_de_referencia), rubro)"><i class="fa fa-tag" aria-hidden="true"></i> {{encabezados[rubro]}}</button>
                 </p>
              </div>
            </div>
            <br> <!--Espaciado para el botón-->
            <div class="row">
              <div class="col-xs-12 col-md-12 col-lg-12">
                
                <!-- BOTÓN PARA MOSTRAR DETALLES -->
                <button type="button" ng-show="!hideInfo" ng-click="hideInfos()" class="btn btn-primary btn-lg btn-block btn-detalles">Ver más <span class="glyphicon glyphicon-menu-down"></span></button>
                
                <!-- DETALLES DEL AUDIOVISUAL -->
                <div ng-show="hideInfo" class="contenedorInfo">
                  <!-- Nav tabs -->
                  <ul class="nav nav-pills nav-justified" role="tablist" id="myTabs">
                    <li ng-show="!isEmpty(allInfo.identificacion)" role="presentation" class="active"><a data-target="#identificacion" aria-controls="identificacion" role="tab" data-toggle="pill" href=""><span class="glyphicon glyphicon-film" aria-hidden="true"></span><br class="hidden-xs hidden-sm"><span class="visible-xs-inline visible-sm-inline"> </span>Identificación</a></li>
                    <li ng-show="!isEmpty(allInfo.contexto)" role="presentation"><a data-target="#contexto" aria-controls="contexto" role="tab" data-toggle="pill" href=""><span class="glyphicon glyphicon-file" aria-hidden="true"></span><br class="hidden-xs hidden-sm"><span class="visible-xs-inline visible-sm-inline"> </span>Contexto</a></li>
                    <li ng-show="!isEmpty(allInfo.contenido_y_estructura)" role="presentation"><a data-target="#contenido" aria-controls="contenido" role="tab" data-toggle="pill" href=""><span class="glyphicon glyphicon-comment" aria-hidden="true"></span><br class="hidden-xs hidden-sm"><span class="visible-xs-inline visible-sm-inline"> </span>Contenido y estructura</a></li>
                    <li ng-show="!isEmpty(allInfo.condiciones_de_acceso)" role="presentation"><a data-target="#condiciones" aria-controls="condiciones" role="tab" data-toggle="pill" href=""><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span><br class="hidden-xs hidden-sm"><span class="visible-xs-inline visible-sm-inline"> </span>Condiciones de Acceso</a></li>
                    <li ng-show="!isEmpty(allInfo.documentacion_asociada)" role="presentation"><a data-target="#documentacion" aria-controls="documentacion" role="tab" data-toggle="pill" href=""><span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span><br class="hidden-xs hidden-sm"><span class="visible-xs-inline visible-sm-inline"> </span>Documentación asociada</a></li>
                    <li ng-show="!isEmpty(allInfo.notas)" role="presentation"><a data-target="#notas" aria-controls="notas" role="tab" data-toggle="pill" href=""><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span><br class="hidden-xs hidden-sm"><span class="visible-xs-inline visible-sm-inline"> </span>Notas</a></li>
                    <li ng-show="(!isEmpty(allInfo.descripcion)) && (permiso > 0)" role="presentation"><a data-target="#descripcion" aria-controls="descripcion" role="tab" data-toggle="pill" href=""><span class="glyphicon glyphicon-user" aria-hidden="true"></span><br class="hidden-xs hidden-sm"><span class="visible-xs-inline visible-sm-inline"> </span>Control de la descripción</a></li>
                    <li ng-show="(!isEmpty(allInfo.adicional)) && (permiso > 0)" role="presentation"><a data-target="#adicional" aria-controls="adicional" role="tab" data-toggle="pill" href=""><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span><br class="hidden-xs hidden-sm"><span class="visible-xs-inline visible-sm-inline"> </span>Información adicional</a></li>
                  </ul>
                  <center><h4><strong>{{allInfo.secret.titulo_adecuado}}</strong></h4></center>
                  <!-- Tab panes -->
                  <div class="tab-content">
                    <!-- AREA DE INDENTIFICACION -->
                    <div role="tabpanel" class="tab-pane fade in active" id="identificacion">
                      <table class="table table-condensed">
                        <tbody>
                          <tr ng-repeat="key in notSort(allInfo.identificacion)" ng-show="allInfo.identificacion[key] != ''">
                            <td class="col-xs-2 col-xs-2 col-md-2 col-lg-2 col-lg-2"><strong>{{encabezados[key]}}</strong></td>
                            <td class="col-xs-10 col-xs-10 col-md-10 col-lg-10 col-lg-10"><span ng-bind-html="allInfo.identificacion[key]"></span></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- AREA DE CONTEXTO -->
                    <div role="tabpanel" class="tab-pane fade" id="contexto">
                      <table class="table table-condensed">
                        <tbody>
                          <tr ng-repeat="key in notSort(allInfo.contexto)" ng-show="allInfo.contexto[key] != ''">
                            <td class="col-xs-2 col-md-2 col-lg-2"><strong>{{encabezados[key]}}</strong></td>
                            <td class="col-xs-10 col-md-10 col-lg-10"><span ng-bind-html="allInfo.contexto[key]"></span></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- AREA DE CONTENIDO -->
                    <div role="tabpanel" class="tab-pane fade" id="contenido">
                      <table class="table table-condensed">
                        <tbody>
                          <tr ng-repeat="key in notSort(allInfo.contenido_y_estructura)" ng-show="allInfo.contenido_y_estructura[key] != ''">
                            <td class="col-xs-2 col-md-2 col-lg-2"><strong>{{encabezados[key]}}</strong></td>
                            <td class="col-xs-10 col-md-10 col-lg-10"><span ng-bind-html="allInfo.contenido_y_estructura[key]"></span></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- AREA DE CONDICIONES DE ACCESO -->
                    <div role="tabpanel" class="tab-pane fade" id="condiciones">
                      <table class="table table-condensed">
                        <tbody>
                          <tr ng-repeat="key in notSort(allInfo.condiciones_de_acceso)" ng-show="allInfo.condiciones_de_acceso[key] != ''">
                            <td class="col-xs-2 col-md-2 col-lg-2"><strong>{{encabezados[key]}}</strong></td>
                            <td class="col-xs-10 col-md-10 col-lg-10"><span ng-bind-html="allInfo.condiciones_de_acceso[key]"></span></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- AREA DE DOCUMENTACION ASOCIADA -->
                    <div role="tabpanel" class="tab-pane fade" id="documentacion">
                      <table class="table table-condensed">
                        <tbody>
                          <tr ng-repeat="key in notSort(allInfo.documentacion_asociada)" ng-show="allInfo.documentacion_asociada[key] != ''">
                            <td class="col-xs-2 col-md-2 col-lg-2"><strong>{{encabezados[key]}}</strong></td>
                            <td class="col-xs-10 col-md-10 col-lg-10"><span ng-bind-html="allInfo.documentacion_asociada[key]"></span></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- AREA DE NOTAS -->
                    <div role="tabpanel" class="tab-pane fade" id="notas">
                      <table class="table table-condensed">
                        <tbody>
                          <tr ng-repeat="key in notSort(allInfo.notas)" ng-show="allInfo.notas[key] != ''">
                            <td class="col-xs-2 col-md-2 col-lg-2"><strong>{{encabezados[key]}}</strong></td>
                            <td class="col-xs-10 col-md-10 col-lg-10"><span ng-bind-html="allInfo.notas[key]"></span></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- AREA DE DESCRIPCION -->
                    <div role="tabpanel" class="tab-pane fade" id="descripcion">
                      <table class="table table-condensed">
                        <tbody>
                          <tr ng-repeat="key in notSort(allInfo.descripcion)" ng-show="allInfo.descripcion[key] != ''">
                            <td class="col-xs-2 col-md-2 col-lg-2"><strong>{{encabezados[key]}}</strong></td>
                            <td class="col-xs-10 col-md-10 col-lg-10">{{allInfoCopy.descripcion[key]}}</td><!--No se cambian las URL-->
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- AREA DE INFORMACION ADICIONAL -->
                    <div role="tabpanel" class="tab-pane fade" id="adicional">
                      <table class="table table-condensed">
                        <tbody>
                          <tr ng-repeat="key in notSort(allInfo.adicional)" ng-show="allInfo.adicional[key] != ''">
                            <td class="col-xs-2 col-md-2 col-lg-2"><strong>{{encabezados[key]}}</strong></td>
                            <td class="col-xs-10 col-md-10 col-lg-10">{{allInfoCopy.adicional[key]}}</td><!--No se cambian las URL-->
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div><!-- DETALLES DEL AUDIOVISUAL -->

              </div>
            </div> <!--row-->
          </div> <!--container-fluid-->
        </div> <!--modal-body-->

        <div class="modal-footer">
          <a href="" ng-show="allInfo.identificacion.codigo_de_referencia !== archivos[0].codigo_de_referencia" ng-click="getAllInfoNear(allInfo.identificacion.codigo_de_referencia, 'prev')" class="navDocumental navSpacing"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> Anterior</a>
          <a href="" ng-show="allInfo.identificacion.codigo_de_referencia !== archivos[archivos.length - 1].codigo_de_referencia" ng-click="getAllInfoNear(allInfo.identificacion.codigo_de_referencia, 'next')" class="navDocumental">Siguiente <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
          <button type="button" class="btn btn-default" ng-click="openPDF()">Ver en PDF</button>
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
        </div>

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

</body>

<!--Togglable Tab para mostrar toda la información de cada audiovisual-->
<script type="text/javascript">
    $(document).ready(function(){
        $('#modalInfo').on('hidden.bs.modal', function () {
          
        });
        $('#myTab').click(function(e){
          e.preventDefault();
          $(this).tab('show');
        });

        // Habilita input selectpicker para ordenamiento
        $('.selectpicker').selectpicker();
        //$('.selectpicker').selectpicker('show');
        //$('.selectpicker').selectpicker('refresh');
        

        // Habilitar affix
        $("#panel-lateral").affix({
          offset: { 
            top: 65 
          }
        });
        
        // Ajusta el ancho del panel-lateral para que no se desborde el contenido
        $(function() {
          var $affixElement = $('#panel-lateral');
          $affixElement.width($affixElement.parent().width());
        });
        $(window).resize(function () {
          var $affixElement = $('#panel-lateral');
          $affixElement.width($affixElement.parent().width());
        });
    });

</script>

{'fraction_non_alphanumeric': 0.17263140413518227, 'fraction_numerical': 0.008324337789587312, 'mean_word_length': 2.18499173553719, 'pattern_counts': {'":': 0, '<': 968, '<?xml version=': 0, '>': 976, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6872130', 'n_tokens_mistral': 15198, 'n_tokens_neox': 14526, 'n_words': 2637}