{% extends "index.html" %}

{% block title %}{{squad.squad_name}} - Squadify{% endblock %}

{% block content %}
<div class="flex flex-col items-center space-y-8 font-medium text-gray-800">
    <div class="card flex flex-col items-center space-y-2 md:space-y-4">
        <p class="text-xl md:text-4xl font-bold">{{squad.squad_name}}</p>
        <p class="text-lg md:text-xl">Squad Leader: {{squad.leader_name}}</p>
        <a class="widget" href="/squads/{{squad.squad_id}}/compile">Compile Squad</a>
    </div>

    <div class="flex flex-col space-y-2">
        {% for playlist in squad.playlists %}
        <div class="flex flex-col md:flex-row shadow-md rounded-lg">
            <p
                class="md:flex-grow flex md:items-center justify-center font-semibold md:text-xl p-1 md:px-4 md:py-0 rounded-t-lg md:rounded-t-none md:rounded-l-lg bg-gray-200 bg-opacity-90">
                {{playlist.user_name}}
            </p>
            <div
                class="flex items-center space-x-2 p-3 rounded-b-lg md:rounded-bl-none md:rounded-r-lg bg-gray-200 bg-opacity-70">
                <iframe src="https://open.spotify.com/embed/playlist/{{playlist.playlist_id}}" class="rounded-md"
                    width="300" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
                <a href="/squads/{{squad.squad_id}}/delete_playlist?playlist_id={{playlist.playlist_id}}&user_name={{playlist.user_name}}"
                    onclick="return confirm('Delete this playlist?')">
                    {% include "components/delete-icon.html" %}
                </a>
            </div>
        </div>
        {% endfor %}

        {% if squad.playlists|length == 0 %}
        <div class="card flex flex-col space-y-2">
            <p>Add playlists below!</p>
            <p>Share this link with your friends!</p>
        </div>
        {% endif %}
    </div>

    <form method="POST" action="/squads/{{squad.squad_id}}/add_playlist"
        class="flex flex-col md:flex-row items-center space-y-2 space-x-4">
        {{ add_playlist_form.csrf_token }}
        {{ add_playlist_form.user_name(class="widget", placeholder="Your Name") }}
        {{ add_playlist_form.playlist_link(id="playlist_link", class="widget", placeholder="Playlist Link") }}
        {% if signed_in %}
        <label class="widget flex items-center space-x-2 md:space-x-0" for="use_liked_songs">
            Liked Songs
            {{ add_playlist_form.use_liked_songs(class="absolute w-0 h-0 opacity-0",
            onchange="togglePlaylistLink()") }}
            {% include "components/heart-icon.html" %}
            <script>
                function togglePlaylistLink() {
                    var el = document.getElementById("playlist_link");
                    if (el.style.display == "" || el.style.display == "block") {
                        el.style.display = "none";
                    } else {
                        el.style.display = "block";
                    }
                }
            </script>
        </label>
        {% endif %}
        <input class="widget max-w-max" type="submit" value="Add Playlist">
    </form>
</div>
{% endblock %}