<neu-container id="actions" *ngIf="workout">
    <div>
        <label for="name-workout" style="margin: 0 10px;">Nombre</label>
        <neu-input id="name-workout" type="text" [(ngModel)]="workout.name" placeholder="Nombre" *ngIf="editable"></neu-input>
        <h4 *ngIf="!editable" style="margin-right: 20px;">{{workout.name}}</h4>
        <label for="category-workout" style="margin-right: 10px;">Categoria</label>
        <neu-input id="category-workout" type="text" [(ngModel)]="workout.category" placeholder="Categoria" *ngIf="editable"></neu-input>
        <h4 *ngIf="!editable">{{workout.category}}</h4>
    </div>
    <div style="padding-right: 10px;">
        <neu-button color="secondary" shape="circle" (click)="showHelp = true"><i class="icon-help-circled"></i></neu-button>
        <neu-button [routerLink]="['/admin', 'workouts']">Volver</neu-button>
        <neu-button (click)="deleteWorkout()" *ngIf="!nuevo && editable">Borrar</neu-button>
        <neu-button color="primary" (click)="updateWorkout()" *ngIf="!nuevo && editable">Actualizar</neu-button>
        <neu-button color="primary" (click)="createWorkout()" *ngIf="nuevo && editable">Crear</neu-button>
    </div>
</neu-container>

