{% extends "base.html" %}
{% load static %}

{% block title %}{{ album.title }}{% endblock %}

{% block content %}
{% block extra_head %}
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet" />
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet" />
{% endblock %}

<form action="{% url "medialogue:ml-album-edit" album.slug %}" method="POST">
    {% csrf_token %}
    {{form.as_p}}
    <input type="submit" value="save album">
</form>
	<div class="item-content">
	    <a id="open-media-modal" href="#add-to-album">Add To Album</a>
	</div>
{% if album.media %}
<div class="grid">
    {% if user.is_staff %}
    {% endif %}
    {% for media in album.media.all %}
	{% if media.video.thumbnail %}
        <div class="item" data-item-id="{{media.id}}" >
	    <div class="item-content">
                <img src="{{media.video.thumbnail.url }}" class="img-thumbnail video" width="200" />
	    </div>
	</div>
	{% else %}
	<div class="item" data-item-id="{{media.id}}" >
	    <div class="item-content">
		<img src="{{media.photo.src.url}}" class="img-thumbnail photo" width="200" />
	    </div>
	</div>
	{% endif %}
    {% endfor %}
</div>
    {% else %}
	<div class="row">
	    <div class="col-lg-12"><h1>Nothing here...</h1></div>
	</div>
    {% endif %}
   <div class="modal" id="add-to-album-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add to {{album.title}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <form id="add-to-album-form" action="{% url 'medialogue:add-to-album' album.id %}">
            <input type="file"
                class="filepond"
                id="attachments"
                name="filepond"
                multiple
                >
          </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button id="add-to-album" type="button" class="btn btn-primary">Add to album</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block extra_scripts %}
    <script src="https://cdn.jsdelivr.net/npm/muuri@0.9.5/dist/muuri.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/web-animations-js@2.3.2/web-animations.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
    <script>
        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
        const csrftoken = getCookie('csrftoken');
    </script>
    <script src="{% static 'medialogue/js/album_edit.js' %}"></script>
{% endblock %}
