dss/templates/views/MixEditView.html

<div class="clearfix control-group" id="div-upload-mix">
    <div class="controls">
        <form id="fileupload" action="//_upload/" method="POST" enctype="multipart/form-data">
            <input type="hidden" id="upload-hash" name="upload-hash">
            <div class="fileupload-buttonbar">
                <div class="span7">
                <span class="btn btn-success fileinput-button">
                    <i class="icon-plus icon-white"></i>
                    <span>Add files...</span>
                    <input type="file" name="files[]" accept="audio/mp3">
                </span>
                    <span class="fileupload-loading"></span>
                </div>
                <div class="span5 fileupload-progress fade">
                    <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0"
                         aria-valuemax="100">
                        <div class="bar" style="width:0%;"></div>
                    </div>
                    <div class="progress-extended">&nbsp;</div>
                </div>
            </div>
            <table role="presentation" class="table table-striped">
                <tbody class="files"></tbody>
            </table>
        </form>
        {% verbatim %}
<script id="template-upload" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            {% if (file.error) { %}
            <div><span class="label label-important">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <p class="size">{%=o.formatFileSize(file.size)%}</p>
            {% if (!o.files.error) { %}
            <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0"
                 aria-valuemax="100" aria-valuenow="0">
                <div class="bar" style="width:0%;"></div>
            </div>
            {% } %}
        </td>
        <td>
            {% if (!o.files.error && !i && !o.options.autoUpload) { %}
            <button class="btn btn-primary start">
                <i class="icon-upload icon-white"></i>
                <span>Start</span>
            </button>
            {% } %}
            {% if (!i) { %}
            <button class="btn btn-warning cancel">
                <i class="icon-ban-circle icon-white"></i>
                <span>Cancel</span>
            </button>
            {% } %}
        </td>
    </tr>
    {% } %}
</script>
<script id="template-download" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        <td>
            <span class="preview">
                {% if (file.thumbnailUrl) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img
                            src="{%=file.thumbnailUrl%}"></a>
                {% } %}
            </span>
        </td>
        <td>
            <p class="name">
                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
            </p>
            {% if (file.error) { %}
            <div><span class="label label-important">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td>
        <td>
            <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"
            {% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
            <i class="icon-trash icon-white"></i>
            <span>Delete</span>
            </button>
            <input type="checkbox" name="delete" value="1" class="toggle">
        </td>
    </tr>
    {% } %}
</script>
{% endverbatim %}
    </div>
</div>
<div class="well" id="mix-details">
    <form class="form-horizontal">
        {% csrf_token %}
        <input type="hidden" class="upload-hash" id="upload-hash-details">
        <input type="hidden" id="upload-extension">
        <legend>Mix details</legend>
        <div class="row">
            <div class="control-group" id="group-title">
                <label class="control-label">Title</label>

                <div class="controls">
                    <input style="width: 98%" id="title" type="text" name="title" value="<%=title%>"
                           placeholder="Brief title for your mix…">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="span9">
                <div class="control-group">
                    <label class="control-label">Description</label>

                    <div class="controls">
                        <textarea style="width: 98%" id="description" name="description" rows="12"
                                  placeholder="Tracklist would be nice…"><%=description%></textarea>
                    </div>
                </div>
            </div>
            <div class="span3">
                <div id="mix-imageupload" class="fileupload fileupload-new" data-provides="fileupload">
                    <div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;">
                    </div>
                    <div>
                        <span class="btn btn-file">
                            <span class="fileupload-new">Select image</span>
                            <span class="fileupload-exists">Change</span>
                            <input type="file" />
                        </span>
                        <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
                    </div>
                </div>
                {% if user.is_staff %}
                    <div>
                        <label class="checkbox">
                            <input type="checkbox" id="is_featured" name="is_featured" <% print(is_featured ? 'checked="checked"' : '') %>>Is featured?</label>
                    </div>
                {% endif %}
            </div>
        </div>
        <div class="row">
            <div class="control-group">
                <label class="control-label">Genres</label>

                <div class="controls">
                    <input type="hidden" id="genres" style="width:98%"/>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-actions">
                <button id="save-changes" class="btn">Submit</button>
            </div>
        </div>
    </form>
</div>