<div ng-hide="$root.currentUser" class="row">
    <button type="button" ng-click="login()" class="btn btn-sm btn-danger">Login</button>
</div>
<div ng-show="$root.currentUser" class="row">

    <div ng-show="uploadState==uploadStates.AUDIO_SENDING" class="progress progress-striped" id="progress-wrapper">
        <div role="progressbar" aria-valuenow="uploadProgress" aria-valuemin="0" aria-valuemax="100"
             ng-style="uploadProgressStyle" class="progress-bar progress-bar-success">
            {{uploadProgress}}%
        </div>
    </div>

    <div ng-show="uploadState <= uploadStates.AUDIO_SENT" class="text-center row" id="fileupload-wrapper">
        <div class="block full">
            <form id="dss-file-upload" ng-show="uploadState==0" class="dropzone">
            </form>
        </div>
    </div>
    <div ng-show="uploadState==uploadStates.AUDIO_SENT" class="text-center row" id="status-wrapper">
        <div class="panel">
            <div class="panel-body">
                <h2 class="description">
                    <span id="waveform-status-info" ng-bind-html="waveformHeader | unsafe"></span><br/>
                    <span ng-bind-html="waveformFooter | unsafe"></span>
                </h2>
            </div>
        </div>
    </div>

    <div ng-show="uploadState != uploadStates.VIRGIN && (!detailsEntered || uploadState == uploadStates.EDIT_MODE)"
         class="row" id="details-wrapper">
        <div class="block text-center">
            <div class="col-md-2"></div>
            <div class="col-md-8">
                <div class="row">
                    <form name="uploadForm" ng-submit="saveMix()" class="form-horizontal">
                        <input type="hidden" ng-model="mix.uid"/>

                        <div id="title-area" show-errors="{ trigger: 'keypress' }" class="form-group"
                             ng-class="uploadForm.title.$invalid ? 'error' : ''">
                            <label for="title" class="col-sm-3 control-label">Title</label>

                            <div class="col-sm-6">
                                <input type="text" id="title" name="title" required="" ng-minlength="5"
                                       ng-maxlength="250"
                                       ng-model="mix.title" class="form-control input-sm"/>
                                <p for="title"
                                   ng-show="uploadForm.title.$invalid &amp;&amp; uploadForm.title.$dirty"
                                   class="help-block">Title must be between 5 and 250 characters</p>
                                <p for="title"
                                   ng-show="(uploadForm.title.$error.required) &amp;&amp; uploadForm.$dirty &amp;&amp;!(uploadForm.title.$invalid &amp;&amp; uploadForm.title.$dirty)"
                                   class="help-block">Title is a must</p>
                            </div>
                        </div>
                        <div id="description-area" show-errors="" class="form-group">
                            <label for="description" class="col-sm-3 control-label">Description</label>

                            <div class="col-sm-6">
                        <textarea type="text" id="description" name="description" rows="5" required="" ng-minlength="10"
                                  ng-maxlength="2000" ng-model="mix.description" class="form-control"></textarea>

                                <p for="description"
                                   ng-show="uploadForm.description.$invalid &amp;&amp; uploadForm.description.$dirty"
                                   class="help-block">Description must be between 10 and 2000 characters</p>

                                <p for="description"
                                   ng-show="(uploadForm.description.$error.required) &amp;&amp; uploadForm.$dirty &amp;&amp;!(uploadForm.description.$invalid &amp;&amp; uploadForm.description.$dirty)"
                                   class="help-block">Description is a must</p>
                            </div>
                        </div>
                        <div id="image-area" class="form-group">
                            <label class="col-sm-3 control-label">Image</label>
                            <div class="col-sm-3">
                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                    <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                                        <img ng-src="{{mix.mix_image ? mix.mix_image : &quot;assets/images/image-upload-placeholder.png&quot;}}"
                                             alt=""/>
                                    </div>
                                    <div class="fileupload-preview fileupload-exists thumbnail"
                                         style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
                                    <div>
                                       <span class="btn btn-white btn-file">
                                           <span class="fileupload-new"><i
                                                   class="fa fa-paper-clip"></i> Select image</span>
                                           <span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span>
                                           <input type="file" id="mix-image-fileinput" class="default"/>
                                       </span>
                                        <a href="#" class="btn btn-danger fileupload-exists"
                                           data-dismiss="fileupload"><i class="fa fa-trash"></i> Remove</a>
                                    </div>
                                </div>
                                <!--
                                <div data-provides="fileinput" class="fileinput fileinput-new override-text-align">
                                    <div data-trigger="fileinput" style="width: 200px; height: 150px;"
                                         class="fileinput-preview thumbnail override-text-align">
                                        <img id="mix-image"
                                             ng-src="{{mix.mix_image ? mix.mix_image : &quot;assets/images/image-upload-placeholder.png&quot;}}"
                                             class="editable img-responsive image-user-profile"/>
                                    </div>
                                    <div>
                                <span class="btn btn-default btn-file">
                                    <span class="fileinput-new">Select image</span>
                                    <span class="fileinput-exists">Change</span>
                                    <input id="mix-image-fileinput" type="file" name="..."/>
                                </span>
                                        <a href="#" data-dismiss="fileinput" class="btn btn-default fileinput-exists">
                                            Remove
                                        </a>
                                    </div>
                                </div>
                                -->
                            </div>
                            <div class="col-sm-3">
                                <section class="panel">
                                    <header class="panel-heading">Mix options</header>
                                    <div class="panel-body">
                                        <div class="checkboxes">
                                            <div class="row">
                                                <pretty-checkbox ng-model="mix.is_private" label="'Private'"/>
                                            </div>
                                            <div class="row">
                                                <pretty-checkbox ng-model="mix.is_downloadable" label="'Downloadable'"/>
                                            </div>
                                            <div class="row">
                                                <pretty-checkbox ng-model="mix.is_featured" label="'Homepage'"/>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                        <div id="genres-area" class="form-group">
                            <label class="col-sm-3 control-label">Genres</label>
                            <div class="col-sm-6">
                                <ui-select multiple ng-model="mix.genres" theme="bootstrap" ng-disabled="disabled">
                                    <ui-select-match placeholder="Start typing...">{{$item.description}}
                                    </ui-select-match>
                                    <ui-select-choices repeat="genre in genreSearchResults"
                                                       refresh="refreshGenres($select.search)"
                                                       refresh-delay="0">
                                        <div ng-bind-html="genre.description | highlight: $select.search"></div>
                                    </ui-select-choices>
                                </ui-select>
                            </div>
                        </div>
                        <div id="submit-area" class="form-group form-actions">
                            <div class="col-sm-12">
                                <button formnovalidate="" type="submit" class="btn btn-lg btn-primary"
                                        ng-disabled="sending" style="width: 100%;">
                                    <i class="fa fa-save"></i> Save
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-2"></div>
        </div>
    </div>
</div>