<ngx-skeleton-loader *ngIf="!workout" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '520px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
<neu-container class="container" id="left" *ngIf="workout">
    <h2 class="title-graph">Workout<span *ngIf="!nuevo" style="margin-left: 5px"> - Identificador: {{ workout.id }}</span></h2>
    <div class="description-textarea" *ngIf="editable">
        <label>Descripción</label>
        <neu-input type="textarea" rows="3" [(ngModel)]="workout.description" placeholder="Descripción del workout"></neu-input>
    </div>
    <div id="secciones" *ngIf="editable">
        <neu-container class="seccion" *ngFor="let s of workout.training_workout_sections; let i = index; last as isLastSecction">
            <div class="seccion-previous">
                <div class="seccion-header">
                    <h3 style="margin-left: 0;">Sección {{i+1}}</h3>
                    <neu-select class="element-header" [(ngModel)]="s.type" *ngIf="editable">
                        <neu-option [value]="t" *ngFor="let t of types">{{t}}</neu-option>
                    </neu-select>
                    <div class="element-header" *ngIf="!isEmom(s.type)">
                        <label for="time-section" *ngIf="s.type!=='For Time'">Tiempo (s)</label>
                        <label for="time-section" *ngIf="s.type==='For Time'">Time Cap (s)</label>
                        <neu-input id="time-section" type="number" placeholder="--" [(ngModel)]="s.seconds"></neu-input>
                    </div>
                    <div class="element-header" *ngIf="s.type!='AMRAP'">
                        <label for="rounds-section">Rondas</label>
                        <neu-input id="rounds-section" type="text" placeholder="Rondas" [(ngModel)]="s.rounds"></neu-input>
                    </div>
                </div>
                <neu-button *ngIf="editable" shape="circle" style="padding-left: 20px;padding-bottom: 25px;" (click)="deleteSection(i)"><i class="icon-trash"></i></neu-button>
            </div>
            <div class="description-textarea">
                <label>Descripción de la sección</label>
                <neu-input *ngIf="editable" type="textarea" rows="3" [(ngModel)]="s.description" placeholder="Descripción de la sección"></neu-input>
            </div>
            <div>
                <neu-checkbox [(ngModel)]="s.custom_score">Puntuación personalizada</neu-checkbox>
                <div class="description-textarea" *ngIf="s.custom_score">
                    <label>Descripción de la puntuación</label>
                    <neu-input type="textarea" rows="2" [(ngModel)]="s.custom_score_explanation" placeholder="Como se puntuará"></neu-input>
                </div>
            </div>
            <div id="ejercicios">
                <neu-accordion>
                    <neu-expansion-panel class="ejercicio" *ngFor="let e of s.lines; let j = index">
                        <neu-expansion-panel-header>
                            <neu-panel-title>#{{j+1}}</neu-panel-title>
                            <neu-panel-description>
                                <span style="margin-right: 10px;">{{(e.exercise ? e.exercise.name : '')}}</span>
                                <neu-chip color="primary" *ngIf="e.exercise && e.exercise.type">{{e.exercise.type}}</neu-chip>
                                <neu-chip color="#34A363" *ngIf="e.exercise && e.exercise.level==1">Bajo</neu-chip>
                                <neu-chip color="#DB8E12" *ngIf="e.exercise && e.exercise.level==2">Medio</neu-chip>
                                <neu-chip color="#E92626" *ngIf="e.exercise && e.exercise.level==3">Alto</neu-chip>
                            </neu-panel-description>
                        </neu-expansion-panel-header>
                        <div class="description-textarea">
                            <label>Descripción de la linea</label>
                            <neu-input type="textarea" rows="3" [(ngModel)]="e.description" placeholder="Descripción del ejercicio"></neu-input>
                        </div>
                        <neu-chip color="secondary">RX</neu-chip>
                        <div class="ejercicio-header">
                            <neu-autocomplete 
                                placeholder="Ejercicio" 
                                [ngModel]="e.exercise"
                                (ngModelChange)="e.exercise=$event; e.exercise_id=$event.id;"
                                (onInputChanged)="filterExercise($event)"
                                [filterMinLength]="3">
                                <neu-option *ngFor="let e of exercises" [value]="e">{{ e.name }}</neu-option>
                            </neu-autocomplete>
                            <div>
                                <neu-chip color="primary" *ngIf="e.exercise && e.exercise.type">{{e.exercise.type}}</neu-chip>
                                <neu-chip color="#34A363" *ngIf="e.exercise && e.exercise.level==1">Bajo</neu-chip>
                                <neu-chip color="#DB8E12" *ngIf="e.exercise && e.exercise.level==2">Medio</neu-chip>
                                <neu-chip color="#E92626" *ngIf="e.exercise && e.exercise.level==3">Alto</neu-chip>
                            </div>
                        </div>
                        <div class="ejercicio-detalle">
                            <div>
                                <neu-input type="text" placeholder="Male" [(ngModel)]="e.maleVal"></neu-input>
                                /
                                <neu-input type="text" placeholder="Famale" [(ngModel)]="e.femaleVal" style="margin-left: 10px;"></neu-input>
                                <neu-input type="text" placeholder="undades" [(ngModel)]="e.units"></neu-input>
                            </div>
                            <div>
                                <neu-input type="text" placeholder="reps" [(ngModel)]="e.reps"></neu-input>
                                repeticiones 
                            </div>
                            <div>
                                <neu-input type="text" placeholder="segundos" [(ngModel)]="e.seconds"></neu-input>
                                segundos 
                            </div>
                        </div>
                        <hr style="height:2px;border-width:0;color:#e2e2e2;background-color:#e2e2e2;margin:20px;">
                        <neu-chip color="secondary">Scaled</neu-chip>
                        <div class="ejercicio-header">
                            <neu-autocomplete 
                                placeholder="Ejercicio" 
                                [(ngModel)]="e.exercise_scaled"
                                (onInputChanged)="filterExercise($event)"
                                [filterMinLength]="3">
                                <neu-option *ngFor="let e of exercises" [value]="e">{{ e.name }}</neu-option>
                            </neu-autocomplete>
                            <div>
                                <neu-chip color="primary" *ngIf="e.exercise_scaled && e.exercise_scaled.type">{{e.exercise_scaled.type}}</neu-chip>
                                <neu-chip color="#34A363" *ngIf="e.exercise_scaled && e.exercise_scaled.level==1">Bajo</neu-chip>
                                <neu-chip color="#DB8E12" *ngIf="e.exercise_scaled && e.exercise_scaled.level==2">Medio</neu-chip>
                                <neu-chip color="#E92626" *ngIf="e.exercise_scaled && e.exercise_scaled.level==3">Alto</neu-chip>
                            </div>
                        </div>
                        <div class="ejercicio-detalle">
                            <div>
                                <neu-input type="text" placeholder="Male" [(ngModel)]="e.maleVal_scaled"></neu-input>
                                /
                                <neu-input type="text" placeholder="Famale" [(ngModel)]="e.femaleVal_scaled" style="margin-left: 10px;"></neu-input>
                                <neu-input type="text" placeholder="undades" [(ngModel)]="e.units_scaled"></neu-input>
                            </div>
                            <div>
                                <neu-input type="text" placeholder="reps" [(ngModel)]="e.reps_scaled"></neu-input>
                                repeticiones 
                            </div>
                            <div>
                                <neu-input type="text" placeholder="segundos" [(ngModel)]="e.seconds_scaled"></neu-input>
                                segundos 
                            </div>
                        </div>
                        <div class="buttons-exercise">
                            <neu-button *ngIf="editable" color="secondary" (click)="sameSC(i,j)">Copiar Rx a Scaled</neu-button>
                            <neu-button *ngIf="editable" shape="circle" (click)="deleteExercise(i,j)" style="padding-left: 20px;"><i class="icon-trash"></i></neu-button>
                        </div>
                    </neu-expansion-panel>
                </neu-accordion>
                <br>
                <neu-button *ngIf="editable" color="primary" (click)="addExercise(i)">Nuevo ejercicio</neu-button>
            </div>
        </neu-container>
        <neu-button *ngIf="editable" color="primary" (click)="addSection()">Nueva sección</neu-button>
    </div>

    <!-- DISABLED -->
    <div class="description-textarea" *ngIf="!editable">
        <label *ngIf="workout.description">Descripción</label>
        <span *ngIf="!editable" class="description-text">{{workout.description}}</span>
    </div>
    <div id="secciones" *ngIf="!editable">
        <neu-container class="seccion" *ngFor="let s of workout.training_workout_sections; let i = index; last as isLastSecction">
            <div class="seccion-header" style="padding: 0;">
                <span style="font-weight: 500; margin-left: 0;">Sección {{i+1}}</span>
                <span style="font-weight: 500">{{s.type}}</span>
                <div *ngIf="s.seconds">
                    <span>{{s.seconds.toString() | secToMin}}</span>
                    <span for="time-section" *ngIf="s.type==='For Time'" style="margin-left: 5px;">de Time Cap</span>
                </div>
                <div *ngIf="s.rounds">
                    <label for="rounds-section">{{s.rounds}} Rondas</label>
                </div>
            </div>
            <div class="description-textarea" *ngIf="s.description">
                <label>Descripción</label>
                <span *ngIf="!editable" class="description-text">{{s.description}}</span>
            </div>
            <div>
                <neu-checkbox *ngIf="editable" [(ngModel)]="s.custom_score">Puntuación personalizada</neu-checkbox>
                <h5 *ngIf="!editable && s.custom_score">Puntuación personalizada</h5>
                <div class="description-textarea" *ngIf="s.custom_score">
                    <label>Descripción de la sección</label>
                    <span *ngIf="!editable" class="description-text">{{s.description}}</span>
                </div>
            </div>
            <div id="ejercicios">
                <neu-accordion>
                    <neu-expansion-panel class="ejercicio" *ngFor="let e of s.lines; let j = index">
                        <neu-expansion-panel-header>
                            <neu-panel-title>#{{j+1}}</neu-panel-title>
                            <neu-panel-description>
                                <span style="margin-right: 10px;">{{(e.exercise ? e.exercise.name : '')}}</span>
                                <neu-chip color="primary" *ngIf="e.exercise && e.exercise.type">{{e.exercise.type}}</neu-chip>
                                <neu-chip color="#34A363" *ngIf="e.exercise && e.exercise.level==1">Bajo</neu-chip>
                                <neu-chip color="#DB8E12" *ngIf="e.exercise && e.exercise.level==2">Medio</neu-chip>
                                <neu-chip color="#E92626" *ngIf="e.exercise && e.exercise.level==3">Alto</neu-chip>
                            </neu-panel-description>
                        </neu-expansion-panel-header>
                        <div class="description-textarea">
                            <label>Descripción de la lineaa</label>
                            <span class="description-text">{{e.description}}</span>
                        </div>
                        <neu-chip color="secondary">RX</neu-chip>
                        <div class="ejercicio-header">
                            <h4>{{ e.exercise.name }}</h4>
                            <div>
                                <neu-chip color="primary" *ngIf="e.exercise && e.exercise.type">{{e.exercise.type}}</neu-chip>
                                <neu-chip color="#34A363" *ngIf="e.exercise && e.exercise.level==1">Bajo</neu-chip>
                                <neu-chip color="#DB8E12" *ngIf="e.exercise && e.exercise.level==2">Medio</neu-chip>
                                <neu-chip color="#E92626" *ngIf="e.exercise && e.exercise.level==3">Alto</neu-chip>
                            </div>
                        </div>
                        <p *ngIf="e.maleVal && e.femaleVal">{{e.maleVal + ' ' + (e.maleVal && e.femaleVal ? '/' : '') + ' ' + (e.femaleVal ? e.femaleVal : '') + ' ' + e.units}}</p>
                        <p *ngIf="e.reps">{{e.reps}} repeticiones </p>
                        <p *ngIf="e.seconds">{{e.seconds.toString() | secToMin}}</p>
                        <hr style="height:2px;border-width:0;color:#e2e2e2;background-color:#e2e2e2;margin:20px;">
                        <neu-chip color="secondary">Scaled</neu-chip>
                        <div class="ejercicio-header">
                            <h4>{{ e.exercise_scaled.name }}</h4>
                            <div>
                                <neu-chip color="primary" *ngIf="e.exercise_scaled && e.exercise_scaled.type">{{e.exercise_scaled.type}}</neu-chip>
                                <neu-chip color="#34A363" *ngIf="e.exercise_scaled && e.exercise_scaled.level==1">Bajo</neu-chip>
                                <neu-chip color="#DB8E12" *ngIf="e.exercise_scaled && e.exercise_scaled.level==2">Medio</neu-chip>
                                <neu-chip color="#E92626" *ngIf="e.exercise_scaled && e.exercise_scaled.level==3">Alto</neu-chip>
                            </div>
                        </div>
                        <p *ngIf="e.maleVal_scaled && e.femaleVal_scaled">{{e.maleVal_scaled + ' ' + (e.maleVal_scaled && e.femaleVal_scaled ? '/' : '') + ' ' + (e.femaleVal_scaled ? e.femaleVal_scaled : '') + ' ' + e.units_scaled}}</p>
                        <p *ngIf="e.reps_scaled">{{e.reps_scaled}} repeticiones </p>
                        <p *ngIf="e.seconds_scaled">{{e.seconds_scaled.toString() | secToMin}}</p>
                        <neu-button *ngIf="editable" color="secondary" (click)="sameSC(i,j)">Rx y Scaled iguales</neu-button>
                        <neu-button *ngIf="editable" shape="circle" style="padding: 0px 20px;position: absolute;top: 50px;right: 20px;" (click)="deleteExercise(i,j)"><i class="icon-trash"></i></neu-button>
                    </neu-expansion-panel>
                </neu-accordion>
            </div>
        </neu-container>
    </div>
