{% load static %}
{% load absurl %}
        <div class="top-bar">
            <div class="tags">
                <h3 class="tags-title">Tags</h3>
                <ul class="tags-list"></ul>
            </div>
            <span class="topright-buttons">
                <a class="full-screen" href="#"></a>
                <a class="about" href="#"></a>
            </span>
            <h1 class="project-title"></h1>
        </div>
        <div class="main-video">
            <div class="video-container"></div>
            <ul class="pictolist"></ul>
        </div>
        <div class="bottom-bar">
            <div class="play-button">
                <a href="#"></a>
            </div>
            <div class="timelines">
                <div class="timeline">
                    <div class="elapsed"></div>
                    <div class="progress-indicator"></div>
                    <div class="mouse-progress-indicator"></div>
                </div>
                <div class="chapters-bar">
                    <ul class="chapters-list"></ul>
                    <ul class="chips-list"></ul>
                    <div class="left-hiding-block"></div>
                    <div class="right-hiding-block"></div>
                    <div class="progress-indicator"></div>
                </div>
            </div>
            <div class="chapter-nav">
                <div class="prev-chapter inactive"></div>
                <div class="next-chapter"></div>
            </div>
        </div>
        <div class="annotation-templates">
            <div class="annotations">
                <div class="annotation about-box white-annotation">
                    <a href="#" class="close-annotation"></a>
                    <h2 class="annotation-title">À propos des Webdocs</h2>
                    <h3>Une collaboration</h3>
                    <ul class="about-collaboration">
                        <li>
                            <img src="img/logo-aix.png" alt="Logo du Festival d’Art Lyrique d’Aix-en-Provence" />
                            <p>Festival d’Art Lyrique d’Aix-en-Provence</p>
                        </li>
                        <li>
                            <img src="img/logo-iri.png" alt="Logo de l’Institut de Recherche et d’Innovation" />
                            <p>Institut de Recherche et d’Innovation</p>
                        </li>
                    </ul>
                </div>
                <div class="annotation text-annotation white-annotation">
                    <a href="#" class="close-annotation"></a>
                    <h2 class="annotation-title"></h2>
                    <div class="text-contents"></div>
                </div>
                <div class="annotation link-annotation white-annotation narrow-annotation">
                    <a href="#" class="close-annotation"></a>
                    <h2 class="annotation-title"></h2>
                    <div class="link-contents">
                    </div>
                </div>
                <div class="annotation slideshow-annotation black-annotation">
                    <a href="#" class="close-annotation"></a>
                    <h2 class="annotation-title"></h2>
                    <div class="annotation-main">
                        <div class="slideshow-frame">
                            <img class="slideshow-image" />
                            <div class="slideshow-arrow slideshow-previous">
                                <a href="#"></a>
                            </div>
                            <div class="slideshow-arrow slideshow-next">
                                <a href="#"></a>
                            </div>
                        </div>
                        <div class="slideshow-description">
                        </div>
                    </div>
                    <div class="slideshow-bottom">
                        <div class="slideshow-play-pause">
                            <a href="#"></a>
                        </div>
                        <div class="slideshow-title"></div>
                    </div>
                </div>
                <div class="annotation audio-annotation black-annotation narrow-annotation">
                    <a href="#" class="close-annotation"></a>
                    <h2 class="annotation-title"></h2>
                    <div class="annotation-main">
                        <div class="media-frame"></div>
                        <div class="media-description"></div>
                    </div>
                </div>
                <div class="annotation video-annotation black-annotation">
                    <a href="#" class="close-annotation"></a>
                    <h2 class="annotation-title"></h2>
                    <div class="annotation-main">
                        <div class="media-frame">
                        </div>
                        <div class="media-description">
                        </div>
                    </div>
                </div>                         
            </div>
        </div>
        <script type="text/javascript" src="{% static 'metadatacomposer/lib/jquery.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'metadatacomposer/lib/jquery-ui.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'metadatacomposer/lib/underscore-min.js' %}"></script>
        <script src="{% static 'metadatacomposer/js/metadataplayer-core.js' %}"></script>
        <script src="{% static 'metadatacomposer/js/ldt-serializer.js' %}"></script>
        <script type="text/javascript" src="{% static 'metadatacomposer/js/player.js' %}"></script>
        <script type="text/javascript">
        $(function() {
            IriSP.player("{% url 'projectjson_id' id=ldt_id %}");
        });
        </script>