{% load i18n cosinnus_tags %}

{% if style and style == "large" %}
<div type="button" class="btn btn-default w100 large-space">
	<ul class="media-list">
		<li class="media">
		    <a class="pull-left" href="#">
		        <i class="fa fa-plus"></i>
		    </a>
		    <div class="media-body media-body-form-control">
{% endif %}

<div class="dropzone">
	
	<label class="label-soft pull-left btn-no-interact">
		<div style="display: inline-block;">
			<div id="{{ form.attached_objects.id_for_label }}_progressbar" class="progressbar" style="display: none;">
				<span style="width: 0%;" class="app-files"></span>
			</div>
		</div>
		{% if attachments_only %}
			{% trans "Drag and Drop files here..." %}
		{% else %}
			{% trans "Drag and Drop files or folders here..." %}
			<a href="#" data-toggle="modal" data-target="#upload-info-modal">
				<i class="fa fa-question-circle-o"></i>
			</a>
			
		{% endif %}
	</label>
	<label class="file-upload-overlay pull-right cursor-pointer-input" for="fileupload" title="{% trans "Click to upload a new file/image. You can also drag & drop a file from your computer." %}">
		<i class="fa fa-upload  cursor-pointer-input"></i>
		<span class=" cursor-pointer-input">{% trans "Browse..." %}</span>
		<input id="fileupload" type="file" style="width: 200px;" name="file" {% if form_data %}data-form-data='{{ form_data }}'{% endif %} data-cosinnus-upload-select2-target-field="{{ form.attached_objects.id_for_label }}" data-url="{% group_url 'cosinnus:file:upload-inline' group=group.slug %}" multiple>
	</label>
</div> 

{% if style and style == "large" %}
            </div>
        </li>
    </ul>
</div>
{% endif %}

{% captureas label %}
	<p>
		{% trans "Drag and drop one or more files into this area to upload them to this folder." %}
	</p>
	<p>
		{% trans "You can also upload a whole folder, including all files and subfolders, by dragging it here. The new folders will be created automatically, with the same folder structure as on your computer." %}
	</p>
	<p>
		{% trans "Unfortunately, the folder upload feature is only available on some browsers. This is because some browsers will not provide the file path information that is needed for the upload. If your browser doesn't support this, you may wish to switch to a different browser for your upload." %}
	</p>
	<p>
		{% trans "Currently, the Browsers supporting folder upload are:" %}
	<p/>
	<ul style="color: #333333;">
		<li><span>Firefox (50+)</span></li>
		<li><span>Google Chrome</span></li>
		<li><span>Opera</span></li>
	</ul>
		
{% endcaptureas %}
{% captureas title %}{% trans "File and Folder Upload" %}{% endcaptureas %}
{% include "cosinnus/modal_box.html" with id="upload-info-modal" label=label title=title title_icon="fa-file" %}

