<notificacion></notificacion>
<div class="container-fluid">
<div class="row">
<div class="col-lg-5">
<label for="search">Nombre del archivo:</label>
<div class="input-group">
<input type="text" class="form-control" id="search" [(ngModel)]=filtroNombre>
<span class="input-group-addon fa fa-search">
</span>
</div>
</div>
</div>
<div class="row" style="margin-top: 20px">
<div class="col-lg-5">
<ngb-tabset [destroyOnHide]=false>
<ngb-tab title="Mis archivos">
<ng-template ngbTabContent>
<div class="card">
<div>
<div class="btn-group pull-right" style="cursor: pointer; margin-top: -9px;">
<button ngbPopover="Atras" triggers="mouseenter:mouseleave" data-placement="bottom" class="btn btn-sm btn-secondary pull-right" *ngIf="directorioActual.padreId!=-1" style="cursor: pointer; margin-top: -33.5px; margin-right: 73px; height: 30px;"(click)="navBack()">
<i class="fa fa-arrow-up"></i>
</button>
</div>
<!-- <button class="btn btn-sm btn-secondary pull-right" style="cursor: pointer; margin-top: -35px;" >
<i class="fa fa-plus"></i>
</buton> -->
<div class="btn-group pull-right" style="cursor: pointer; margin-top: -42px; height: 30px; width: 29px;">
<button ngbPopover="Nuevo" triggers="mouseenter:mouseleave" data-placement="bottom" style="cursor: pointer;border-radius: 3px;" type="button" class="btn btn-sm btn-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-plus"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item"(click)="mkFile()" >Archivo</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" (click)="mkdir()">Carpeta</a>
</div>
</div>
<div class="btn-group pull-right" style="cursor: pointer; margin-top: -42px; height: 30px; width: 29px; margin-right: 36px;">
<button ngbPopover="Ordenar" triggers="mouseenter:mouseleave" data-placement="bottom" style="cursor: pointer;border-radius: 3px;width: 36px;" type="button" class="btn btn-sm btn-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-sort"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item"(click)="ordenarPorTipo()" >Carpetas primero</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" (click)="ordenarPorFecha()">Fecha de creación</a>
</div>
</div>
</div>
<div class="card-block">
<div class="row listado-archivos" style="min-height: 100px; overflow-y: scroll;">
<div class="loading" *ngIf="loading">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
<div *ngFor="let arch of directorioActual.archivos | filter: 'nombre': filtroNombre " (click)="seleccionarArchivo(arch)" class="col-sm-3 col-4" style="text-align: center;">
<i *ngIf="arch.directorio" class="fa fa-folder" style="font-size: 3em; cursor: pointer;color:#f95e5e" aria-hidden="true"></i>
<i *ngIf="!arch.directorio" class="fa fa-file-text" style="font-size: 3em; cursor: pointer;color:#ff8383" aria-hidden="true"></i>
<p style="cursor: pointer;">{{arch.nombre}}</p>
</div>
</div>
</div>
</div>
</ng-template>
</ngb-tab>
<ngb-tab title="Compartidos">
<ng-template ngbTabContent>
<div class="card" *ngIf="esAlumno">
<div class="card-block">
<div class="row listado-archivos" style="min-height: 100px; overflow-y: scroll;">
<div class="loading" *ngIf="loadingCompartidos">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
<div *ngFor="let arch of archivosCompartidosSinDuplicados | filter: 'nombre': filtroNombre " (click)="seleccionarArchivo(arch)" class="col-sm-3 col-4" style="text-align: center;">
<i class="fa fa-file-text" style="font-size: 3em; cursor: pointer;color:#ff8383" aria-hidden="true"></i>
<p style="cursor: pointer;">{{arch.nombre}}</p>
</div>
</div>
</div>
</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
</div>
<div class="col-lg-7">
<div class="card">
<div class="card-header">
<button ngbPopover="Cargar/Editar" data-placement="bottom" triggers="mouseenter:mouseleave" class="btn btn-sm btn-secondary pull-left mr-2" (click)="cargarArchivo()">
<i class="fa fa-pencil"></i>
</button>
<button ngbPopover="Eliminar" data-placement="bottom" triggers="mouseenter:mouseleave" class="btn btn-sm btn-secondary pull-left mr-2" (click)="mostrarEliminarDialogo()">
<i class="fa fa-remove"></i>
</button>
<button ngbPopover="Mover Archivo"data-placement="bottom" triggers="mouseenter:mouseleave" class="btn btn-sm btn-secondary pull-left mr-2" (click)="seleccionarDirectorioAMover()">
<i class="fa fa-cut"></i>
</button>
<button class="btn btn-sm btn-secondary pull-left mr-2" *ngIf="esAlumno && archivoSeleccionado && hayArchivoOriginal()" (click)="seleccionarArchivoOriginal()">Ver original</button>
<button class="btn btn-sm btn-secondary pull-left mr-2" *ngIf="esAlumno && archivoSeleccionado && hayArchivoMio()" (click)="seleccionarArchivoMio()">Ver mio</button>
<button class="btn btn-sm btn-secondary pull-left mr-4" *ngIf="esAlumno && archivoSeleccionado && !archivoSeleccionado.directorio && archivoSeleccionado.archivoOrigenId != -1 && (archivoSeleccionado.estado == 'Edicion' || archivoSeleccionado.estado == 'Devuelto')" (click)="confirmarEntrega()">Entregar</button>
<div class="pull-left mr-2" *ngIf="esAlumno && (archivoSeleccionado?.estado == 'Entregado')">{{archivoSeleccionado.estado}} - </div>
<button *ngIf="esAlumno && archivoSeleccionado?.estado == 'Corregido'" class="btn btn-sm btn-secondary pull-left mr-2" (click)="verCalificacion()">Ver calificacion</button>
<button *ngIf="!esAlumno" class="btn btn-sm btn-secondary pull-left mr-2" (click)="compartirArchivo()">Compartir</button>
<div class="pull-left" *ngIf="archivoSeleccionado">
Nombre: {{archivoSeleccionado?.nombre}} - Creado: {{archivoSeleccionado?.fechaCreacion | date}}
</div>
<div class="pull-left" *ngIf="!archivoSeleccionado">Seleccione un archivo para previsualizarlo</div>
<div class="pull-right" *ngIf="archivoSeleccionado">
<label class="custom-control custom-checkbox" *ngIf="!esAlumno">
<input type="checkbox" *ngIf="archivoSeleccionado.editable" (click)="setSoloLectura()" class="custom-control-input">
<input type="checkbox" *ngIf="!archivoSeleccionado.editable" checked (click)="setSoloLectura()" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Solo lectura</span>
</label>
</div>
</div>
<div *ngIf="!archivoSeleccionado" class="card-block">
<div class="previewArchivoNoSeleccionado" style="width: 100%; text-align: center;">
<i style="color: rgb(220,220,220); font-size: 10em; padding: 0.1em" class="fa fa-file-text"></i>
</div>
</div>
<codemirror class="codemirrorArchivo" *ngIf="archivoSeleccionado" [(ngModel)]="preview" [config]="configCodeMirror" [ngStyle]="{'font-size': configCodeMirror.fontSize+'px'}">
</codemirror>
</div>
</div>
</div>
</div>