{% extends 'base.html.twig' %}

{% block page_header_title %}Upload Files{% endblock %}
{% block page_header_subtitle %}{{ pavilion.name }}{% endblock %}

{% block page_styles %}
    <link href="{{ asset(plugin_basepath~'dropzone/dist/min/dropzone.min.css') }}" rel="stylesheet"/>
    {{ parent() }}
{% endblock %}

{% block page_js %}
    <script src="{{ asset(plugin_basepath~'dropzone/dist/min/dropzone.min.js') }}"></script>
    {{ parent() }}
    <script src="{{ asset('/js/upload.js') }}"></script>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-12">
            <div class="panel panel-inverse">
{#                {{ form_rest(form) }}#}
                <div class="panel-body">
                    <div id="dropzone">
                        <form action="{{ path('profile_upload', {'id':pavilion.id}) }}" class="dropzone needsclick" id="upload" enctype="multipart/form-data">
                            <div class="dz-message needsclick">
                                <span class="fad fa-cloud-upload fa-3x waiting"></span>
                                <span class="fad fa-check-circle fa-3x ready"></span>
                                <br/>
                                Drop files <b>here</b> or <b>click</b> to upload.<br/>
                                <span class="dz-note needsclick">Drop file(s) when icon turns green</span>
                                <span class="dz-note needsclick">Maximum size {{ ini_get('upload_max_filesize') }}B per file</span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="panel">
                <div class="panel-body">
                    <a class="btn btn-warning btn-lg"
                       href="{{ path('profile', {'id':pavilion.id}) }}"><i class="fa fa-chevron-left"></i> Back to Profile</a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}