{{! template for the annotation list widget }}

<div class='Ldt-AnnotationsListWidget'>

  <!-- ugly div because we want to have a double border -->

  <div class='Ldt-Annotation-DoubleBorder'>

    <ul>

    {{#annotations}}

      <li>

        {{^url}}

        <a href='#id={{id}}'>

        {{/url}}

        <a href='{{url}}#id={{id}}'>

          <div style='overflow: auto; margin-top: 5px; margin-bottom: 5px;'>

            <div class='Ldt-AnnotationsList-Caption'>

              <img src='http://i.imgur.com/aoUlC.jpg'></img>

            </div>

            <div class='Ldt-AnnotationsList-Duration'>{{begin}} - {{end}}</div>

            <div class='Ldt-AnnotationsList-Title'>{{title}}</div>

            <div class='Ldt-AnnotationsList-Description'>{{desc}}</div>

          </div>

        </a>

      </li>

    {{/annotations}}

    </ul>

  </div>

</div>