<h2>Album <small>Edit</small></h2>
<hr />

<form class="form-horizontal" [ngFormModel]="form" (ngSubmit)="onSubmitModelBased()">
    <form-field label="Artist" [validate]="form.controls.ArtistId">
        <select class="form-control" ngControl="ArtistId">
            <option value="0">-- choose Artist --</option>
            <option *ngFor="#artist of artists" [value]="artist.ArtistId">{{ artist.Name }}</option>
        </select>
    </form-field>

    <form-field label="Genre" [validate]="form.controls.GenreId">
        <select class="form-control" ngControl="GenreId">
            <option value="0">-- choose Genre --</option>
            <option *ngFor="#genre of genres" [value]="genre.GenreId">{{ genre.Name }}</option>
        </select>
    </form-field>

    <form-field label="Title" [validate]="form.controls.Title">
        <input class="form-control" type="text" ngControl="Title">
    </form-field>

    <form-field label="Price" [validate]="form.controls.Price">
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input class="form-control" type="text" ngControl="Price">
        </div>
    </form-field>

    <form-field label="Album Art URL" [validate]="form.controls.AlbumArtUrl">
        <input class="form-control" ngControl="AlbumArtUrl">
    </form-field>

    <form-field label="Album Art">
        <img src="{{ form.controls.AlbumArtUrl.value }}">
    </form-field>

    <form-field>
        <div *ngIf="changesSaved" class="alert alert-success"><b>Done!</b> Your changes were saved.</div>
        <div *ngFor="#errorMessage of formErrors" class="alert alert-danger">{{ errorMessage }}</div>
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="button" class="btn btn-danger" (click)="deleteprompt.show(originalAlbum)">Delete</button>
        <a class="btn btn-default" [routerLink]="['/Admin/Albums']">Back to List</a>
    </form-field>
</form>

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