<section class="page-section" id="contact" style="margin-top: 15px; margin-bottom: 2px;">
    <h2 class="titulo">RESUMO PEDIDOS</h2>

    <div class="container2">

        <div class="row ">
            <div class="col-lg-8 col-xl-7">
                <div *ngIf="pedidos && pedidos.length == 0" class="alert alert-primary" role="alert">
                    Não existem pedidos cadastrados
                </div>
                <table *ngIf="pedidos && pedidos.length > 0" class="table">
                    <thead>
                        <tr>
                            <th scope="col">ID do pedido</th>
                            <th scope="col">Nome do cliente</th>
                            <th scope="col">Valor total</th>
                            <th scope="col">Data</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let pedido of pedidos.slice(0, 5); let i = index">
                            <th scope="row">{{pedido.id}}</th>
                            <td>{{pedido.cliente.nome}}</td>
                            <td>{{number(pedido.valor_total) | currency}}</td>
                            <td>{{pedido.data | date: 'dd/MM/yyyy'}}</td>
                        </tr>
                        <tr>
                            <th scope="row">Soma total</th>
                            <td></td>
                            <td>{{somaTotal() | currency}}</td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                    <label class="naDireita" routerLink="/lista-completa">Mostrar tudo</label>
                </table>
            </div>
        </div>
    </div>
</section>