{% load static %}
<div class="annotation-input">
    <div class="script_placeholder"
         data-src="{% static 'js/capa/annotationinput.js' %}" />
    <div class="annotation-header">
        {{ title|safe }}
        {% if return_to_annotation %}
            <a class="annotation-return" href="javascript:void(0)">Return to Annotation</a>
            <br />
        {% endif %}
    </div>
    <div class="annotation-body">
        <div class="block block-highlight">{{ text|safe }}</div>
        <div class="block block-comment">{{ comment|safe }}</div>
        <div class="block">{{ comment_prompt|safe }}</div>
        <textarea class="comment"
                  id="input_{{ id }}_comment"
                  name="input_{{ id }}_comment"
                  aria-describedby="answer_{{ id }}">{{ comment_value|safe }}</textarea>
        <div class="block" id="label_{{ id }}">{{ tag_prompt|safe }}</div>
        <ul class="tags">
            {% for option in options %}
                <li>
                    {% if has_options_value %}
                        {% if option.choice == status.classname and status == status.classname %}
                            <span class="tag-status {{ status.classname }}"
                                  aria-describedby="input_{{ id }}_comment">
                                {% include "status_span.html" with status=status %}
                            </span>
                        {% endif %}
                    {% endif %}
                    <span class="tag {% if option.id in options_value %}selected{% endif %} "
                          data-id="{{ option.id }}">{{ option.description|safe }}</span>
                </li>
            {% endfor %}
        </ul>
        {% if debug %}
            <div class="debug-value">
                Rendered with value:
                <br />
                <pre>{{ value|safe }}</pre>
                Current input value:
                <br />
                <input type="text"
                       class="value"
                       name="input_{{ id }}"
                       id="input_{{ id }}"
                       value="{{ value }}" />
            </div>
        {% else %}
            <input type="hidden"
                   class="value"
                   name="input_{{ id }}"
                   id="input_{{ id }}"
                   value="{{ value }}" />
        {% endif %}
        {% include "status_span.html" with status=status status_id=id %}
        <p id="answer_{{ id }}" class="answer answer-annotation"></p>
    </div>
</div>
{% if msg %}<span class="message" aria-describedby="label_{{ id }}" tabindex="-1">{{ msg|safe }}</span>{% endif %}