</neu-container>

<ngx-skeleton-loader *ngIf="!workout && !nuevo" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '520px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
<neu-container class="container" id="right" *ngIf="workout">
    <neu-container class="chart" id="uses-chart">
        <h2 class="title-graph">Usos</h2>
        <div class="no-info" *ngIf="!workout_chart"> No hay datos a mostrar</div>
        <ngx-charts-line-chart *ngIf="workout_chart && workout_chart.results"
            [results]="workout_chart.results"
            [gradient]="workout_chart.gradient"
            [xAxis]="workout_chart.showXAxis"
            [yAxis]="workout_chart.showYAxis"
            [xAxisTicks]="workout_chart.xAxisTicks"
            [legend]="workout_chart.showLegend"
            [legendTitle]=""
            [showXAxisLabel]="workout_chart.showXAxisLabel"
            [showYAxisLabel]="workout_chart.showYAxisLabel"
            [xAxisLabel]="workout_chart.xAxisLabel"
            [yAxisLabel]="workout_chart.yAxisLabel"
            [autoScale]="workout_chart.autoScale">
        </ngx-charts-line-chart>
    </neu-container>
    <neu-container class="user_subscriptions">
        <h2 class="title-graph">Mejores resultados de los atletas</h2>
        <p *ngIf="!benchmarks || benchmarks.length==0">No hay ningún resultado disponible</p>
        <div *ngIf="benchmarks" class="benchmark-container">
            <neu-container neu_small *ngFor="let b of benchmarks">
                <div class="benchmark-containers">
                    <div id="img-column">
                        <div class="neu-profile-photo" style="box-shadow: none;">
                            <img src="{{b.user.url_profile_photo}}">
                        </div>
                    </div>
                    <span style="margin: 0 10px;">{{b.user.name}}</span>
                    <neu-chip color="primary" *ngIf="b.time">{{ b.time | secToMin}}</neu-chip>
                    <neu-chip color="secondary" *ngIf="b.rounds">{{b.rounds}} rondas</neu-chip>
                    <neu-chip color="primary" *ngIf="b.score">{{b.score}} puntos</neu-chip>
                </div>
            </neu-container>
        </div>
        
    </neu-container>
</neu-container>

<div *ngIf="showHelp" class="dialog-container">
    <neu-container class="dialog">
        <h2>Sácale todo el partido!</h2>
        <label>Aqui tienes unos pequeños trucos para sacarle todo el partido.</label>
        <ul>
            <li>
                <h3>Crear y editar</h3>
                <p>¿Necesitas crear o editar un entrenamiento propio? Selecciona un box para hacerlo</p>
            </li>
        </ul>
        <ul>
            <li>
                <h3>Incrementando repeticiones y peso</h3>
                <p>¿Tienes una seccuencia de peso, repeticiones, ...?</p>
                <p>Ahorra tiempo usando succesiones como:</p>
                <p>Para poner '2, 4, 6, 8, 10, ...' reps, tan solo escribe '2*n', siendo 'n' el numero de ronas</p>
            </li>
        </ul>
        <ul>
            <li>
                <h3>El nivel Scaled es igual que el RX</h3>
                <p>No pierdas tiempo, usa el botón 'Rx y Scaled iguales' para copiar todos los parámetros de RX a Scaled</p>
            </li>
        </ul>
        
        <div class="buttons">
            <neu-button color="secondary" (neu_click)="showHelp = false">Entendido!</neu-button>
        </div>
    </neu-container>
</div>