{% extends "core/navigation.html" %}
{% load static %}

{% block content %}

    <h5>My Playlists</h5>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPlaylistModal">
        Add playlist
    </button>

    <!-- Modal -->
    <div class="modal fade" id="addPlaylistModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form method="post">

                    {% csrf_token %}

                    <div class="modal-header">
                        <h5 class="modal-title">Add new playlist</h5>
                        <button type="button" class="close" data-bs-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="playlistUrl">Playlist URL</label>
                            <input type="url" class="form-control" id="playlistUrl" name="playlistUrl"
                                   placeholder="https://youtube.com/playlist?list=...">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Add playlist</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="deletePlaylistModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form id="deletePlaylistForm" action="" method="post">
                    {% csrf_token %}

                    <div class="modal-header">
                        <h5 class="modal-title">Delete {{ playlist.title }}</h5>
                        <button type="button" class="close" data-bs-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure you want to delete this playlist ?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel
                        </button>
                        <button type="submit" class="btn btn-danger">Delete playlist</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="card-deck">
        {% for playlist in playlists %}

            <div class="card text-white"
                 style="border-color: var(--discord-black); border-width: medium;{% if not playlist.enabled %} opacity: 40%; {% endif %}">
                <div class="card-header">
                    <a class="h5 card-title text-white text-break"
                       href="{% url 'user_profile:single_playlist' playlist_id=playlist.id %}">
                        {{ playlist.title }}
                    </a>
                    <input class="form-check-input mr-2" type="checkbox" {% if playlist.enabled %}checked{% endif %}
                           onclick="window.location.href = '{% url 'user_profile:toggle_playlist' playlist_id=playlist.id %}';"
                           style="width: 1.7em; height: 1.7em; margin: 0; right: 0;">
                </div>
                <div class="container">
                    <a class="row" href="{{ playlist.url }}">
                        {% for track in playlist.recent_tracks %}
                            <div class="col-4" style="padding: 0;">
                                <img src="{{ track.thumbnail }}" title="{{ track.title }}" width="100%">
                            </div>
                        {% empty %}
                            <span style="height: 72px">{{ playlist.url }}</span>
                        {% endfor %}
                    </a>
                </div>
                <div class="card-footer">
                    <a class="text-decoration-none" onclick="onSynchronize(this)"
                       href="{% url 'user_profile:synchronize_playlist' playlist_id=playlist.id %}">
                        <i style="font-size: 2em; color: var(--discord-blue); vertical-align: middle; display:inline-block;"
                           class="bi bi-arrow-repeat"></i>
                    </a>
                    <small class="text-white text-break">Last synchronized {{ playlist.last_synchronized }}</small>
                    <a data-bs-target="#deletePlaylistModal" data-bs-toggle="modal" style="float: right;"
                       data-delete-path="{% url "user_profile:delete_playlist" playlist_id=playlist.id %}"
                       data-modal-title="Delete &quot;{{ playlist.title }}&quot;"
                       href="">
                        <i style="font-size: 2em; color: #dc3545; vertical-align: middle;"
                           class="bi bi-trash-fill"></i>
                    </a>
                </div>
            </div>


        {% endfor %}
    </div>


{% endblock %}

{% block javascript %}
    <script type="text/javascript">
        let deletePlaylistModal = document.querySelector('#deletePlaylistModal');
        let deletePlaylistForm = document.querySelector('#deletePlaylistForm');
        let deletePlayListModalHeader = deletePlaylistModal.querySelector('.modal-title')

        deletePlaylistModal.addEventListener('show.bs.modal', function (event) {
            deletePlaylistForm.setAttribute('action', event.relatedTarget.dataset.deletePath);
            deletePlayListModalHeader.firstChild.nodeValue = event.relatedTarget.dataset.modalTitle;
        })

        function onSynchronize(button) {
            button.querySelector('.bi-arrow-repeat').classList.add('spinning');
        }

    </script>
{% endblock %}