<form class="annotation-input">
<div class="script_placeholder" data-src="/static/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">${tag_prompt}</div>
    <ul class="tags">
    % for option in options:
        <li>
            % if has_options_value:
                % if all([c == 'correct' for c in option['choice'], status]):
                <span class="tag-status correct" id="status_${id}" aria-describedby="input_${id}_comment"><span class="sr">Status: Correct</span></span>
                % elif all([c == 'partially-correct' for c in option['choice'], status]):
                <span class="tag-status partially-correct" id="status_${id}" aria-describedby="input_${id}_comment"><span class="sr">Status: Partially Correct</span></span>
                % elif all([c == 'incorrect' for c in option['choice'], status]):
                <span class="tag-status incorrect" id="status_${id}" aria-describedby="input_${id}_comment"><span class="sr">Status: Incorrect</span></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

    % if status == 'unsubmitted':
    <span class="unanswered" style="display:inline-block;" id="status_${id}" aria-describedby="input_${id}"><span class="sr">Status: Unanswered</span></span>
    % elif status == 'incomplete':
    <span class="incorrect" id="status_${id}" aria-describedby="input_${id}"><span class="sr">Status: Incorrect</span></span>
    % elif status == 'incorrect' and not has_options_value:
    <span class="incorrect" id="status_${id}" aria-describedby="input_${id}"><span class="sr">Status: Incorrect</span></span>
    % endif

    <p id="answer_${id}" class="answer answer-annotation"></p>
</div>
</form>

% if msg:
<span class="message">${msg|n}</span>
% endif

