{{! 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>
        {{! if the url is not present, it means that the annotation exists 
            in the current project }}
        {{^url}}
        <a href='#id={{id}}'>
        {{/url}}
        {{! otherwise link to url }}
        {{#url}}
        <a href='{{url}}#id={{id}}'>
        {{/url}}
          <div style='overflow: auto; margin-top: 5px; margin-bottom: 5px;'>
            <div class='Ldt-AnnotationsList-Caption'>
              <img src='{{img_dir}}/video_sequence.png'></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>