<ngx-skeleton-loader *ngIf="length==null || !params.page_size" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '90px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
<neu-container id="filter" *ngIf="length!=null && params.page_size!=null">
    <neu-paginator [length]="length" [pageSize]="params.page_size" [page]="params.page_number" (pageChange)="pageChange($event)"></neu-paginator>

    <neu-button color="primary" (click)="createNew()">Nueva sala</neu-button>
    <neu-button color="secondary" *ngIf="!selection.isEmpty()" (neu_click)="deleteSelected()">Eliminar {{ selection.selected.length > 1 ? ('(' + selection.selected.length + ')') : '' }}</neu-button>
</neu-container>

<div id="content">
    <div id="primary" class="layout" [ngClass]="{'active': (isMobile && !room) || !isMobile}">
        <ngx-skeleton-loader *ngIf="!training_rooms" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '950px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
        <neu-container id="table" *ngIf="training_rooms">
            <table class="neu-table">
                <thead>
                    <tr>
                        <th>
                            <neu-checkbox   [ngModel]="master_checkbox" 
                                            (ngModelChange)="masterToggle($event)"></neu-checkbox>
                        </th>
                        <th [ngClass]="{'icon-up-dir': params.sort_col==='name' && params.sort_dir==='asc', 'icon-down-dir': params.sort_col==='name' && params.sort_dir==='desc'}">Nombre</th>
                        <th class="expand" (click)="setSort('description')" [ngClass]="{'icon-up-dir': params.sort_col==='description' && params.sort_dir==='asc', 'icon-down-dir': params.sort_col==='description' && params.sort_dir==='desc'}">Descripción</th>
                        <th [ngClass]="{'icon-up-dir': params.sort_col==='capacity' && params.sort_dir==='asc', 'icon-down-dir': params.sort_col==='capacity' && params.sort_dir==='desc'}">Capacidad</th>
                        <th [ngClass]="{'icon-up-dir': params.sort_col==='created_at' && params.sort_dir==='asc', 'icon-down-dir': params.sort_col==='created_at' && params.sort_dir==='desc'}">Fecha de creación</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let r of training_rooms">
                        <td>
                            <neu-checkbox   [checked]="selection.isSelected(r)" 
                                            (change)="$event ? selection.toggle(r) : null; setMasterToggleValue();"></neu-checkbox>
                        </td>
                        <td class="logo" (click)="room = room==r ? null : r">
                            <span>{{ r.name }}</span>
                        </td>
                        <td>{{ r.description }}</td>
                        <td>{{ r.capacity + ' atletas' }}</td>
                        <td>{{ r.created_at | date:'dd/MM/yyyy' }}</td>
                    </tr>
                </tbody>
            </table>
        </neu-container>
    </div>
    <div id="secondary" class="layout inactive" [ngClass]="{'inactive': !isMobile && !room, 'active': isMobile && room}">
        <neu-container *ngIf="room">
            <h2>{{ room.id ? 'Editar sala' : 'Nueva sala' }}</h2>
            <form #f="ngForm">
                <label>Título</label>
                <neu-input type="text" name="name" [(ngModel)]="room.name" required placeholder="Nombre"></neu-input>
                <label>Descripción</label>
                <neu-input type="textarea" rows="10" name="description" [(ngModel)]="room.description" required placeholder="Descripción"></neu-input>
                <label>Capacidad</label>
                <neu-input type="number" min="1" name="capacity" [(ngModel)]="room.capacity" required placeholder="Capacidad"></neu-input>
                
                <div class="buttons">
                    <neu-button type="button" (neu_click)="room = null;">Volver</neu-button>
                    <neu-button type="submit" color="primary" [disabled]="!f.valid" (neu_click)="saveRoom()">{{ room.id ? 'Actualizar' : 'Publicar' }}</neu-button>
                </div>
            </form>
        </neu-container>
    </div>
</div>