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

<form class="track-editor" novalidate ng-submit="updateTrack(track)">
    <div layout="row">
        <md-button class="md-raised md-primary" type="submit" ng-class="{disabled: (track.is_published && !isDirty) || isSaving, 'btn-primary': !track.is_published || isDirty}" flex>
            <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>
        </md-button>

        <div flex="5" hide-xs hide-sm>
          <!-- Spacer //-->
        </div>

        <md-button ng-class="{disabled: isSaving}" class="md-raised md-warn" href="#" ng-click="deleteTrack()" pfm-eat-click flex>Delete Track</md-button>
    </div>

    <div layout-gt-xs="row" ng-class="{'has-error': errors.title != null}">
        <md-input-container class="md-block" flex-gt-xs id="title">
            <label for="title">Title</label>
            <input ng-disabled="isSaving" type="text" id="title" ng-model="track.title" />
        </md-input-container>
    </div>
    <div layout="row" layout-xs="column" ng-class="{'has-error': errors.description != null}">
        <md-input-container class="md-block" flex-gt-sm>
            <label for="description">Description</label>
            <textarea ng-disabled="isSaving" id="description" ng-model="track.description" rows="3"></textarea>
        </md-input-container>

        <div flex="5" hide-xs hide-sm>
          <!-- Spacer //-->
        </div>

        <md-input-container class="md-block" flex-gt-sm>
            <label for="lyrics">Lyrics (requires 'has vocals')</label>
            <textarea ng-disabled="isSaving || !track.is_vocal" id="lyrics" ng-model="track.lyrics" rows="3"></textarea>
        </md-input-container>
    </div>

    <div layout="row" layout-xs="column">
        <md-input-container flex-gt-sm>
            <label>Genre</label>
            <md-select ng-disabled="isSaving" id="genre" ng-model="track.genre_id">
                <md-option ng-repeat="genre in taxonomies.genres" value="{{genre.id}}">{{genre.name}}</md-option>
            </md-select>
        </md-input-container>

        <md-input-container flex-gt-sm>
            <label for="track_type" class="strong">This track is...</label>
            <md-select ng-disabled="isSaving" id="track_type" ng-model="track.track_type_id">
                <md-option ng-repeat="type in taxonomies.trackTypes" value="{{type.id}}">{{type.editor_title}}</md-option>
            </md-select>
        </md-input-container>

        <div flex="5" hide-xs hide-sm>
          <!-- Spacer //-->
        </div>

        <md-datepicker ng-disabled="isSaving" ng-model="track.released_at" md-placeholder="Release date" flex-gt-sm></md-datepicker>
    </div>
    <div layout="row" layout-xs="column">
        <md-input-container flex-gt-sm>
            <label>Album</label>
            <md-select ng-disabled="isSaving" ng-model="selectedAlbum">
                <md-option ng-repeat="album in albums track by album.title" value="{{album.id}}">{{album.title}}</md-option>
            </md-select>
        </md-input-container>

        <md-input-container flex-gt-sm>
            <label>Show songs</label>
            <md-select ng-disabled="isSaving || track.track_type_id != 2" ng-model="selectedSongs">
                <md-option ng-repeat="song in taxonomies.showSongs track by song.title" value="{{song.id}}">{{song.title}}</md-option>
            </md-select>
        </md-input-container>
    </div>
    <div layout="row" layout-xs="column">
        <div flex>
            <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}">

        </div>
    </div>
    <div layout="row" layout-xs="column" class="checkboxes">
        <md-input-container flex-gt-sm>
            <md-checkbox ng-disabled="isSaving" ng-model="track.is_explicit">Contains Explicit Content</md-checkbox>
        </md-input-container>

        <md-input-container flex-gt-sm>
            <md-checkbox ng-disabled="isSaving" ng-model="track.is_downloadable">Allow Downloads</md-checkbox>
        </md-input-container>

        <md-input-container flex-gt-sm>
            <md-checkbox ng-disabled="isSaving" ng-model="track.is_listed">Is Public</md-checkbox>
        </md-input-container>

        <md-input-container flex-gt-sm>
            <md-checkbox ng-disabled="isSaving" id="is_vocal" ng-model="track.is_vocal">Has Vocals</md-checkbox>
        </md-input-container>

    </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>
</form>