{% load url from future %}
{% load socialaccount %}
{{ file_upload_form.media }}
<section id=filepicker-form class="extend-form">
  <div class="row" >
    <div class="small-12 columns">
      <div id="forms_container">
      </div>
      <div id="success" class="hide">
        <p>Thank you for sharing:</p>
        <ul id="uploaded_files">
        </ul>
        {% if not request.user.is_authenticated %}
          <p>It will take a minute for your notes to appear here.
            We'd love to have you sign up so you can <strong>claim the <span id="thank-points"></span> karma points
            you just got.</strong> With a KarmaNotes account,
            you can build a reputation by continuing to upload great notes.
            Refresh to share more notes.</p>
          <div class="socialaccount_ballot">
            <p>Sign up with:</p>
            <ul class="socialaccount_providers">
              {% include "socialaccount/snippets/provider_list.html" with process="login" %}
              <li><a href="{{ signup_url }}"> or a traditional account</a></li>
            </ul>
          </div>
        {% else %}
          <p>It will take a minute for your notes to appear. This page will refresh soon so you
            can see your new notes.
            You'll be awarded <strong><span id="thank-points"></span> karma points.</strong>
            <a href="">Want to share again?</a></p>
        {% endif %}
      </div>
    </div>

    <div id="form-template" class="hide form-template">
      <form class="inline-form" method="POST" action="{% url 'upload_post' %}">
        <div class="small-12 large-5 columns">
          <label for="id_name">Title of Note <small class="form">* Required</small></label>
          <input type="text" class="intext" id="id_name" name="name"
                placeholder="">
        </div>
        <div class="small-12 large-3 columns">
          <label for="id_category">Category <small class="form">* Required</small></label>
          <div class="select-wrapper">
            <select id="id_category" name="category" class="category">
              {% for category in note_categories %}
                <option value="{{ category.0 }}">{{ category.1 }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="small-12 large-3 columns">
          <label for="id_tags">Tags (comma seperated)</label>
          <input type="text" id="id_tags" name="tags" class="taggit-tags"
                placeholder="shakespeare, econ, physics">
        </div>
        <div class="columns small-12 end hide-for-large-up note-upload-remove-button">
          <i class="fa fa-times-circle fa-lg awesome-action remove"></i> Remove
        </div>
        <div class="columns large-1 end hide-for-medium-down note-upload-remove-button">
          <i class="fa fa-times-circle fa-lg awesome-action remove"></i>
        </div>
        <div class="hidden-fields" style="display:none;">
          <input type="text" id="id_fpfile" name="fpfile" class="fpurl">
          <input type="text" id="id_mimetype" name="mimetype" class="mimetype">
          <input type="text" id="id_course" name="course" value="{{ course.id }}"
            class="course_id">
          {% csrf_token %}
          <input type="text" class="csrf" value='{{ csrf_token }}'>
        </div>
      </form>
    </div>
  </div>
  <div class="small-8 small-offset-3 columns large-2">
    <div id="save-btn" class="hide">
      <button class="inline-button"><i id="save-btn-icon" class="fa fa-save"></i> Save</button>
    </div>
  </div>

  <script>
    var upload_post_url = '{% url 'upload_post' %}';
    {% if user.is_authenticated %}
      var user_is_authenicated = true;
    {% else %}
      var user_is_authenicated = false;
    {% endif %}
  </script>

</section>
