<h2>Albums</h2>

<album-delete-prompt #deleteprompt></album-delete-prompt>

<table class="table">
    <thead>
        <tr>
            <th><a>Genre</a></th>
            <th><a>Artist</a></th>
            <th><a (click)="sortBy('Title')">Title</a></th>
            <th><a (click)="sortBy('Price')">Price</a></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="#row of rows">
            <td>{{ row.Genre.Name }}</td>
            <td>{{ row.Artist.Name }}</td>
            <td>{{ row.Title }}</td>
            <td>{{ row.Price | currency:'USD':true }}</td>
            <td>
                <div class="btn-group btn-group-xs">
                    <a class="btn btn-default" [routerLink]="['/Admin/AlbumDetails', { albumId: row.AlbumId }]">Details</a>
                    <a class="btn btn-default" [routerLink]="['/Admin/AlbumEdit', { albumId: row.AlbumId }]">Edit</a>
                    <a class="btn btn-default" (click)="deleteprompt.show(row)">Delete</a>
                </div>
            </td>
        </tr>
    </tbody>
</table>

<div class="btn-group">
    <button class="btn btn-default" [disabled]="!canGoBack" (click)="goToPage(1)">First</button>
    <button class="btn btn-default" [disabled]="!canGoBack" (click)="goToPage(pageIndex - 1)">Previous</button>
    <button class="btn" *ngFor="#page of pageLinks"
                        [ngClass]="{ 'btn-info': page.isCurrent, 'btn-default': !page.isCurrent }"
                        (click)="goToPage(page.index)">
        {{ page.text }}
    </button>
    <button class="btn btn-default" [disabled]="!canGoForward" (click)="goToPage(pageIndex + 1)">Next</button>
    <button class="btn btn-default" [disabled]="!canGoForward" (click)="goToLast()">Last</button>
</div>

<p>{{ totalCount }} total albums</p>
