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

{% block content %}

    <script src="/Static/JS/ThirdParty/abcjs-basic.js"></script>
    <!--<script src="/Static/JS/ThirdParty/abcjs-plugin-min.js"></script>-->
    <link rel="stylesheet" href="/Static/CSS/ThirdParty/abcjs-audio.css">


    <div class="InnerContent">
        <h1>{{ TuneDetails.Title }}</h1>
        <div>
            <div class="container">
                <div class="left">
                    <div class="DLContainer">
                        <dl>
                            <dt>{{ "Time Signature"|translate }}</dt>
                            <dd>{{ TuneDetails.TimeSignature }}</dd>

                            <dt>{{ "Key Signature"|translate }}</dt>
                            <dd>{{ TuneDetails.KeySignature }}</dd>

                            <dt>{{ "Copyright"|translate }}</dt>
                            <dd>{{ TuneDetails.Copyright }}</dd>

                            <dt>{{ "Number of Parts"|translate }}</dt>
                            <dd>{{ TuneDetails.Parts|json_encode }}</dd>
                        </dl>
                    </div>
                </div>
                <div class="center">
                    <div id="NotationContainer--{{ TuneDetails.ID }}"></div>
                    <div>
                        <h2>{{ "ABC Notation"|translate }}</h2>
                        <pre id="RawABCReadout--{{ TuneDetails.ID }}">

                </pre>
                    </div>
                </div>
                <div class="right">
                    <h2>{{ "Audio"|translate }}</h2>
                    <div id="MIDI--{{ TuneDetails.ID }}"></div>

                </div>
            </div>
        </div>
    </div>

    <div class="InnerContent">
        <h1>
            {{ "Dances for"|translate }}
            "{{ TuneDetails.Title }}"
            <span>
                <sup>
                    <a href="/tune/{{ TuneDetails.ID }}/suggest-dance">
                        {{ "Suggest another"|translate }}
                    </a>
                </sup>
            </span>
        </h1>
        {% for x in Dances %}
            <div>
                <button class="accordion">{{ TuneDetails.Title }}</button>
                <div class="panel">
                    <h2>Steps</h2>
                    <table>
                        <thead>
                        <tr>
                            <th colspan="2">{{ "Bars"|translate }}</th>
                            <th>{{ "Description"|translate }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for step in TuneDetails.Steps %}
                            <tr>
                                <th>{{ step.BarCountAtStart }}</th>
                                <th>{{ step.BarCountAtEnd }}</th>
                                <td>{{ step.Description }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endfor %}
    </div>

    <script>
        var acc = document.getElementsByClassName("accordion");
        var i;

        for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function() {
                /* Toggle between adding and removing the "active" class,
                to highlight the button that controls the panel */
                this.classList.toggle("active");

                /* Toggle between hiding and showing the active panel */
                var panel = this.nextElementSibling;
                if (panel.style.display === "block") {
                    panel.style.display = "none";
                } else {
                    panel.style.display = "block";
                }
            });
        }
    </script>





    <script>
        if (!window.ABCJS) {
            console.error("ABCJS library failed to load.");
        }
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            function RenderABC(targetTuneID) {
                API_GET("/V1/GetABCFile.php?tune-variant-id=" + targetTuneID)
                    .then(payload => {
                        // Ensure required DOM elements exist
                        const notationContainer = document.getElementById("NotationContainer--" + targetTuneID);
                        const rawABCContainer = document.getElementById("RawABCReadout--" + targetTuneID);
                        const midiContainer = document.getElementById("MIDI--" + targetTuneID);

                        if (!notationContainer || !rawABCContainer || !midiContainer) {
                            console.error(`Missing DOM elements for targetTuneID: ${targetTuneID}`);
                            return;
                        }

                        console.log(window.ABCJS);

                        // Render the ABC notation
                        const tunes = window.ABCJS.renderAbc(
                            notationContainer.id,
                            payload,
                            {
                                add_classes: true,
                                format: {
                                    gchordfont: "Atkinson Hyperlegible",
                                    annotationfont: "Atkinson Hyperlegible",
                                    headerfont: "Atkinson Hyperlegible",
                                    infofont: "Atkinson Hyperlegible",
                                    repeatfont: "Atkinson Hyperlegible",
                                    tempofont: "Atkinson Hyperlegible",
                                    titlefont: "Atkinson Hyperlegible",
                                    voicefont: "Atkinson Hyperlegible",
                                    wordsfont: "Atkinson Hyperlegible",
                                },
                            }
                        );

                        // Display raw ABC notation
                        rawABCContainer.innerHTML = payload;



                        window.ABCJS.startAnimation(notationContainer.id, tunes[0], {
                            showCursor: true,
                        });
                    })
                    .catch(error => {
                        console.error("Error fetching ABC data:", error);
                    });
            }


            RenderABC('{{ TuneDetails.ID }}');
        });
    </script>
{% endblock %}