<mat-progress-bar id="loading" mode="indeterminate" *ngIf="loading_active | async"></mat-progress-bar>
<div id="app-wrapper">
    <div id="top-nav">
        <neu-button id="menu-switcher" (neu_click)="menuActive = true;"><i class="icon-menu"></i></neu-button>
        <div id="main-logo">
            <a [routerLink]="['/admin']">
                <img class="logo" src="../../../assets/img/logo_hit_a_wod/haw_logo_250.png" alt="logo hit a wod" />
                <img class="text" src="../../../assets/img/logo_hit_a_wod/haw_text_500.png" alt="logo hit a wod" />
            </a>
        </div>
        <div id="right" [ngClass]="{'dropdownsActive': dropdownsActive}">
            <div class="close">
                <neu-button class="close-button" (neu_click)="dropdownsActive = false;">
                    <i class="icon-cross"></i>
                </neu-button>
            </div>
            <neu-select id="quick-actions" [placeholder]="'Acciones rápidas'">
                <!-- <neu-option><i class="icon-television"></i>TV Box</neu-option> -->
                <neu-option (click)="openContacto()"><i class="icon-mail"></i>Contáctanos</neu-option>
                <neu-option [routerLink]="['/politica-de-privacidad']"><i class="icon-hammer"></i>Aviso Legal</neu-option>
            </neu-select>
            <neu-select id="box-selector" [placeholder]="'Selecciona un box'" [ngModel]="active_subscription_option" (ngModelChange)="setSubscriptionOption($event)">
                <neu-option *ngFor="let opt of subscriptions_options" [value]="opt">
                    <b>{{ opt.company.name }}</b> - <i>{{ opt.role.name }}</i><br>
                    <span>{{ opt.box ? opt.box.name : ('Nivel: ' + opt.level) }}</span>
                </neu-option>
            </neu-select>
            <div id="user" (click)="dropdownsActive = true;">
                <span>{{ (userService.currentUser | async).name + ' ' + (userService.currentUser | async).surnames }}</span>
                <img [src]="'../../../assets/img/avatar1.jpg'" alt="user name" />
            </div>
        </div>
    </div>
    
    <div id="main" [ngClass]="{'menuActive': menuActive}">
        <div id="menu-wrapper">
            <div class="close">
                <neu-button class="close-button" (click)="menuActive = false;">
                    <i class="icon-cross"></i>
                </neu-button>
            </div>
            <ul>
                <ngx-skeleton-loader *ngIf="!active_subscription_option" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '57px', 'background-color': '#E1E4E8', 'margin-bottom': '10px' }" ></ngx-skeleton-loader>
                <li routerLinkActive="active" *ngIf="active_subscription_option">
                    <a [routerLink]="['dashboard']" (click)="menuActive = false;">
                        <i class="icon-home"></i>
                        Home
                    </a>
                </li>
                <ngx-skeleton-loader *ngIf="!active_subscription_option" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '57px', 'background-color': '#E1E4E8', 'margin-bottom': '10px' }" ></ngx-skeleton-loader>
                <li routerLinkActive="active" *ngIf="active_subscription_option">
                    <a [routerLink]="['calendar']" (click)="menuActive = false;">
                        <i class="icon-calendar"></i>
                        Calendario
                    </a>
                </li>
                <ngx-skeleton-loader *ngIf="!active_subscription_option" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '57px', 'background-color': '#E1E4E8', 'margin-bottom': '10px' }" ></ngx-skeleton-loader>
                <li routerLinkActive="active" *ngIf="active_subscription_option && (active_subscription_option.role.slug==='box_admin' || active_subscription_option.role.slug==='company_admin')">
                    <a [routerLink]="['news']" (click)="menuActive = false;">
                        <i class="icon-newspaper"></i>
                        Noticias
                    </a>
                </li>
                <ngx-skeleton-loader *ngIf="!active_subscription_option" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '57px', 'background-color': '#E1E4E8', 'margin-bottom': '10px' }" ></ngx-skeleton-loader>
                <li routerLinkActive="active" *ngIf="active_subscription_option">
                    <a [routerLink]="['subscriptions']" (click)="menuActive = false;">
                        <i class="icon-users"></i>
                        Suscripciones
                    </a>
                </li>
                <ngx-skeleton-loader *ngIf="!active_subscription_option" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '57px', 'background-color': '#E1E4E8', 'margin-bottom': '10px' }" ></ngx-skeleton-loader>
                <li routerLinkActive="active" *ngIf="active_subscription_option">
                    <a [routerLink]="['workouts']" (click)="menuActive = false;">
                        <i class="icon-dumbbell"></i>
                        Workouts
                    </a>
                </li>
                <ngx-skeleton-loader *ngIf="!active_subscription_option" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '57px', 'background-color': '#E1E4E8', 'margin-bottom': '10px' }" ></ngx-skeleton-loader>
                <li routerLinkActive="active" *ngIf="active_subscription_option && (active_subscription_option.level==='Box')">
                    <a [routerLink]="['training-rooms']" (click)="menuActive = false;">
                        <i class="icon-cube"></i>
                        Salas
                    </a>
                </li>
                <ngx-skeleton-loader *ngIf="!active_subscription_option" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '57px', 'background-color': '#E1E4E8', 'margin-bottom': '10px' }" ></ngx-skeleton-loader>
                <li routerLinkActive="active" *ngIf="active_subscription_option && (active_subscription_option.role.slug==='box_admin' || active_subscription_option.role.slug==='company_admin')">
                    <a [routerLink]="['billing']" (click)="menuActive = false;">
                        <i class="icon-wallet"></i>
                        Facturación
                    </a>
                </li>
                <ngx-skeleton-loader *ngIf="!active_subscription_option" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '57px', 'background-color': '#E1E4E8', 'margin-bottom': '10px' }" ></ngx-skeleton-loader>
                <li routerLinkActive="active" *ngIf="active_subscription_option && (active_subscription_option.level==='Company')">
                    <a [routerLink]="['business']" (click)="menuActive = false;">
                        <i class="icon-commercial"></i>
                        Mi negocio
                    </a>
                </li>
            </ul>
            <div id="credits">
                <a href="https://bisual.net" target="_blank">
                    <span>Created by</span>
                    <img src="../../../assets/img/logo_bisual/Recurso 11x.png" alt="bisual" />
                </a>
                <a class="out" [routerLink]="[]" (click)="$event.stopPropagation(); logout()" style="display: block; text-align: center; margin-top: 10px; color: #8B278F; text-decoration: underline;">Cerrar sesión</a>
            </div>
        </div>
        <div id="content-wrapper">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

<div *ngIf="showContactoPopUp">
    <app-contacto (close)="showContactoPopUp = false"></app-contacto>
</div>