{% extends "base.html" %}

{% block page_title %}{{ action }} Location{% endblock %}

{% block extra_css %}
  <link type="text/css" rel="stylesheet" media="all" href="{{ STATIC_URL }}css/backbone-file-explorer.css" />
  <link type="text/css" rel="stylesheet" media="all" href="{{ STATIC_URL }}css/directory_picker.css" />
{% endblock %}

{% block content %}

<div class='space'>
    {% if location %}
    <form action="{% url 'location_edit' space.uuid location.uuid %}" method="post">
    {% else %}
    <form action="{% url 'location_create' space.uuid %}" method="post">
    {% endif %}
      {% csrf_token %}
        <p>Space: {{ space }}</p>
        {{ form.as_p }}
        <input type="submit" value="{{ action }} Location" class='btn btn-primary' />
    </form>
</div>

<div id='directory_picker'></div>
{% endblock %}

{% block extra_js %}
  <script type="text/javascript" src="{{ STATIC_URL }}js/underscore.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/backbone.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/file-explorer.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/directory_picker.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/single_directory_picker.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/vendor/base64.js"></script>

  <script>
    $(document).ready(function() {
      $('<input id="id_relative_path_browse" type="button" value="Browse" class="btn" />')
        .insertAfter('#id_relative_path');

      createSingleDirectoryPicker(
        '{{ space.path }}',
        'id_relative_path',
        'id_relative_path_browse',
        'directory_picker',
        '{% url "browse" "v2" "space" space.uuid %}'
      );
    });
  </script>

  <!-- File explorer-related templates -->

  <script type="text/template" id='directory-select-modal-layout'>
    <div class="modal hide" id="directory-select-modal">
      <div class="modal-header">
        <button type="button" class="close" id="directory-select-close" data-dismiss="modal">×</button>
        <h3>Select a directory</h3>
      </div>
      <div class="modal-body" id="transfer-component-select-body">
        <div id="explorer" class="backbone-file-explorer"></div>
      </div>
      <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal" id="directory-select-cancel">Cancel</a>
      </div>
    </div>
  </script>

  <script type="text/template" id='template-dir-level'>
    <div class="backbone-file-explorer-level"></div>
  </script>

  <script type="text/template" id='template-dir-entry'>
    <div class="backbone-file-explorer-entry" style='clear:both'>
      <span class="backbone-file-explorer-directory_icon_button"></span>
      <span class="backbone-file-explorer-directory_entry_name"><%= name %></span>
      <span class="backbone-file-explorer-directory_entry_actions"></span>
    </div>
  </script>
{% endblock extra_js %}
