<div class="bg-primary-gradient vh-100 disable-user-select">
  <div class="d-flex justify-content-center">
    <div class="row z-index-0 fixed-top m-0 w-100">
      <div class="col-12 p-3">
        <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
      </div>
    </div>
    <div class="row m-5 text-white text-center">

      <div class="col-12 p-0">
        <p class="h1 m-0">Pedidos terminados.</p>
        <p class="h2 m-0">Nº de Pedido</p>
      </div>

      <div
        *ngIf="pedidosRecientes.length"
        class="col-12 p-2">
        <div class="border rounded shadow h-big">
          <div class="font-weight-bold m-0 h-100">
            {{rellenar(pedidosRecientes[0].id.toString().slice(pedidosRecientes[0].id.toString().length - 3), 3)}}
          </div>
        </div>
      </div>

      <div
        *ngFor="let pedido of pedidosRecientes; let i = index"
        [hidden]="i == 0 || i > 8"
        class="col-3 p-2">
        <p class="font-weight-bold display-1 m-0 py-1 border rounded shadow">
          {{rellenar(pedido.id.toString().slice(pedido.id.toString().length - 2), 3)}}
        </p>
      </div>

    </div>
  </div>
</div>