{% if user.is_authenticated %}
    <div class="page-content" id="mix-wizard">
        <div class="page-header">
            <h1>
                New Mix
                <small>
                    <i class="fa fa-double-angle-right"></i>
                    You know what to do - keep it clean!
                </small>
            </h1>
        </div>
        <div class="progress">
            <div class="progress-bar" id="mix-upload-progress"></div>
        </div>
        <div class="widget-box" id="mix-upload-wizard">
            <div class="widget-header widget-header-blue widget-header-flat">
                <h4 class="lighter">New Item Wizard</h4>
                <!--
                <div class="widget-toolbar">
                    <label>
                        <small class="green">
                            <b>Validation</b>
                        </small>
                        <input id="skip-validation" type="checkbox" class="ace ace-switch ace-switch-4"/>
                        <span class="lbl"></span>
                    </label>
                </div>
                -->
            </div>
            <div class="widget-body">
                <div class="widget-main">
                    <div id="fuelux-wizard" class="row-fluid" 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>

                    <div class="alert alert-danger row-fluid" id="mix-upload-error" style="display:none;">
                        <strong>
                            <i class="fa fa-remove"></i>
                            Please add some audio!
                        </strong>
                        Drag & drop an mp3 above or click the image to browse
                        <br>
                    </div>

                    <div class="step-content position-relative" id="step-container">
                        <div class="step-pane active" id="step1">
                            {% include "views/_MixEditView_Step_Mix.html" %}
                        </div>
                        <div class="step-pane" id="step2">
                            {% include "views/_MixEditView_Step_Details.html" %}
                        </div>
                        <div class="step-pane" id="step3">
                            {% include "views/_MixEditView_Step_Flair.html" %}

                        </div>
                    </div>
                    <div class="row-fluid wizard-actions">
                        <button class="btn btn-prev">
                            <i class="fa fa-arrow-left"></i>
                            Prev
                        </button>
                        <button class="btn btn-success btn-next" data-last="Finish ">
                            Next
                            <i class="fa fa-arrow-right fa fa-on-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% else %}
    Please <a data-bypass="true" id="login">login</a> first
{% endif %}