<%def name="render_problem(problem,index,total)">
<div class="annotatable-problem" data-problem-id="${problem['problem_id']}">
    <div class="annotatable-problem-header">
        Classification Exercise: <span class="annotatable-problem-index">(${index + 1} / ${total}) </span>
    </div>
    <div class="annotatable-problem-body">
        <div class="annotatable-problem-prompt">${problem['prompt']}</div>
        <ul class="annotatable-problem-tags">
            % for tag in problem['tags']:
            <li>${tag['name']}</li>
            % endfor
        </ul>
        Explain the rationale for your tag selections:<br/>
        <textarea></textarea>
        <div class="annotatable-problem-controls">
            <button class="button annotatable-problem-save">Save</button>
            <button class="button annotatable-problem-submit">Submit</button>
            <a class="annotatable-problem-return" href="javascript:void(0);" data-discussion-id="${problem['discussion_id']}">Return to annotation</a>
        </div>
    </div>
    <div class="annotatable-problem-footer">
    </div>
</div>
</%def>