{% extends 'base.html' %}

{% block title %} | Extension: Sapelli{% endblock %}

{% block main %}
<div class="page-header">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <h1 class="smaller"><a href="{% url 'geokey_sapelli:index' %}">Sapelli</a></h1>
            </div>
        </div>
    </div>
</div>

<div class="container">
    {% include 'snippets/sapelli_messages.html' %}

    <div class="row">
        {% include 'snippets/sapelli_menu.html' %}

        <div class="col-sm-8">
            <h3 class="header">Upload new Sapelli project</h3>

            <form role="form" method="POST" action="{% url 'geokey_sapelli:project_upload' %}" enctype="multipart/form-data" novalidate>
                {% csrf_token %}
                <div class="form-group">
                    <label for="sap_file" class="control-label">Sapelli Project file:</label>
                    <input type="file" name="sap_file" id="sap_file" accept=".sap,.sapelli,.excites,.zip" required/>
                    <p class="help-block">Typically the file has extension .sap, .sapelli, .excites, or .zip.</p>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Upload</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block libraries %}
<link rel="stylesheet" href="/static/lib/bootstrap-fileinput/css/bootstrap-fileinput.min.css">
<script src="/static/lib/bootstrap-fileinput/js/bootstrap-fileinput.min.js"></script>

<script src="/static/js/admin.ui.fileinput.js"></script>
<script src="/static/js/admin.ui.forms.validate.js"></script>

<script>
// Initialise file upload
$('input:file').each(function() {
    Ui.FileInput.init($(this), {
        showUpload: false,
        showRemove: false,
        showPreview: false
    });
});
</script>
{% endblock %}