{% extends "base.html" %}
{% load form youtube %}
{% block content %}
    <h1>
        {% if group.owner == user %}
            <i class="ri-vip-crown-fill owner"></i>
        {% else %}
            <i class="ri-group-2-fill"></i>
        {% endif %}
        {{ group.name }}
    </h1>
    {% if group.owner == user %}
        <p>
            <form method="post">
                {% csrf_token %}
                <p>
                    <a href="{% url "start_game" pk=group.pk %}" role="button"><i class="ri-play-fill"></i> Jouer</a>
                </p>
                <div role="group">
                    <a href="{% url "group_update" pk=group.pk %}"
                       class="secondary"
                       role="button"><i class="ri-edit-line"></i> Renommer</a>
                    <button type="submit"
                            class="secondary"
                            formaction="{% url "group_clear_blacklist" pk=group.pk %}">
                        <i class="ri-history-fill"></i> Effacer la blacklist
                    </button>
                </div>
            </form>
        </p>
    {% endif %}
    {% if group.musikgame_set.exists %}
        <h2>
            <i class="ri-play-circle-fill"></i> Parties
        </h2>
        <form method="post">
            {% csrf_token %}
            <table>
                <thead>
                    {% if group.owner == user %}<th></th>{% endif %}
                    <th>Date</th>
                    <th>
                        <i class="ri-youtube-fill"></i> Playlists
                    </th>
                    <th>Joueurs</th>
                </thead>
                <tbody>
                    {% for game in group.musikgame_set.all %}
                        <tr>
                            {% if group.owner == user %}
                                <td>
                                    <input type="checkbox" name="game" value="{{ game.pk }}">
                                </td>
                            {% endif %}
                            <td>
                                <a href="{% url "game_detail" pk=game.pk %}">{{ game.date }}</a>
                            </td>
                            <td>
                                {% if game.playlist %}
                                    <a href="{% yt_playlist game %}"
                                       {% if game.playlist_loading %}aria-busy="true"{% endif %}><i class="ri-youtube-fill"></i> Playlist</a>
                                {% endif %}
                            </td>
                            <td>{{ game.players.all|join:", " }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% if group.owner == user %}
                <button type="submit"
                        class="secondary"
                        formaction="{% url "group_remove_game" pk=group.pk %}">
                    <i class="ri-delete-bin-fill"></i> Supprimer les parties sélectionnées
                </button>
            {% endif %}
        </form>
    {% endif %}
    <h2>
        <i class="ri-group-2-fill"></i> Membres
    </h2>
    <form method="post">
        {% csrf_token %}
        <table>
            <thead>
                <tr>
                    {% if group.owner == user %}<th></th>{% endif %}
                    <th>Membre</th>
                    <th>
                        <i class="ri-vip-crown-fill"></i>
                    </th>
                    <th>
                        <i class="ri-mv-line"></i>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    {% if group.owner == user %}<td></td>{% endif %}
                    <td>{{ group.owner }}</td>
                    <td>
                        <i class="ri-vip-crown-fill owner"></i>
                    </td>
                    <td>{{ owner_count }}</td>
                </tr>
                {% for member in members.all %}
                    <tr>
                        {% if group.owner == user %}
                            <td>
                                <input type="checkbox" name="member" value="{{ member.pk }}">
                            </td>
                        {% endif %}
                        <td>{{ member }}</td>
                        <td></td>
                        <td>{{ member.count }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        {% if group.owner == user %}
            <button type="submit"
                    class="secondary"
                    formaction="{% url "group_remove_member" pk=group.pk %}">
                <i class="ri-delete-bin-fill"></i> Supprimer les membres sélectionnés
            </button>
        {% endif %}
    </form>
    {% if group.owner == user %}
        <form method="post" action="{% url "group_add_member" pk=group.pk %}">
            {% csrf_token %}
            <fieldset role="group">
                <input type="string"
                       name="username"
                       id="username"
                       placeholder="Membre"
                       required>
                <button type="submit">Ajouter</button>
            </fieldset>
        </form>
    {% endif %}
    <h2>
        <i class="ri-music-2-fill"></i> Mes musiques <span class="music-count">{{ musics.count }}</span>
    </h2>
    <details>
        <summary role="button">
            <i class="ri-music-2-fill"></i> Liste des musiques
        </summary>
        <form method="post">
            {% csrf_token %}
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>Musique</th>
                        <th>ID</th>
                        <th>
                            <i class="ri-history-fill"></i>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {% for music in musics %}
                        <tr>
                            <td>
                                <input type="checkbox" name="musics" value="{{ music.pk }}">
                            </td>
                            <th>{{ music.title }}</th>
                            <td>
                                <a href="https://youtu.be/{{ music.yt_id }}">{{ music.yt_id }}</a>
                            </td>
                            <td>
                                <input type="checkbox" disabled {% if music.blacklisted %}checked{% endif %}>
                            </td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan="4">Aucune musique.</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% if musics %}
                <fieldset role="group">
                    <button type="submit"
                            formaction="{% url "group_remove_music" pk=group.pk %}"
                            class="secondary">
                        <i class="ri-delete-bin-fill"></i> Supprimer
                    </button>
                    <button type="submit"
                            class="secondary"
                            formaction="{% url "group_unblacklist_music" pk=group.pk %}">
                        <i class="ri-history-fill"></i> Retirer de la blacklist
                    </button>
                </fieldset>
            {% endif %}
        </form>
    </details>
    <form method="post" action="{% url "group_add_music" pk=group.pk %}">
        {% csrf_token %}
        <fieldset role="group">
            <input type="string" name="yt_id" id="yt_id" placeholder="Musique" required>
            <button type="submit">Ajouter</button>
        </fieldset>
    </form>
{% endblock content %}