{{! 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>{{l10n.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'>{{l10n.submit}}</button>

            {{#tags.length}}

            <div class='Ldt-createAnnotation-btnblock Ldt-createAnnotation-keywords'>

                <label>{{l10n.add_keywords}} :</label>

                <ul class='Ldt-floatList'>

                {{#tags}}

                    <li><button class='Ldt-createAnnotation-keyword-button Ldt-TraceMe' tag-id='{{id}}'>{{meta.description}}</button></li>

                {{/tags}}

                </ul>

            </div>

            {{#random_tags}}

                <button class='Ldt-createAnnotation-moar-keywordz'>{{l10n.more_tags}}</button>

            {{/random_tags}}

            {{/tags.length}}

            {{#polemic_mode}}

            {{#polemics.length}}

            <div class='Ldt-createAnnotation-btnblock Ldt-createAnnotation-polemics'>

                <label>{{l10n.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>

            {{l10n.wait_while_processed}}

        </div>

        <div class='Ldt-createAnnotation-screen Ldt-createAnnotation-errorScreen' style='display: none; text-align: center'>

            <div class='Ldt-createAnnotation-Minimize' title='Hide'></div>

            {{l10n.error_while_contacting}}

        </div>

        <div class='Ldt-createAnnotation-screen Ldt-createAnnotation-endScreen' style='display: none'>

            <div class='Ldt-createAnnotation-Minimize' title='Hide'></div>

            {{l10n.annotation_saved}}

            <br>

            {{^disable_share}}

            {{l10n.share_annotation}}

            </div>

            {{/disable_share}}

        </div>

        <div class='Ldt-floatClear'></div>

    </div>

</div>