{% extends "base.html" %}
{% block content %}
    <h1>{{ song.name }}</h1>
    {% if song.original %}
    <p><b>Original:</b> {{ song.original }}</p>
    {% endif %}
    {% if song.author %}
    <p><b>Autoría:</b> {{ song.author }}</p>
    {% endif %}
    {% if song.video %}
    <video id="{{ song.path.name }}-video" class="video-js"
        controls preload="auto" width="640" height="264"
        {% if song.cover %}poster="{{ song.cover|url }}"{% endif %}>
        <source src="{{ song.video|url }}" type='{{ song.video_type }}'>
        {% if not song.ass and song.vtt %}
        <track kind="captions" src="{{ song.vtt|url }}" srclang="nm" label="Negro mate" default>
        {% endif %}
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
    </video>
    {% endif %}

    <script>
    videojs('{{ song.path.name }}-video', {
        {% if song.ass %}
        plugins: {
            ass: {
                'src': ["{{ song.ass|url }}"],
                // videoWidth: 640,
                // videoHeight: 360,
                // enableSvg: false,
            },
        },
        sources: [{"src": "{{ song.video|url }}"}]
        {% endif %}
    });
    </script>

    {% if parsed_srt %}
    <p class="lyrics">
    {% for line in parsed_srt %}
        {{ line.content }}<br/>
    {% endfor %}
    </p>
    {% endif %}

    {% if song.files %}
    <ul class="files">
        {% for entry in song.files %}
            <li><a href="{{ entry|url }}">{{ entry.name }}</a></li>
        {% endfor %}
    </ul>
    {% endif %}
{% endblock %}