{% extends "vault/base.html" %}

{% load static %}

{% block title %}Storage - {{ project_name }}{% endblock %}

{% block content_title %}Object Storage{% endblock %}

{% block css %}
<link href="{% static 'vendor/css/fileinput.min.css' %}" media="all" rel="stylesheet" type="text/css" />
<link href="{% static 'vendor/css/themes/explorer-fas/theme.min.css' %}" media="all" rel="stylesheet" type="text/css" />
{% endblock %}

{% block content_breadcrumb %}
  <a href="{% url 'containerview' project_name %}">Containers</a>
  <a class="u" href="{% url 'objectview' project=project_name container=container %}">{{ container }}</a>
  {% for prefix in prefixes %}
    <a href="{% url 'objectview' project=project_name container=container prefix=prefix.full_name %}">{{ prefix.display_name }}</a>
  {% endfor %}
  <span>Upload File</span>
{% endblock %}

{% block content %}
  <form action="{{ swift_url }}" method="POST" class="form-box project-form" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="hidden" name="redirect" value="{{ redirect_url }}" />
    <input type="hidden" name="max_file_size" value="{{ max_file_size }}" />
    <input type="hidden" name="max_file_count" value="{{ max_file_count }}" />
    <input type="hidden" name="expires" value="{{ expires }}" />
    <input type="hidden" name="signature" value="{{ signature }}" />

    <fieldset class="content">
      <div class="col-md-12">
        <div class="form-group">
          <label for="filetmp">File(s):</label><br />
          <div class="file-loading">
            <input id="file" name="file[]" type="file" class="file" multiple data-theme="fas" data-browse-on-zone-click="true">
          </div>
          <br>
          <span class="help-block">
            Please select up to {{ max_file_count }} files to upload.
          </span>
        </div>
      </div>
    </fieldset>

    <fieldset class="base">
      <button type="submit" id="btSubmit" class="btn btn-primary">Start upload</button>
    </fieldset>
  </form>
{% endblock %}

{% block js_bottom %}
{{ block.super }}
<script src="{% static 'vendor/js/fileinput.min.js' %}"></script>
<script src="{% static 'vendor/js/themes/fas/theme.min.js' %}"></script>
<script src="{% static 'vendor/js/themes/explorer-fas/theme.min.js' %}"></script>
<script>
$(document).on('ready', function() {
    $("#file").fileinput({
        theme: "gly",
        maxFileCount: {{ max_file_count }},
        autoReplace: true,
        showUpload: false,
        hideThumbnailContent: true
    });
});
</script>
{% endblock %}
