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

{% block content %}

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

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

                        <dt>Copyright</dt>
                        <dd>{{ TuneDetails.Copyright }}</dd>

                        <dt>Number of Parts</dt>
                        <dd>{{ TuneDetails.Parts|json_decode|length }}</dd>
                    </dl>
                </div>
            </div>
            <div class="center">
                <div id="music-container"></div>
                <div>
                    <h2>ABC Notation</h2>
                    <pre id="RawABCReadout">

                    </pre>
                </div>
            </div>
            <div class="right">
                <h2>Audio</h2>
                <audio id="midiPlayer" controls></audio>

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

    <script>
        RenderABC("music-container", '{{ TuneDetails.ID }}');
    </script>
{% endblock %}