<div class="container main-container">

    <h1>Filmes</h1>

    <table class="table">
        <thead class="thead-dark">
            <tr>
                <th scope="col"></th>
                <th scope="col">Nome</th>
                <th scope="col">Data Lançamento</th>
                <th scope="col">Valor</th>
                <th scope="col">Tamanho Arquivo</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor='let filme of mapped'>
                <img [src]="filme.imagem" style="padding-bottom: 5px;">
                <td>{{ filme.nome | titlecase }}</td>
                <td>{{ filme.dataLancamento | date:"dd/MM/yyyy" }}</td>
                <td>{{ filme.valor | currency:'BRL':'symbol':'1.2-2':'pt'}}</td>
                <td>{{ filme.tamanho | filesize }}</td>
            </tr>
        </tbody>
    </table>
</div>