<form class="track-editor" novalidate ng-submit="updateTrack(track)"> <ul class="toolbar"> <li> <button type="submit" class="btn btn-default" ng-class="{disabled: (track.is_published && !isDirty) || isSaving, 'btn-primary': !track.is_published || isDirty}"> <span ng-show="track.is_published"> Save Changes </span> <span ng-hide="track.is_published"> Publish Track </span> <i ng-show="isSaving" class="fa fa-cog fa-spin fa-lg"></i> </button> </li> <li class="delete"><a ng-class="{disabled: isSaving}" class="btn btn-danger" href="#" ng-click="deleteTrack()" pfm-eat-click>Delete Track</a></li> </ul> <div class="stretch-to-bottom"> <div class="row"> <div class="col-sm-12 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="track.title" /> <div class="error">{{errors.title}}</div> </div> </div> <div class="row"> <div class="col-sm-6 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="track.description"></textarea> <div class="error">{{errors.description}}</div> </div> <div class="col-sm-6 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="track.is_vocal" /> Is Vocal</label> <textarea ng-disabled="isSaving" ng-change="touchModel()" ng-show="track.is_vocal" ng-animate="'fade'" placeholder="Lyrics (optional)" id="lyrics" ng-model="track.lyrics"></textarea> <div class="error">{{errors.lyrics}}</div> </div> </div> <div class="row"> <div class="form-row col-sm-6" 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="track.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 col-sm-6" 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="track.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"> <div class="form-row album-selector col-sm-6" ng-class="{'has-error': errors.album_id != null}"> <a pfm-popup="album-selector" pfm-popup-close-on-click href="#" class="btn btn-default"> 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 track by album.id" 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-selector col-sm-6" ng-show="track.track_type_id == 2" ng-class="{'has-error': errors.show_song_ids != null}"> <a pfm-popup="song-selector" pfm-popup-close-on-click href="#" class="btn btn-default">Show Songs: <strong>{{selectedSongsTitle}}</strong></a> <div id="song-selector" class="pfm-popup"> <ul> <li ng-repeat="song in taxonomies.showSongs track by song.id" 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"> <div class="form-row col-sm-6" ng-class="{'has-error': errors.cover != null}"> <label class="strong">Track Cover: </label> <pfm-image-upload set-image="setCover" image="track.cover_url" user-id="track.user_id"></pfm-image-upload> </div> <div class="form-row col-sm-6" ng-class="{'has-error': errors.released_at != null}"> <label for="released_at" class="strong">Release Date:</label> <input id="released_at" type="text" ui-date ng-disabled="isSaving" ng-model="track.released_at" ng-change="touchModel()" /> <div class="error">{{errors.released_at}}</div> </div> </div> <div class="row"> <div class="col-md-4 form-row"> <label for="is_explicit"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_explicit" type="checkbox" ng-model="track.is_explicit" /> Contains Explicit Content</label> </div> <div class="col-md-4 form-row"> <label for="is_downloadable"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_downloadable" type="checkbox" ng-model="track.is_downloadable" /> Is Downloadable</label> </div> <div class="col-md-4 form-row"> <label for="is_listed"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_listed" type="checkbox" ng-model="track.is_listed" /> Is Listed</label> </div> </div> <div class="row" ng-show="isAdmin"> <div class="col-sm-6 form-row" ng-class="{'has-error': errors.username != null}"> <label for="title" class="strong">User:</label> <input ng-disabled="isSaving" ng-change="touchModel()" placeholder="Username" type="text" id="username" ng-model="track.username" /> <div class="error">{{errors.username}}</div> </div> </div> <div class="form-row"> <label class="strong">Choose a License:</label> <ul class="license-grid"> <li ng-repeat="license in taxonomies.licenses track by license.id" ng-class="{selected: track.license_id == license.id}"> <div ng-click="track.license_id = license.id; touchModel()"> <strong>{{::license.title}}</strong> <p>{{::license.description}}</p> <a href="#" pfm-eat-click class="btn btn-default" ng-class="{'btn-primary': track.license_id == license.id, 'disabled': isSaving}"> <span ng-hide="track.license_id == license.id">Select</span> <span ng-show="track.license_id == license.id">Selected</span> </a> </div> </li> </ul> </div> </div> </form>