{{! 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 :       
    </div>          
    <div class='Ldt-createAnnotation-submitButton'>
      <div style='position: absolute; bottom: 10pt; right: 11pt;'>Submit</div>
    </div>
    
    <div class='Ldt-createAnnotation-endScreen' style='display: none'>
      Thank you, your annotation has been saved.<br>
      Would you like to share it on social networks ?
      <div style='margin-top: 12px; text-align: center;'>
          <img src='{{img_dir}}/tweet_button.png' style='margin-right: 20px;'></img>
          <img src='{{img_dir}}/facebook_button.png' style='margin-right: 20px;'></img>
          <img src='{{img_dir}}/gplus_button.png' style='margin-right: 20px;'></img>                
      </div>
    </div>
  </div>
</div>