<div>
    <neu-container id="filter">
        <neu-paginator [length]="length" [pageSize]="pageSize" [page]="page" (pageChange)="pageChange($event)"></neu-paginator>
        <neu-input type="text" id="search" placeholder="Buscar por nombre" [ngModel]="name_filter" (ngModelChange)="searchByName($event)"></neu-input>
        <neu-select [ngModel]="box_filter" (ngModelChange)="setBoxFilter($event)">
            <neu-option [value]="1">Todos</neu-option>
            <neu-option [value]="2">Propios</neu-option>
        </neu-select>
        <neu-input type="text" id="search" placeholder="Buscar por tipo" [ngModel]="category_filter" (ngModelChange)="searchByCategory($event)" style="padding-right: 10px;"></neu-input>
        <neu-button *ngIf="box_id" color="primary" [routerLink]="['/admin/workouts/detail']">Nuevo Workout</neu-button>
    </neu-container>

    <div id="content">
        <div id="primary" class="layout" class="active">
            <neu-container id="table" *ngIf="!loading_workouts">
                <table class="neu-table">
                    <thead>
                        <tr>
                            <th class="expand sortable" (click)="setSort('training_workouts.name')" [ngClass]="{'icon-up-dir': params.sort_col==='training_workouts.name' && params.sort_dir==='asc', 'icon-down-dir': params.sort_col==='training_workouts.name' && params.sort_dir==='desc'}">Nombre</th>
                            <th class="sortable" (click)="setSort('training_workouts.category')" [ngClass]="{'icon-up-dir': params.sort_col==='training_workouts.category' && params.sort_dir==='asc', 'icon-down-dir': params.sort_col==='training_workouts.category' && params.sort_dir==='desc'}">Tipo</th>
                            <th>Categoria</th>
                            <th>Propiedad</th>
                            <th class="expand sortable" (click)="setSort('uses')" [ngClass]="{'icon-up-dir': params.sort_col==='uses' && params.sort_dir==='asc', 'icon-down-dir': params.sort_col==='uses' && params.sort_dir==='desc'}">Uso en sesiones</th>
                            <th class="expand sortable" (click)="setSort('training_workouts.created_at')" [ngClass]="{'icon-up-dir': params.sort_col==='training_workouts.created_at' && params.sort_dir==='asc', 'icon-down-dir': params.sort_col==='training_workouts.created_at' && params.sort_dir==='desc'}">Fecha de creación</th>
                        </tr>
                    </thead>
                    <tbody style="cursor: pointer;">
                        <tr *ngFor="let w of workouts" (click)="chooseWorkout(w)">
                            <td>{{ w.name }}</td>
                            <td>
                                <neu-chip color="primary">{{w.category}}</neu-chip>
                            </td>
                            <td>
                                <neu-chip color="{{getColor(w.training_workout_sections[0])}}" *ngIf="w.training_workout_sections.length==1">{{w.training_workout_sections[0].type}}</neu-chip>
                                <neu-chip color="secondary" *ngIf="w.training_workout_sections.length!=1">Compuesto</neu-chip>
                            </td>
                            <td class="expand">
                                <neu-chip color="{{colors['three']}}" *ngIf="w.box_id">Propio</neu-chip>
                                <neu-chip color="{{colors['seven']}}" *ngIf="!w.box_id">Común</neu-chip>
                            </td>
                            <td>{{ w.uses }}</td>
                            <td>{{ w.created_at | date:'dd/MM/yyyy' }}</td>
                        </tr>
                    </tbody>
                </table>
            </neu-container> 

            <div *ngIf="loading_workouts">
                <ngx-skeleton-loader count="1" [theme]="{ 'border-radius': '15px', height: '400px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            </div>
        </div>

        <div id="secondary" class="layout" [ngClass]="{'inactive': !active_secondary, 'active': active_secondary}">
            <div class="secondary-content" *ngIf="choosed_workout">
                <div class="header">
                    <h2><i class="icon-dumbbell"></i>{{choosed_workout.name}}</h2>
                </div>
                <p style="max-height: 200px;overflow-y: auto;">{{choosed_workout.description}}</p>
                <div class="scrollable">
                    <div *ngFor="let section of choosed_workout.training_workout_sections" style="margin: 20px; margin-bottom: 0;">
                        <app-training-workout-section [section]="section"></app-training-workout-section>

                    </div>
                </div>
                <neu-button color="primary" [routerLink]="['/admin/workouts/detail']" [queryParams]="{ id:choosed_workout.id }" size="full-width" style="margin-top: 10px" *ngIf="choosed_workout.box_id">Ver/Editar workout</neu-button>  
                <neu-button color="primary" [routerLink]="['/admin/workouts/detail']" [queryParams]="{ id:choosed_workout.id }" size="full-width" style="margin-top: 10px" *ngIf="!choosed_workout.box_id">Ver workout</neu-button>  
                <neu-button color="secondary" size="full-width" style="margin-top: 20px" (click)="closeWorkout()">Cerrar workout</neu-button>  
            </div>
        </div>
    </div>
</div>