<div class="container text-center p-5">
    <div class="spinner-border" role="status" *ngIf="isLoading">
        <span class="sr-only">Loading...</span>
    </div>

    <div *ngIf="errorWhileLoading">
        <h2>Error :(</h2>
        <button (click)="loadExtract()">Try again</button>
    </div>

    <div *ngIf="!isLoading && !errorWhileLoading">
        <button (click)="previousPage()" [disabled]="page === 1" class="btn btn-primary">Previous page</button>
        <span>Current page: {{ page }}</span>
        <button (click)="nextPage()" [disabled]="page === 3" class="btn btn-primary">Next page</button>

        <table class="table table-hover">
            <tr>
                <th>ID</th>
                <th>Date</th>
                <th>Description</th>
                <th>Value</th>
                <th>Category</th>
            </tr>

            <tr *ngFor="let transaction of transactions">
                <td>{{ transaction.id }}</td>
                <td>{{ transaction.date | date }}</td>
                <td>{{ transaction.description }}</td>
                <td>{{ transaction.value | currency: "BRL" }}</td>
                <td>{{ transaction.category }}</td>
            </tr>
        </table>
    </div>
</div>