<ngx-skeleton-loader *ngIf="length==null" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '90px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
<neu-container id="filter" *ngIf="length>=0">
    <neu-paginator [length]="length" [pageSize]="pageSize" [page]="page" (pageChange)="pageChange($event)"></neu-paginator>
    <neu-input type="text" id="search" placeholder="Buscar usuario" [ngModel]="search_text" (ngModelChange)="searchByUserName($event)"></neu-input>
    <neu-select [ngModel]="subscription_status_filter" (ngModelChange)="setStatusFilter($event)">
        <neu-option [value]="1">Todas las suscripciones</neu-option>
        <neu-option [value]="2">Activas</neu-option>
        <neu-option [value]="3">A punto de caducar</neu-option>
        <neu-option [value]="4">En prórroga</neu-option>
        <neu-option [value]="5">Caducadas</neu-option>
    </neu-select>
    <neu-select [ngModel]="pricing_id_filter" (ngModelChange)="setPricingFilter($event)">
        <neu-option [value]="-1">Todas las tarifas</neu-option>
        <neu-option *ngFor="let pr of pricings" [value]="pr.id">{{ pr.name }}</neu-option>
    </neu-select>
    <neu-select [ngModel]="role_filter" (ngModelChange)="setRoleFilter($event)">
        <neu-option [value]="1">Atletas</neu-option>
        <neu-option [value]="2">Personal</neu-option>
    </neu-select>
    <neu-button color="primary" *ngIf="subscription_selection.level === 'Box'" (click)="active_new_subscription = true;">Nueva suscripción</neu-button>
    <neu-button color="primary" *ngIf="subscription_selection.level === 'Box'" (click)="active_new_user = true;">Nuevo usuario</neu-button>
</neu-container>

<div id="content">
    <div id="primary" class="layout" [ngClass]="{'active': active_primary}">
        <ngx-skeleton-loader *ngIf="!user_subscriptions" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '950px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
        <neu-container id="table" *ngIf="user_subscriptions">
            <table class="neu-table">
                <thead>
                    <tr>
                        <th class="sortable" (click)="setSort('id')" [ngClass]="{'icon-up-dir': params.sort_col==='id' && params.sort_dir==='asc', 'icon-down-dir': params.sort_col==='id' && params.sort_dir==='desc'}">Id</th>
                        <th class="expand sortable" (click)="setSort('user_name')" [ngClass]="{'icon-up-dir': params.sort_col==='user_name' && params.sort_dir==='asc', 'icon-down-dir': params.sort_col==='user_name' && params.sort_dir==='desc'}">Usuario</th>
                        <th class="sortable" (click)="setSort('pricing')" [ngClass]="{'icon-up-dir': params.sort_col==='pricing' && params.sort_dir==='asc', 'icon-down-dir': params.sort_col==='pricing' && params.sort_dir==='desc'}">Tarifa</th>
                        <th class="sortable" (click)="setSort('role_group')" [ngClass]="{'icon-up-dir': params.sort_col==='role_group' && params.sort_dir==='asc', 'icon-down-dir': params.sort_col==='role_group' && params.sort_dir==='desc'}">Rol</th>
                        <th class="sortable" (click)="setSort('date_end')" [ngClass]="{'icon-up-dir': params.sort_col==='date_end' && params.sort_dir==='asc', 'icon-down-dir': params.sort_col==='date_end' && params.sort_dir==='desc'}">Caducidad</th>
                        <th class="sortable" (click)="setSort('price')" [ngClass]="{'icon-up-dir': params.sort_col==='price' && params.sort_dir==='asc', 'icon-down-dir': params.sort_col==='price' && params.sort_dir==='desc'}">Precio</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let s of user_subscriptions" [routerLink]="[s.id]">
                        <td>{{ '#' + s.id }}</td>
                        <td class="expand">{{ s.user.name + ' ' + s.user.surnames }}</td>
                        <td>
                            <span style="display: flex;">
                                <neu-chip color="primary">{{ s.pricing.name }}</neu-chip>
                                <neu-chip color="secondary" *ngIf="s.renew">
                                    <i class="icon-spin"></i>
                                    Auto
                                </neu-chip>
                            </span>
                        </td>
                        <td><neu-chip color="primary">{{ s.role.name }}</neu-chip></td>
                        <td *ngIf="s.active">{{ s.end_date ? (s.end_date | date:'dd/MM/yyyy') : 'Ilimitado' }}</td>
                        <td *ngIf="!s.active"><neu-chip [color]="utilsService.getColor('seven')">No activa</neu-chip></td>
                        <td>{{ s.price ? (s.price | currency) : 'Gratis' }}</td>
                    </tr>
                </tbody>
            </table>
        </neu-container>
    </div>
    <div id="secondary" class="layout" [ngClass]="{'inactive': inactive_secondary, 'active': active_secondary}">
        secondary
    </div>
</div>

<app-new-subscription-dialog 
    *ngIf="active_new_subscription && subscription_selection.level === 'Box'" 
    (close)="newSubscriptionEvent($event)"
    [box_id]="subscription_selection.box.id"
    [user_default]="user_created"
    [company_id]="subscription_selection.company.id"
    [pricings]="pricings"></app-new-subscription-dialog>
<app-new-user-dialog *ngIf="active_new_user && subscription_selection.level === 'Box'" [company_id]="subscription_selection.company.id" (close)="createdUserEvent($event)"></app-new-user-dialog>