<div class="detail-background" (click)="closeDialog()" [ngClass]="{'active': active}">
    <div class="detail" (click)="$event.stopPropagation()" #detail>
        <div class="detail-content">
            <div style="position: relative;">
                <div class="buttons">
                    <neu-button shape="circle" *ngIf="now < ts.start && (!edit)" (click)="edit = true;">
                        <i class="icon-pencil"></i>
                    </neu-button>
                    <neu-button shape="circle" (click)="delete()" *ngIf="now < ts.start && (!edit) && (!athletes || athletes.length==0) && ts.meta.ts.id">
                        <i class="icon-trash"></i>
                    </neu-button>
                    <neu-button shape="circle" (click)="closeDialog()" *ngIf="!isMobile">
                        <i class="icon-cross"></i>
                    </neu-button>
                </div>
                <h2 class="title">{{ ts.meta.ts.id ? ('Sesión de ' + (ts.start | date:'HH:mm') + ' a ' + (ts.end | date:'HH:mm')) : 'Crear sesión' }}</h2>
                <h3 class="date">{{ ts.start | date:'fullDate' }}</h3>
                <div class="status-chips">
                    <neu-chip color="primary" *ngIf="!edit">{{ ts.meta.ts.training_type ? ts.meta.ts.training_type.name : 'Sin tipo'}}</neu-chip>
                    <neu-chip color="secondary" *ngIf="!edit">{{ (now < ts.start) ? 'Abierto' : ((ts.end > now) ? 'En curso' : 'Finalizada') }}</neu-chip>
                    <div class="edit-training-type" *ngIf="edit && training_types && (!athletes || athletes.length==0)">
                        <p>Tipo:</p>
                        <neu-select [(ngModel)]="ts.meta.ts.training_type_id" placeholder="Tipo de entrenamiento">
                            <neu-option *ngFor="let tt of training_types" [value]="tt.id">{{ tt.name }}</neu-option>
                        </neu-select>
                    </div>
                    <div class="edit-datetimes" *ngIf="edit && (!athletes || athletes.length==0)">
                        <p>Inicio:</p>
                        <neu-input type="datetime-local" [ngModel]="ts.start" (ngModelChange)="setStartDatetimeLocal($event)"></neu-input>
                        <p>Fin:</p>
                        <neu-input type="datetime-local" [ngModel]="ts.end" (ngModelChange)="setEndDatetimeLocal($event)"></neu-input>
                    </div>
                </div>
                <div class="users">
                    <div class="coach" *ngIf="!edit && ts.meta.ts && ts.meta.ts.coach && ts.meta.ts.training_type_id != 2">
                        <img [src]="ts.meta.ts.coach.url_profile_photo" />
                        <span>
                            <b>Coach:</b><br>
                            {{ ts.meta.ts.coach.name }}
                        </span>
                    </div>
                    <div class="athletes" *ngIf="!edit">
                        <div class="loading-users" *ngIf="!athletes"><img src="../../../../../assets/svg/loading.svg" width="50" /></div>
                        <span *ngIf="athletes && athletes.length==0">No hay atletas apuntados en esta sesión.</span>
                        <ul *ngIf="athletes && athletes.length > 0">
                            <li class="user" *ngIf="athletes.length > 0"><img [src]="athletes[0].url_profile_photo" [alt]="athletes[0].name"></li>
                            <li class="user" *ngIf="athletes.length > 1"><img [src]="athletes[1].url_profile_photo" [alt]="athletes[1].name"></li>
                            <li class="user" *ngIf="athletes.length > 2"><img [src]="athletes[2].url_profile_photo" [alt]="athletes[2].name"></li>
                            <li class="more" *ngIf="athletes.length > 3">{{ athletes.length + ' atletas apuntados' }}</li>
                        </ul>
                    </div>
                    <div class="edit-coach" *ngIf="edit && coaches && ts.meta.ts.training_type_id != 2">
                        <p>Coach:</p>
                        <neu-select [(ngModel)]="ts.meta.ts.coach_id" placeholder="Elegir coach">
                            <neu-option *ngFor="let coach of coaches" [value]="coach.id">{{ coach.name + ' ' + coach.surnames }}</neu-option>
                        </neu-select>
                    </div>
                </div>
                <div class="workout" *ngIf="ts.meta.ts.training_type_id != 2">
                    <span *ngIf="!edit">
                        <i class="icon-dumbbell"></i>Workout: 
                        <a [routerLink]="['/admin', 'workouts', ts.meta.ts.training_workout_id]" *ngIf="ts.meta.ts.training_workout_id">{{ getWorkoutNameById(ts.meta.ts.training_workout_id) }}</a>
                        <span *ngIf="!ts.meta.ts.training_workout_id">No establecido</span>
                    </span>
                    <div class="workout-edit" *ngIf="edit && filtered_workouts">
                        <p>Workout de la sesión:</p>
                        <neu-autocomplete 
                            placeholder="Selecciona workout"
                            [(ngModel)]="ts.meta.ts.training_workout_id"
                            (onInputChanged)="filterWorkoutsByName($event)">
                            <neu-option *ngFor="let w of filtered_workouts" [value]="w.id" [text]="w.name">
                                {{ w.name }}
                                <neu-chip color="secondary">{{ w.category }}</neu-chip>
                            </neu-option>
                        </neu-autocomplete>
                    </div>
                </div>
                <div class="capacity">
                    <span *ngIf="!edit"><i class="icon-users"></i>Capacidad: <b>{{ ts.meta.ts.capacity ? (ts.meta.ts.capacity + ' atletas') : 'No especificado' }}</b></span>
                    <div class="edit-capacity" *ngIf="edit">
                        <p>Capacidad de la sesión:</p>
                        <neu-input type="number" [(ngModel)]="ts.meta.ts.capacity" placeholder="Capacidad de la sesión"></neu-input>
                    </div>
                </div>
                <div class="credits">
                    <span *ngIf="!edit"><i class="icon-ticket"></i>Coste: <b>{{ !ts.meta.ts.credits ? 'No cuesta créditos' : 'Cuesta créditos' }}</b></span>
                    <div class="edit-credits" *ngIf="edit && (!athletes || athletes.length==0)">
                        <p>Capacidad de la sesión:</p>
                        <neu-checkbox [(ngModel)]="ts.meta.ts.credits">Cuenta créditos</neu-checkbox>
                    </div>
                </div>
                <neu-button class="save-button" *ngIf="edit" color="primary" size="full-width" (neu_click)="save()" [disabled]="!ts.start || !ts.end || ts.start >= ts.end || !ts.meta.ts.training_type_id">{{ ts.meta.ts.id ? 'Actualizar' : 'Crear'}}</neu-button>
            </div>
        </div>
    </div>
</div>