<div *ngIf="!detail" class="neu-container" id="order-container">
    <div class="order-container-line" id="order-header">
        <div>#{{boxOrder.id}}</div>
        <div>Creado el {{dateFormat(boxOrder.created_at)}}</div>
    </div>
    <div class="order-container-line" id="order-second-line">
        <div *ngIf="subscription_id" class="blue">Suscripción #{{subscription_id}}</div>
        <div *ngIf="!subscription_id" class="blue">Pedido</div>
        <div class="blue" *ngIf="boxOrder.invoice">Pagado</div>
        <div class="red" *ngIf="!boxOrder.invoice">No pagado</div>
    </div>
    <div class="order-container-line" id="resume">
        <div>{{boxOrder.total}} €</div>
        <div *ngIf="boxOrder.invoice">Pagado el {{dateFormat(boxOrder.invoice.created_at)}}</div>
    </div>
</div>

<div *ngIf="detail" class="neu-container" id="order-container-mobile">
    <div class="order-container-line-mobile" id="order-header-mobile">
        <div>#{{boxOrder.id}}</div>
        <div>Creado el {{dateFormat(boxOrder.created_at)}}</div>
    </div>
    <div class="order-container-line-mobile" id="order-second-line-mobile">
        <div *ngIf="subscription_id" class="blue">Suscripción #{{subscription_id}}</div>
        <div *ngIf="!subscription_id" class="blue">Pedido</div>
        <div class="blue" *ngIf="boxOrder.invoice">Pagado</div>
        <div class="red" *ngIf="!boxOrder.invoice">No pagado</div>
    </div>
    <div class="order-container-line-mobile" id="resume-mobile">
        <div>{{boxOrder.total}} €</div>
        <div *ngIf="boxOrder.invoice">Pagado el {{dateFormat(boxOrder.invoice.created_at)}}</div>
    </div>
</div>