<div class="widget-box">
    <div class="widget-header widget-header-blue widget-header-flat">
        <h4 class="widget-title lighter">New Mix Wizard</h4>

        <div class="widget-toolbar">
            <label>
                <small class="green">
                    <b>Keep it clean</b>
                </small>
            </label>
        </div>
    </div>
    <div class="widget-body">
        <div class="widget-main">
            <div id="mix-upload-wizard" data-target="#step-container">
                <ul class="wizard-steps">
                    <li data-target="#step1" class="active" id="header-step1">
                        <span class="step">1</span>
                        <span class="title">Mix</span>
                    </li>
                    <li data-target="#step2" id="header-step2">
                        <span class="step">2</span>
                        <span class="title">Details</span>
                    </li>
                    <li data-target="#step3" id="header-step3">
                        <span class="step">3</span>
                        <span class="title">Flair</span>
                    </li>
                </ul>

            </div>

            <hr>
            <div class="progress">
                <div class="progress-bar" id="mix-upload-progress"></div>
            </div>
            <div class="step-content pos-rel" id="step-container">
                <div class="step-pane active" id="step1">
                    <form action="_upload/" id="mix-upload-form" class="dropzone">
                        <input type="hidden" name="upload-hash">
                        <div class="fallback">
                            Your browser is too old for uploading file <br/>
                            Please come back with Chrome or Firefox
                        </div>
                    </form>
                </div>

                <div class="step-pane" id="step2">
                    <form id="mix-details-form" class="form-horizontal">
                        <input type="hidden" class="upload-hash">
                        <input type="hidden" id="upload-extension">

                        <div class="form-group">
                            <label class="control-label text-primary"
                                   for="title">Title</label>
                            <input class="form-control" type="text"
                                   id="title" name="title"
                                   placeholder="Brief title for your mix"
                                   value="<%= title %>">
                        </div>
                        <div class="form-group">
                            <label class="control-label text-primary"
                                   for="description">Description</label>
                            <textarea class="autosize-transition form-control"
                                      rows="12"
                                      id="description" name="description"
                                      placeholder="Tracklist or something.."><%= description %></textarea>
                        </div>
                    </form>
                </div>
                <div class="step-pane" id="step3">
                    <form id="mix-flair-form" class="form-horizontal">
                        <div class="row-fluid">
                            <div class="control-group">
                                <label for="genres" class="control-label text-primary">Genres</label>

                                <div class="controls">
                                    <input value="0000" id="genres" style="width:98%"/>
                                </div>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <h5 class="text-primary">Mix Image (click to change)</h5>

                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-preview thumbnail" data-trigger="fileinput"
                                     style="width: 200px; height: 150px;">
                                    <img id="mix-image"
                                         class="editable img-responsive image-user-profile"
                                         alt="Mix Image"
                                         src="<%= mix_image %>">
                                </div>
                                <div>
                                    <span class="btn btn-default btn-file">
                                        <span class="fileinput-new">Select image</span>
                                        <span class="fileinput-exists">Change</span>
                                        <input type="file" name="..." id="mix-image-fileinput">
                                    </span>
                                    <a href="#" class="btn btn-default fileinput-exists"
                                       data-dismiss="fileinput">Remove</a>
                                </div>
                            </div>
                        </div>

                        <div class="row-fluid">
                            <div class="mix_display_controls">
                                <label class="inline">
                                    <small class="muted">Downloads:</small>
                                    <input class="ace ace-switch ace-switch-7"
                                           type="checkbox"
                                           id="download_allowed"
                                           name="download_allowed"
                                            <% print(download_allowed ? 'checked="checked"' : '') %>
                                            >
                                    <span class="lbl"></span>
                                </label>
                                <% if (canHomepage()) { %>
                                <label class="inline">
                                    <small class="muted">Homepage:</small>
                                    <input class="ace ace-switch ace-switch-7"
                                           type="checkbox"
                                           id="is_featured"
                                           name="is_featured"
                                            <% print(is_featured ? 'checked="checked"' : '') %>
                                            >
                                    <span class="lbl"></span>
                                </label>
                                <% } %>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <hr>
            <div class="wizard-actions">
                <button class="btn btn-prev" disabled="disabled">
                    <i class="ace-icon fa fa-arrow-left"></i>
                    Prev
                </button>
                <button class="btn btn-success btn-next" data-last="Finish">
                    Next
                    <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
                </button>
            </div>
        </div>
    </div>
</div>