<div id="content">
    <div id="secondary" class="layout active">
        <ngx-skeleton-loader *ngIf="!subscriptions" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '450px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
        <neu-container id="subscriptions" *ngIf="subscriptions">
            <neu-container class="subscription" *ngFor="let s of subscriptions" neu_small [ngClass]="{'neu-pressed': selected_subscription && selected_subscription.id==s.id}" (click)="selected_subscription = s;">
                <span class="dates">
                    {{
                        s.start_date && s.end_date ?
                            ('Del ' + (s.start_date | date:'shortDate') + ' al ' + (s.end_date | date:'shortDate')) :
                            (
                                s.start_date && !s.end_date ?
                                'Pendiente de pagar' : 
                                'Sin fechas'
                            )
                    }}
                </span>
                <neu-chip *ngIf="s.active" [color]="utilsService.getColor('six')">Activa</neu-chip>
                <neu-chip *ngIf="!s.active" [color]="utilsService.getColor('seven')">Inactiva</neu-chip>
                <neu-chip color="secondary">{{ s.plan.name }}</neu-chip>
            </neu-container>
        </neu-container>
    </div>

    <div id="primary" class="layout active" *ngIf="subscriptions">
        <ngx-skeleton-loader *ngIf="!subscriptions" class="container"  count="1" [theme]="{ 'border-radius': '15px', height: '750px', 'background-color': '#E1E4E8' }" ></ngx-skeleton-loader>
        <neu-container id="orders" *ngIf="subscriptions">
            <table class="neu-table">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Fecha</th>
                        <th class="expand">Factura</th>
                        <th>Estado</th>
                        <th>Total</th>
                        <th>Fecha de cobro</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let o of selected_subscription.company_orders">
                        <td>{{ o.id }}</td>
                        <td>{{ o.created_at | date:'dd/MM/yyyy' }}</td>
                        <td>{{ o.invoice_id ? o.invoice.official_number : 'Sin factura' }}</td>
                        <td>
                            <neu-chip *ngIf="o.payment.charged" [color]="utilsService.getColor('six')">Pagado</neu-chip>
                            <neu-chip *ngIf="!o.payment.charged" [color]="utilsService.getColor('seven')">No pagado</neu-chip>
                        </td>
                        <td>{{ o.total | currency }}</td>
                        <td>{{ o.payment.charged ? (o.invoice.emitted_date | date:'dd/MM/yyyy') : '' }}</td>
                    </tr>
                </tbody>
            </table>
        </neu-container>
    </div>
</div>