{{! 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 class='Ldt-createAnnotation-startScreen'>
      <div style='margin-bottom: 7px; overflow: auto;'>
        <div class='Ldt-createAnnotation-Title'></div>
        <div class='Ldt-createAnnotation-TimeFrame'></div>
        {{^cinecast_version}}
          <div class='Ldt-createAnnotation-Minimize' title='Cancel'></div>
        {{/cinecast_version}}
      </div>
      
      <div class='Ldt-createAnnotation-Container'>
        <textarea class='Ldt-createAnnotation-Description'></textarea>
        <div class='Ldt-createAnnotation-profileArrow'>          
        </div>
        <div class='Ldt-createAnnotation-userAvatar'>
        {{^user_avatar}}
          <img src='https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png'></img>
        {{/user_avatar}}
        {{#user_avatar}}
          <img src='{{ user_avatar }}'></img>
        {{/user_avatar}}
        </div>
      </div>
      <div class='Ldt-createAnnotation-submitButton'>
        <div style='position: absolute; bottom: 5px; right: 5px;'>Submit</div>
      </div>
      <div class='Ldt-createAnnotation-keywords'>
        Add keywords :       
      </div>
      {{#polemic_mode}}
      <div class='Ldt-createAnnotation-polemics'>
        Add polemic keywords     
      </div>
      {{/polemic_mode}}

    </div>
    <div class='Ldt-createAnnotation-waitScreen' style='display: none; text-align: center'>
      <div class='Ldt-createAnnotation-spinner'></div>
      Please wait while your request is being processed...
    </div>

    <div class='Ldt-createAnnotation-errorScreen' style='display: none; text-align: center'>
      <div class='Ldt-createAnnotation-Minimize' title='Hide'></div>
      An error happened while contacting the server. Your annotation has not been saved.
    </div>
    
    <div class='Ldt-createAnnotation-endScreen' style='display: none'>
      <div class='Ldt-createAnnotation-Minimize' title='Hide'></div>
      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;'>
          <a target='_blank' class='Ldt-createAnnotation-endScreen-TweetLink'></a>
          <a target='_blank' class='Ldt-createAnnotation-endScreen-FbLink'></a>
          <a target='_blank' class='Ldt-createAnnotation-endScreen-GplusLink'></a>                    
      </div>
    </div>
  </div>
</div>