{{! template for the annotation creation widget }}
<div class='Ldt-createAnnotationWidget'>
  <!-- ugly div because we want to have a double border -->
  <div class='Ldt-createAnnotation-DoubleBorder'>
    <div style='margin-bottom: 7px; overflow: auto;'>
      <div class='Ldt-createAnnotation-Title'>310</div>
      <div class='Ldt-createAnnotation-TimeFrame'>(03:10-07:45)</div>
    </div>
    
    <div class='Ldt-createAnnotation-Container'>
      <textarea class='Ldt-createAnnotation-Description'></textarea>
      <div class='Ldt-createAnnotation-profileArrow'>
        <img src='{{img_dir}}/annotate_arrow.png'></img>
      </div>
      <div class='Ldt-createAnnotation-userAvatar'>        
        <img src='https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png'></img>
      </div> 
    </div>
    
    <div class='Ldt-createAnnotation-keywords'>
      Add keywords : <span class='Ldt-createAnnotation-present-keyword'>#faux-raccord</span>
                     <span class='Ldt-createAnnotation-absent-keyword'>#mot-clef</span>
    </div>          
    <div class='Ldt-createAnnotation-submitButton'>
      <div style='position: absolute; bottom: 10pt; right: 11pt;'>Submit</div>
    </div>
  </div>
</div>