<%! from openedx.core.djangolib.markup import HTML %>
<div class="annotation-input">
<div class="script_placeholder" data-src="${STATIC_URL}js/capa/annotationinput.js"/>

<div class="annotation-header">
    ${title}

    % 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}</div>
    <div class="block block-comment">${comment}</div>

    <div class="block">${comment_prompt}</div>
    <textarea class="comment" id="input_${id}_comment" name="input_${id}_comment" aria-describedby="answer_${id}">${comment_value|h}</textarea>

    <div class="block" id="label_${id}">${tag_prompt}</div>
    <ul class="tags">
    % for option in options:
        <li>
            % if has_options_value:
                % if all([c == status.classname for c in option['choice'], status]):
                <span class="tag-status ${status.classname}" aria-describedby="input_${id}_comment">
                    <%include file="status_span.html" args="status=status"/>
                </span>
                % endif
            % endif

            <span class="tag
            % if option['id'] in options_value:
                selected
            % endif
            " data-id="${option['id']}">
                ${option['description']}
            </span>
        </li>
    % endfor
    </ul>

    % if debug:
    <div class="debug-value">
        Rendered with value:<br/>
        <pre>${value|h}</pre>
        Current input value:<br/>
        <input type="text" class="value" name="input_${id}" id="input_${id}" value="${value|h}" />
    </div>
    % else:
        <input type="hidden" class="value" name="input_${id}" id="input_${id}" value="${value|h}" />
    % endif

    <%include file="status_span.html" args="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">${HTML(msg)}</span>
% endif
