<div id="order-detail-container" class="neu-container">
    <div id="detail-header">
        <neu-button (click)="closeDetail()" shape="round" size="small">
            <i class="icon-cross" style="color: #8d2790;"></i>
        </neu-button>

        <div class="blue" *ngIf="boxOrder.invoice">Pagado</div>
        <div class="red" *ngIf="!boxOrder.invoice">No pagado</div>
    </div>

    <div *ngIf="subscription && user">
        <h2>Suscripción</h2>
        <div class="neu-container" id="subscription">
            <div id="img-column">
                <div class="neu-profile-photo">
                    <img src="{{user.url_profile_photo}}">
                </div>
            </div>
            <div id="description-column">
                <div class="row-subscription" style="margin-bottom: 20px;">
                    <span>{{user.name}}</span>
                    <span id="pricing-name">{{subscription.pricing.name}}</span>
                </div>
                <div class="row-subscription">
                    <div *ngIf="!subscription.active" class="red">No activa</div>
                    <div *ngIf="subscription.active" class="blue">Activa</div>
    
                    <div class="blue">{{subscription.role.name}}</div>
                </div>
            </div>
        </div>
    </div>

    <div>
        <h2>Resumen</h2>
        <div class="neu-container" id="resumen">
            <div class="pink">
                <span>Sub.</span>
                <span>{{ boxOrder.subtotal | number : '1.2-2' }} €</span>
            </div>
            <div class="pink">
                <span>Imp.</span>
                <span>{{ boxOrder.vat | number : '1.2-2' }} €</span>
            </div>
            <div class="pink">
                <span>Total</span>
                <span>{{ boxOrder.total | number : '1.2-2' }} €</span>
            </div>
        </div>
    </div>

    <div id="generate-factura">
        <neu-button color="primary" [disabled]="!boxOrder.invoice" (click)="verFactura()">Ver factura</neu-button>
    </div>
</div>

<div *ngIf="factura" id="factura">
    <div class="neu-container">
        <div id="detail-header" style="margin-bottom: 20px;">
            <neu-button (click)="closeFactura()">
                <i class="icon-cross" style="color: #8d2790;"></i>
            </neu-button>
        </div>

        <div *ngIf="invoiceHTML" [innerHTML]="invoiceHTML | safeHtml"></div>

        <div id="download">
            <div id="generate-factura">
                <neu-button color="primary" [disabled]="!boxOrder.invoice">Descargar PDF</neu-button>
            </div>
        </div>
    </div>

</div>