<form novalidate ng-submit="saveAlbum()"> <ul class="toolbar"> <li> <button type="submit" class="btn btn-default" ng-class="{disabled: (!isDirty && !isNew) || isSaving, 'btn-primary': isDirty || isNew}"> <span ng-show="isNew">Create Album</span> <span ng-hide="isNew">Save Changes</span> <i ng-show="isSaving" class="fa fa-cog fa-spin fa-lg"></i> </button> </li> <li class="delete" ng-show="!isNew"><a ng-class="{disabled: isSaving}" class="btn btn-danger" href="#" ng-click="deleteAlbum()" pfm-eat-click>Delete Album</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="Album Title" type="text" id="title" ng-model="album.title" /> <div class="error">{{errors.title}}</div> </div> <div class="form-row"> <label for="description" class="strong">Description:</label> <textarea ng-disabled="isSaving" ng-change="touchModel()" placeholder="Description (optional)" id="description" ng-model="album.description"></textarea> <div class="error">{{errors.description}}</div> </div> <div class="form-row" ng-show="isAdmin" 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="album.username" /> <div class="error">{{errors.username}}</div> </div> <div class="form-row" ng-class="{'has-error': errors.cover != null}"> <label class="strong">Album Cover: </label> <pfm-image-upload set-image="setCover" image="album.cover" user-id="album.user_id"></pfm-image-upload> </div> <div class="form-row track-selector"> <a pfm-popup="track-selector,right" pfm-popup-close-on-click href="#" class="btn btn-sm pull-right btn-info">Add Tracks</a> <label class="strong">Album Tracks</label> <div id="track-selector" class="pfm-popup"> <ul> <li ng-repeat="track in data.tracksDb track by track.id" ng-class="{selected: trackIds[track.id]}"> <a pfm-eat-click href="#" ng-click="toggleTrack(track); $event.stopPropagation();">{{::track.title}}</a> </li> </ul> </div> <ul class="album-track-listing" ui-sortable="{handle: '.handle', axis: 'y', forcePlaceholderSizeType: true, update: sortTracks}" ng-model="tracks"> <li ng-repeat="track in tracks track by track.id"> <div> <span class="btn btn-sm pull-left handle"><i class="fa fa-sort"></i></span> <a href="#" class="btn btn-sm pull-right btn-danger" ng-click="toggleTrack(track)" pfm-eat-click><i class="fa fa-remove"></i></a> <span>{{::track.title}}</span> </div> </li> </ul> </div> </div> </form>