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

{% block content %}
    <script>
        function VoteOnDance(type)
        {
            API_GET('/V1/RateDance.php?dance-id={{ DanceDetails.ID }}&type='+type)
                .then(payload => {
                    console.log(payload);
                    document.getElementById('LikeButton').classList.remove('active');
                    document.getElementById('DislikeButton').classList.remove('active');
                    if(payload['NewVoteValue'] === -1)
                        document.getElementById('DislikeButton').classList.add('active');
                    else if(payload['NewVoteValue'] === 1)
                        document.getElementById('LikeButton').classList.add('active');
                    document.getElementById('LikeCount').innerHTML = payload['LikeCount'];
                    document.getElementById('DislikeCount').innerHTML = payload['DislikeCount'];
                })
                .catch(error => {
                    console.error("Error fetching ABC data:", error);
                });
        }
    </script>


    <div class="InnerContent">
        <div>
            <div class="container">
                <div class="left">
                    <div class="DLContainer">
                        <h2>{{ "Dance Overview"|translate }}</h2>
                        <dl>
                            <dt>{{ "Number of Steps"|translate }}</dt>
                            <dd>{{ DanceSteps|length }}</dd>
                        </dl>
                    </div>
                    <div id="RatingContainer">
                        <h2>{{ "Rating"|translate }}</h2>
                        <div class="RatingButtons">
                            {% if _SESSION_.IS_LOGGED_IN %}
                                <button id="DislikeButton" onclick="VoteOnDance('DISLIKE');" {% if MyVote == -1 %}class="active"{% endif %}>👎</button>
                                <button id="LikeButton" onclick="VoteOnDance('LIKE');" {% if MyVote == 1 %}class="active"{% endif %}>👍</button>
                            {% else %}
                                <em>{{ "Log in to vote"|translate }}</em>
                            {% endif %}
                        </div>
                        <div class="Counts">
                            |
                            <span>👎 <span id="DislikeCount">{{ DanceDetails.Dislikes }}</span></span>
                            |
                            <span>👍 <span id="LikeCount">{{ DanceDetails.Likes }}</span></span>
                            |
                            <span>⭐ <span id="BookmarkCount">{{ DanceDetails.Bookmarks }}</span></span>
                            |
                        </div>
                    </div>
                </div>
                <div class="center">
                    <table>
                        <thead>
                        <tr>
                            <th>bar from</th>
                            <th>bar until</th>
                            <th>step</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for step in DanceSteps %}
                            <tr>
                                <td>{{ step.BarCountAtStart }}</td>
                                <td>{{ step.BarCountAtEnd }}</td>
                                <td>{{ step.Description }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="right">
                    <div id="TuneSetContainer">
                        <h2>{{ "Sets this dance is in"|translate }}</h2>
                        <ul>
                            {% for tuneSet in SetsThisDanceIsIn %}
                                <li>
                                    <a href="/tune-set/{{ tuneSet.TuneSetID }}">{{ tuneSet.TuneSetName }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}