{% extends 'base.html' %}
{% load static %}

{% block title %}Upload{% endblock %}

{% block content %}
<div class="row">
    <div class="col-xs-12 col-sm-10 col-md-6 col-sm-offset-1 col-md-offset-3">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Upload</h3>
            </div>
            <div class="panel-body ">
                <div class="forms-container">
                    <div class="panel panel-default uploadform">
                        <div class="panel-body">
                            <form action="/api/upload" method="post" enctype="multipart/form-data">
                                {% csrf_token %}
                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                    <span class="btn btn-primary btn-file"><span class="fileupload-new">Select files</span>
                                        <span class="fileupload-exists">Change</span>
                                        <input class="filefield" type="file" name="file[]" accept="audio/*" multiple />
                                    </span>
                                    <br>
                                </div>
                                <div class="song-container panel panel-default">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Song</h3>
                                    </div>
                                    <div class="panel-body ">
                                        <div class="form-group">
                                            <input type="text" name="artist[]" class="form-control input-sm artist" placeholder="Artist">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" name="title[]" class="form-control input-sm title" placeholder="Title">
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <span class="result-message"></span>
                <div class="progress">
                    <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" style="width: 0%;">
                    </div>
                </div>
                <button id="upload" class="btn btn-primary btn-block">Upload</button>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="{% static 'css/upload.css' %}" />
<script type="text/javascript" src="{% static 'js/upload.js' %}"></script>
<script type="text/javascript" src="{% static 'js/id3.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.form.min.js' %}"></script>
{% endblock %}