{{! 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-screen 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 Ldt-TraceMe' title='Cancel'></div>
                {{/cinecast_version}}
            </div>
            <div class='Ldt-createAnnotation-Container'>
                {{#show_from_field}}
                <label>Your name&nbsp;: </label><input class='Ldt-createAnnotation-userName Ldt-TraceMe' value='{{user_name}}' />
                {{/show_from_field}}
                <textarea class='Ldt-createAnnotation-Description Ldt-TraceMe'></textarea>
                <div class='Ldt-createAnnotation-userAvatar Ldt-TraceMe'>
                    {{^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 class='Ldt-createAnnotation-profileArrow'></div>
            </div>
            <button class='Ldt-createAnnotation-submitButton Ldt-TraceMe'>Submit</button>
            {{#keywords.length}}
            <div class='Ldt-createAnnotation-btnblock Ldt-createAnnotation-keywords'>
                <label>Add keywords :</label>
                <ul class='Ldt-floatList'>
                {{#keywords}}
                    <li><button class='Ldt-createAnnotation-keyword-button Ldt-TraceMe'>{{.}}</button></li>
                {{/keywords}}
                </ul>
            </div>
            {{/keywords.length}}
            {{#polemic_mode}}
            {{#polemics.length}}
            <div class='Ldt-createAnnotation-btnblock Ldt-createAnnotation-polemics'>
                <label>Add polemic keywords :</label>
                <ul class='Ldt-floatList'>
                {{#polemics}}
                    <li><button class='Ldt-createAnnotation-polemic-{{className}} Ldt-createAnnotation-polemic-button Ldt-TraceMe'>{{keyword}}</button></li>
                {{/polemics}}
                </ul>
            </div>
            {{/polemics.length}}
            {{/polemic_mode}}
        </div>
        <div class='Ldt-createAnnotation-screen 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-screen 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-screen 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 Ldt-TraceMe'></a>
                <a target='_blank' class='Ldt-createAnnotation-endScreen-FbLink Ldt-TraceMe'></a>
                <a target='_blank' class='Ldt-createAnnotation-endScreen-GplusLink Ldt-TraceMe'></a>
            </div>
        </div>
        <div class='Ldt-floatClear'></div>
    </div>
</div>