<div *ngIf="rol && (rol.id==1 || rol.id==2)" class="neu-container-pressed plan" [ngClass]="{'vertical': vertical, 'more-options': more_options, 'neu-container-pressed': pressed, 'neu-container': !pressed}">
    <!-- Tu plan -->
    <div id="title-plan">
        <span class="your-plan">Tu plan</span>
        <h2>{{subscription.plan.name}}</h2>
        <ngx-charts-pie-grid
            [view]="pie.view"
            [scheme]="pie.colorScheme"
            [results]="pie.results"
            [designatedTotal]="pie.designatedTotal"
            [label]="pie.label">
        </ngx-charts-pie-grid>
        <div class="options" *ngIf="more_options">
            <p style="text-align: center">{{ getDaysUntilFinishesText() }}</p>
            <ngx-skeleton-loader *ngIf="!company_subscriptions" class="container"  count="1" [theme]="{ 'border-radius': '8px', height: '25px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            <p style="text-align: center" *ngIf="company_subscriptions"><b>
                {{ 
                    !subscription?.active ? 
                       'Contacta con soporte' :
                        ((company_subscriptions && company_subscriptions[0].id!=subscription.id && subscription.ends_at!=null) ? 
                            ('Se iniciará el ' + company_subscriptions[0].plan.name + ' al finalizar') :
                            (subscription.ends_at!=null ?
                                'La suscripción no se renovará' :
                                'Se renovará automáticamente'
                            )
                        )
                }}
            </b></p>
            <p *ngIf="company.card_brand && company.card_last_four" style="text-align: center"><i>{{ company.card_brand | titlecase }} terminada en {{ company.card_last_four }}</i></p>
            <ngx-skeleton-loader *ngIf="!company_subscriptions" class="container"  count="1" [theme]="{ 'border-radius': '8px', height: '45px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            <neu-button color="primary" 
                size="full-width" 
                (neu_click)="appChangeCompanyPlanDialog = true;"
                *ngIf="!subscription.ends_at && company_subscriptions && company_subscriptions[0].id==subscription.id"
            >Cambiar plan</neu-button>
            <ngx-skeleton-loader *ngIf="!company_subscriptions" class="container"  count="1" [theme]="{ 'border-radius': '8px', height: '45px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            <neu-button *ngIf="company_subscriptions" color="secondary" size="full-width" [routerLink]="['history']">Ver historial de renovaciones</neu-button>
            <neu-button size="full-width" (neu_click)="appUpdateCompanyPaymentMethodDialog = true;">Cambiar método de pago</neu-button>
            <ngx-skeleton-loader *ngIf="!company_subscriptions" class="container"  count="1" [theme]="{ 'border-radius': '8px', height: '45px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
            <neu-button 
                *ngIf="company_subscriptions && company_subscriptions[0].id==subscription.id && subscription.ends_at==null"
                size="full-width" 
                (neu_click)="endSubscription()"
            >Finalizar suscripción</neu-button>
        </div>
    </div>

    <div id="current-use">
        <div class="current-use-column">
            <div class="row">
                <span class="row-title">{{company.usage.n_athletes}} atletas</span>
                <div>
                    <mat-progress-bar value="{{company.usage.n_athletes/subscription.plan.n_athletes*100}}"></mat-progress-bar>
                    <span class="detail-info">{{subscription.plan.n_athletes || '&infin;' }}</span>
                </div>
            </div>
            <div class="row">
                <span class="row-title">{{company.usage.n_boxes}} boxes</span>
                <div>
                    <mat-progress-bar value="{{company.usage.n_boxes/subscription.plan.n_boxes*100}}"></mat-progress-bar>
                    <span class="detail-info">{{subscription.plan.n_boxes || '&infin;'}}</span>
                </div>
            </div>
        </div>
        <div class="current-use-column">
            <div class="row">
                <span class="row-title">{{company.usage.n_coaches}} coaches</span>
                <div>
                    <mat-progress-bar value="{{company.usage.n_coaches/subscription.plan.n_coaches*100}}"></mat-progress-bar>
                    <span class="detail-info">{{subscription.plan.n_coaches || '&infin;'}}</span>
                </div>
            </div>
            <div class="row">
                <span class="row-title">{{company.usage.n_admins}} admins</span>
                <div>
                    <mat-progress-bar value="{{company.usage.n_admins/subscription.plan.n_admins*100}}"></mat-progress-bar>
                    <span class="detail-info">{{subscription.plan.n_admins || '&infin;'}}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<app-change-company-plan-dialog 
    [subscriptionSelection]="subscriptionSelection"
    *ngIf="appChangeCompanyPlanDialog"
    (close)="onCompanyPlanChanges($event)"
></app-change-company-plan-dialog>
<app-update-company-payment-method-dialog 
    *ngIf="appUpdateCompanyPaymentMethodDialog"
    (close)="appUpdateCompanyPaymentMethodDialog = false;"
    [company_id]="subscription.company_id"
></app-update-company-payment-method-dialog>