<h2>Album <small>Details</small></h2>
<hr />

<form class="form-horizontal" role="form" *ngIf="albumData">
    <div class="form-group">
        <label class="col-md-2 control-label">Artist</label>
        <div class="col-md-10">
            <p class="form-control-static">{{ albumData.Artist.Name }}</p>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">Genre</label>
        <div class="col-md-10">
            <p class="form-control-static">{{ albumData.Genre.Name }}</p>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">Title</label>
        <div class="col-md-10">
            <p class="form-control-static">{{ albumData.Title }}</p>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">Price</label>
        <div class="col-md-10">
            <p class="form-control-static">{{ albumData.Price | currency:'USD':true }}</p>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">Album Art URL</label>
        <div class="col-md-10">
            <p class="form-control-static">{{ albumData.AlbumArtUrl }}</p>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">Album Art</label>
        <div class="col-md-10">
            <img alt="{{ albumData.Title }}" src="{{ albumData.AlbumArtUrl }}">
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <a class="btn btn-primary" [routerLink]="['/Admin/AlbumEdit', { albumId: albumData.AlbumId }]">Edit</a>
            <button type="button" class="btn btn-danger" (click)="deleteprompt.show(albumData)">Delete</button>
            <a class="btn btn-default" [routerLink]="['/Admin/Albums']">Back to List</a>
        </div>
    </div>
</form>

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