<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta content="utf-8" http-equiv="encoding">
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title id="title-head"></title>
        <link href="assets/videojs/video-js.min.css" rel="stylesheet" type="text/css">
        <link href="assets/article.css" rel="stylesheet" type="text/css">
        <link id="favicon" rel="shortcut icon" href="favicon.png" type="image/png">
        <script src="assets/zim_prefix.js"></script>
        <script src="assets/videojs/video.min.js"></script>
        <script src="assets/ogvjs/ogv-support.js"></script>
        <script src="assets/ogvjs/ogv.js"></script>
        <script src="assets/videojs-ogvjs.js"></script>
        <script src="assets/jquery.min.js"></script>
        <script src="assets/article.js"></script>        
    </head>
    <body>
        <div id="content">
            <img id="backtolist" src="assets/img/TED_small.png" title="Back to the list" onclick="history.go(-1)" />
            <p id="speaker">{{ speaker }}</p>
            {% for title in titles %}
            <p class="title lang-{{ title.lang }}">{{ title.text }}</p>
            {% endfor %}
            <video class="video-js vjs-default-skin"
                controls preload="auto"
                poster="videos/{{ video_id }}/thumbnail.jpg"
                width="480px" height="270px"
                data-setup='{"techOrder": ["html5", "ogvjs"], "ogvjs": {"base": "assets/ogvjs"}, "autoplay": {% if autoplay %}true{% else %}false{% endif %}, "preload": true, "controls": true, "controlBar": {"pictureInPictureToggle":false}}'>
                <source src="videos/{{ video_id }}/video.{{ video_format }}" type="video/{{ video_format }}" />
                    {% for language in languages %}
                    <track kind="subtitles" src="videos/{{ video_id }}/subs/subs_{{ language.languageCode }}.vtt" srclang="{{ language.languageCode }}" label="{{ language.languageName }}" />
                    {% endfor %}
                </video>
                <div id="descriptions">
                    {% for description in descriptions %}
                    <p class="description lang-{{ description.lang }}">{{ description.text }}</p>
                    {% endfor %}
                </div>
                <div id="date">{{ date }}</div>
                <hr>
                <div id="speaker_box_img">
                    <div>
                        {% if speaker_img != "None" %}
                          <img id="speaker_img" src="videos/{{ video_id }}/speaker.jpg">
                        {% endif %}
                        <div id="speaker_info">
                            <div id="speaker_info_box">{{ speaker }}</div>
                            <div id="speaker_info_profession">{{ profession }}</div>
                        </div>
                        <p id="speaker_desc">{{ speaker_bio }}</p>
                    </div>
                </div>
            </div>
        </body>
    </html>
