{% extends "cast/cast_base.html" %}
{% load static %}

{% block content %}
<p><a class="btn btn-secondary btn-lg" href="{% url "cast:post_list" slug=blog_slug %}" role ="button">Back to Blog</a></p>
{% if form.errors %}
  <!-- Error messaging -->
  <div id="errors" class="alert alert-danger" role="alert">
    <div class="inner">
      <p>There were some errors in the information you entered. Please correct the following:</p>
        {{ form.non_field_errors }}
        <ul>
        {% for field in form %}
          {% if field.errors %}
            <li>{{ field.label }}: {{ field.errors|striptags }}</li>
          {% endif %}
        {% endfor %}
        </ul>
     </div>
  </div>
  <!-- /Error messaging -->
{% endif %}

  <br>
  <form id="create-form" method="post" action="./" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.media }}
    {{ form.as_p }}
    <p><input type="submit" value="post"></p>
  </form>
  <div>
    <input type="file" class="my-pond" name="filepond"/>
  </div>

  <p>
    <p>
    <button
      id="insert-images"
      type="button"
      class="btn btn-primary"
      style="display: none;">
      Insert Images
    </button>
    <div id='preview-images' class="clearfix"></div>
    </p>
  </p>

  <p>
    <p>
    <button
      id="insert-video"
      type="button"
      class="btn btn-primary"
      style="display: none;">
      Insert Video
    </button>
    <div id='preview-videos' class="clearfix"></div>
    </p>
  </p>

  <p>
    <p>
    <button
      id="insert-audio"
      type="button"
      class="btn btn-primary"
      style="display: none;">
      Insert Audio
    </button>
    <div id='preview-audios' class="clearfix"></div>
    </p>
  </p>
{% endblock content %}

{% block javascript %}
  <!-- block.super will get the content of the block from the parent template -->
  {{ block.super }}
  <script src="{% static 'rest_framework/js/coreapi-0.1.1.js' %}"></script>
  <script src="{% url 'api-docs:schema-js' %}"></script>
  <script src="{% static 'js/cast/create.js' %}"></script>

  <!-- Filepond -->
  <link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet">
  <script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
  <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
  <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
  <!--
  <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.min.js"></script>
  <script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.min.js"></script>
  <script src="https://unpkg.com/filepond-plugin-image-crop/dist/filepond-plugin-image-crop.min.js"></script>
  <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.min.js"></script>
  <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.min.js"></script>
  <script src="https://unpkg.com/filepond-plugin-image-edit/dist/filepond-plugin-image-edit.min.js"></script>
  -->
  <script src="https://unpkg.com/jquery-filepond/filepond.jquery.js"></script>

{% endblock javascript %}
