{% extends 'base.html.twig' %}

{% block title %}{{ user.username }}{% endblock %}

{% block content %}
    <section class="section-user-detail">
        <header>
            <div class="detail">
                <div class="user-avatar" style="background-image: url({{ asset('uploads/avatar/' ~ user.coverReference ~ '?t=' ~ date().timestamp) }}), url({{ asset("assets/img/defaultAvatar.jpg") }});">
                    {% if is_granted("ROLE_USER") %}
                        {% if app.user.id == user.id %}
                            <form method="post" action="" enctype="multipart/form-data" class="user-avatar-change">
                                <input typoe="hidden" name="save" value="changeAvatar" />
                                <input type="file" name="newAvatar" onchange="document.querySelector('.user-avatar-change').submit()" />
                                <i class="mdi mdi-image-edit"></i>
                            </form>
                        {% endif %}
                    {% endif %}
                </div>
                <div class="user-data">
                    <div class="user-name">{% if user.pronouns != "" %}<span>{{ user.pronouns }}</span> {% endif %}{{ user.username }} {% if user.isPatreon %}<i class="mdi mdi-patreon"></i>{% endif %}</div>
                    <div class="user-actions">
                        <a href="{{ path('report.user', {userId: user.id}) }}" class="button">Report</a>
                        <a href="spinshare-user://{{ user.id }}" class="button">Open in Client</a>
                        {% if is_granted("ROLE_USER") %}
                            {% if is_granted('ROLE_MODERATOR') and user.id != app.user.id %}
                                {% if user.enabled %}
                                    <a href="{{ path('moderation.user.ban', {userId: user.id}) }}" class="button">Ban User</a>
                                {% else %}
                                    <a href="{{ path('moderation.user.unban', {userId: user.id}) }}" class="button">Unban User</a>
                                {% endif %}
                                <a href="{{ path('moderation.user.resetAvatar', {userId: user.id}) }}" class="button">Reset Avatar</a>
                                {% if is_granted('ROLE_ADMIN') %}
                                    <a href="{{ path('moderation.user.toggleMod', {userId: user.id}) }}" class="button">{{ ("ROLE_MODERATOR" in user.roles) ? "Demote to User" : "Promote to Mod" }}</a>
                                    <a href="{{ path('moderation.user.togglePatreon', {userId: user.id}) }}" class="button">{{ user.isPatreon ? "Remove Patreon" : "Make Patreon" }}</a>
                                {% endif %}
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
            </div>

            {% if user.userCards|length > 0 %}
                <div class="cards">
                    {% for userCard in user.userCards %}
                        <div class="card" style="background-image: url({{ asset('uploads/card/' ~ userCard.card.icon) }})" onclick="openCardOverlay('{{ userCard.card.title }}', '{{ userCard.card.description }}', '{{ userCard.givenDate|date("dS F Y") }}', '{{ asset('uploads/card/' ~ userCard.card.icon) }}')"></div>
                    {% endfor %}
                </div>
            {% endif %}

            <div class="tabs">
                <a class="tab {% if area == 'charts' %}active{% endif %}" href="{{ path('user.detail', {userId: user.id, area: "charts"}) }}">Charts ({{ charts|length|default("0") }})</a>
                <a class="tab {% if area == 'playlists' %}active{% endif %}" href="{{ path('user.detail', {userId: user.id, area: "playlists"}) }}">Playlists ({{ playlists|length|default("0")}})</a>
                <a class="tab {% if area == 'reviews' %}active{% endif %}" href="{{ path('user.detail', {userId: user.id, area: "reviews"}) }}">Reviews ({{ reviews|length|default("0")}})</a>
                <a class="tab {% if area == 'spinplays' %}active{% endif %}" href="{{ path('user.detail', {userId: user.id, area: "spinplays"}) }}">SpinPlays ({{ spinPlays|length|default("0")}})</a>
            </div>
        </header>
        
        {% block userDetailContent %}
        {% endblock %}
    </section>

    <div class="card-overlay">
        <div class="close" onclick="closeCardOverlay()"><i class="mdi mdi-close"></i></div>

        <div class="overlay-content">
            <img src="" class="card-icon" data-tilt data-tilt-glare data-tilt-max-glare="0.8" data-tilt-full-page-listening data-tilt-reverse="true" data-tilt-max="40" />

            <div class="card-title">Card Title</div>
            <div class="card-description">This card was given out to every player of the Spring 2020 SpinShare Speen Open tournament.</div>
            <div class="card-given">Card Date</div>
            <div class="button" onclick="closeCardOverlay()">Close</div>
        </div>
    </div>
{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{{ asset('assets/css/userdetail.css?v=' ~ date().timestamp) }}" />
{% endblock %}

{% block scripts %}
    <script src="{{ asset('assets/js/vanilla-tilt.min.js') }}"></script>
    <script>
        let UICardOverlay = document.querySelector(".card-overlay");
        let UICardTitle = UICardOverlay.querySelector(".card-title");
        let UICardDescription = UICardOverlay.querySelector(".card-description");
        let UICardGiven = UICardOverlay.querySelector(".card-given");
        let UICardIcon = UICardOverlay.querySelector(".card-icon");

        function openCardOverlay(title, description, givenDate, iconUrl) {
            UICardIcon.src = iconUrl;
            UICardTitle.innerText = title;
            UICardDescription.innerText = description;
            UICardGiven.innerText = givenDate;

            UICardOverlay.classList.add("active");
        }

        function closeCardOverlay() {
            UICardOverlay.classList.remove("active");
        }
    </script>
{% endblock %}