{% extends "/Bases/StandardWebPage.html.twig" %}

{% block content %}
    <div class="InnerContent">
        <h1>{{ "Your Profile"|translate }}</h1>

        <a href="/logout">{{ "Logout"|translate }}</a>
        <a href="/change-password">{{ "Change Password"|translate }}</a>

        <div class="DLContainer">
            <h2>{{ "Summary"|translate }}</h2>
            <dl>
                <dt>{{ "User ID"|translate }}</dt>
                <dd>{{ _SESSION_.USER_ID }}</dd>

                <dt>{{ "Username"|translate }}</dt>
                <dd>{{ _SESSION_.USERNAME }}</dd>
            </dl>
        </div>

        <div class="Tab">
            <button id="DefaultOpenTab" class="TabLink" onclick="openTuneTab(event, 'MyUploadedTunes')">{{ "My Uploaded Tunes"|translate }}</button>
            <button class="TabLink" onclick="openTuneTab(event, 'MyLikedTunes')">{{ "My Liked Tunes"|translate }}</button>
            <button class="TabLink" onclick="openTuneTab(event, 'MyDislikedTunes')">{{ "My Disliked Tunes"|translate }}</button>
        </div>

        <div id="MyUploadedTunes" class="TabContent">
            <h2>{{ "My Uploaded Tunes"|translate }}</h2>
            <table>
                <thead>
                <tr>
                    <th>{{ "Title"|translate }}</th>
                    <th>{{ "Created At"|translate }}</th>
                    <th>{{ "Copyright"|translate }}</th>
                </tr>
                </thead>
                <tbody>
                {% for tuneDetails in YourTunes %}
                    <tr>
                        <td><a href="/tune/{{ tuneDetails.ID }}">{{ tuneDetails.Title }}</a></td>
                        <td>{{ tuneDetails.CreatedAt }}</td>
                        <td>{{ tuneDetails.Copyright }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <div id="MyLikedTunes" class="TabContent">
            <h2>{{ "My Liked Tunes"|translate }}</h2>
            <table>
                <thead>
                <tr>
                    <th>{{ "Title"|translate }}</th>
                    <th>{{ "Created At"|translate }}</th>
                    <th>{{ "Copyright"|translate }}</th>
                </tr>
                </thead>
                <tbody>
                {% for tuneDetails in YourLikedTunes %}
                    <tr>
                        <td><a href="/tune/{{ tuneDetails.ID }}">{{ tuneDetails.Title }}</a></td>
                        <td>{{ tuneDetails.CreatedAt }}</td>
                        <td>{{ tuneDetails.Copyright }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <div id="MyDislikedTunes" class="TabContent">
            <h2>{{ "My Disliked Tunes"|translate }}</h2>
            <table>
                <thead>
                <tr>
                    <th>{{ "Title"|translate }}</th>
                    <th>{{ "Created At"|translate }}</th>
                    <th>{{ "Copyright"|translate }}</th>
                </tr>
                </thead>
                <tbody>
                {% for tuneDetails in YourDislikedTunes %}
                    <tr>
                        <td><a href="/tune/{{ tuneDetails.ID }}">{{ tuneDetails.Title }}</a></td>
                        <td>{{ tuneDetails.CreatedAt }}</td>
                        <td>{{ tuneDetails.Copyright }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <script>
        document.getElementById("DefaultOpenTab").click();
        function openTuneTab(evt, cityName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("TabContent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("TabLink");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(cityName).style.display = "block";
            evt.currentTarget.className += " active";
        }
    </script>
{% endblock %}