Pony.fm/public/templates/account/track.html

<form novalidate ng-submit="updateTrack(edit)">
	<ul class="toolbar">
		<li>
			<button type="submit" class="btn" ng-class="{disabled: (data.selectedTrack.is_published && !isDirty) || isSaving, 'btn-primary': !data.selectedTrack.is_published || isDirty}">
				<span ng-show="edit.is_published">
					Save Changes
				</span>
				<span ng-hide="edit.is_published">
					Publish Track
				</span>
				<i ng-show="isSaving" class="icon-cog icon-spin icon-large"></i>
			</button>
		</li>
		<li class="delete"><a ng-class="{disabled: isSaving}" class="btn btn-danger" href="#" ng-click="deleteTrack(data.selectedTrack)" pfm-eat-click>Delete Track</a></li>
	</ul>
	<div class="stretch-to-bottom">
		<div class="form-row" ng-class="{'has-error': errors.title != null}">
			<label for="title" class="strong">Title:</label>
			<input ng-disabled="isSaving" ng-change="touchModel()" placeholder="Track Title" type="text" id="title" ng-model="edit.title" />
			<div class="error">{{errors.title}}</div>
		</div>
		<div class="row-fluid">
			<div class="span6 form-row" ng-class="{'has-error': errors.description != null}">
				<label for="description" class="strong">Description:</label>
				<textarea ng-disabled="isSaving" ng-change="touchModel()" placeholder="Description (optional)" id="description" ng-model="edit.description"></textarea>
				<div class="error">{{errors.description}}</div>
			</div>
			<div class="span6 form-row" ng-class="{'has-error': errors.lyrics != null}">
				<label for="is_vocal" class="strong"><input ng-disabled="isSaving" ng-change="touchModel(); updateIsVocal()" id="is_vocal" type="checkbox" ng-model="edit.is_vocal" /> Is Vocal</label>
				<textarea ng-disabled="isSaving" ng-change="touchModel()" ng-show="edit.is_vocal" ng-animate="'fade'" placeholder="Lyrics (required)" id="lyrics" ng-model="edit.lyrics"></textarea>
				<div class="error">{{errors.lyrics}}</div>
				<div class="error">{{errors.lyrics}}</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="form-row span6" ng-class="{'has-error': errors.genre_id != null}">
				<label for="genre" class="strong">Genre:</label>
				<select ng-disabled="isSaving" id="genre" ng-change="touchModel()" ng-model="edit.genre_id" ng-options="genre.id as genre.name for genre in taxonomies.genres">
					<option value="">Please select a genre...</option>
				</select>
				<div class="error">{{errors.genre_id}}</div>
			</div>
			<div class="form-row span6" ng-class="{'has-error': errors.track_type_id != null}">
				<label for="track_type" class="strong">This track is...</label>
				<select ng-disabled="isSaving" id="track_type" ng-change="touchModel()" ng-model="edit.track_type_id" ng-options="type.id as type.editor_title for type in taxonomies.trackTypes">
					<option value="">Please select a type...</option>
				</select>
				<div class="error">{{errors.track_type_id}}</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="form-row album span6" ng-class="{'has-error': errors.show_song_ids != null}">
				<a pfm-popup="album-selector" href="#" class="btn btn-small">
					Album:
					<strong ng-show="selectedAlbum">{{selectedAlbum.title}}</strong>
					<strong ng-hide="selectedAlbum">None</strong>
				</a>
				<div id="album-selector" class="pfm-popup">
					<ul>
						<li ng-class="{selected: selectedAlbum == null}">
							<a pfm-eat-click href="#" ng-click="selectAlbum(null);">None</a>
						</li>
						<li ng-repeat="album in albums" ng-class="{selected: selectedAlbum.id == album.id}">
							<a pfm-eat-click href="#" ng-click="selectAlbum(album);">{{album.title}}</a>
						</li>
					</ul>
				</div>
				<div class="error">{{errors.album_id}}</div>
			</div>
			<div class="form-row show-songs span6" ng-show="edit.track_type_id == 2" ng-class="{'has-error': errors.show_song_ids != null}">
				<a pfm-popup="song-selector" href="#" class="btn btn-small">Show Songs: <strong>{{selectedSongsTitle}}</strong></a>
				<div id="song-selector" class="pfm-popup">
					<ul>
						<li ng-repeat="song in taxonomies.showSongs" ng-class="{selected: selectedSongs[song.id]}">
							<a pfm-eat-click href="#" ng-click="toggleSong(song); $event.stopPropagation();">{{song.title}}</a>
						</li>
					</ul>
				</div>
				<div class="error">{{errors.show_song_ids}}</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="form-row span6" ng-class="{'has-error': errors.cover != null}">
				<label class="strong">Track Cover: </label>
				<pfm-image-upload set-image="setCover" image="edit.cover" />
			</div>
			<div class="form-row span6" ng-class="{'has-error': errors.released_at != null}">
				<label for="released_at" class="strong">Release Date:</label>
				<input ng-disabled="isSaving" type="text" id="released_at" ui-date ng-model="edit.released_at" ng-change="touchModel()" ui-date-format="yy-mm-dd" />
				<div class="error">{{errors.released_at}}</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6 form-row">
				<label for="is_explicit"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_explicit" type="checkbox" ng-model="edit.is_explicit" /> Contains Explicit Content</label>
			</div>
			<div class="span6 form-row">
				<label for="is_downloadable"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_downloadable" type="checkbox" ng-model="edit.is_downloadable" /> Is Downloadable</label>
			</div>
		</div>
		<div class="form-row">
			<label class="strong">Choose a License:</label>
			<ul class="license-grid">
				<li ng-repeat="license in taxonomies.licenses" ng-class="{selected: edit.license_id == license.id}">
					<div ng-click="edit.license_id = license.id; touchModel()">
						<strong>{{license.title}}</strong>
						<p>{{license.description}}</p>
						<a href="#" pfm-eat-click class="btn" ng-class="{'btn-primary': edit.license_id == license.id, 'disabled': isSaving}">
							<span ng-hide="edit.license_id == license.id">Select</span>
							<span ng-show="edit.license_id == license.id">Selected</span>
						</a>
					</div>
				</li>
			</ul>
		</div>
	</div>
</form>