Pony.fm/public/templates/directives/track-editor.html

<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-3 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-3 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-3 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 class="col-md-3 form-row">
                <label for="hwc_submit"><input ng-disabled="isSaving" ng-change="touchModel()" id="hwc_submit" type="checkbox" ng-model="track.hwc_submit" /> Submit to <a href="https://mlpforums.com/topic/159868-ponyfms-hearths-warming-contest/">Hearth's Warming Contest</a></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 class="col-sm-6 form-row">
                <label for="title" class="strong">Upload new version</label>
                <input type="file" name="file" onchange="angular.element(this).scope().fileChanged(this)" ng-model="file" />
            </div>

            <span ng-repeat="upload in data.queue track by $index" ng-class="{'uploading': upload.isUploading, 'has-error': upload.error != null, 'is-processing': upload.isProcessing || (upload.progress >= 100 && upload.error == null)}" ng-show="!upload.success">
                <strong ng-show="upload.isUploading && upload.error == null && upload.progress < 100">Uploading&hellip;</strong>
                <strong ng-show="upload.isProcessing || (upload.isUploading && upload.progress >= 100)">Processing&hellip;</strong>
                <strong ng-show="upload.error != null">Error</strong>
                {{::upload.name}} -
                <strong ng-show="upload.error != null">{{upload.error}}</strong>
            </span>
        </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>