<%namespace name='static' file='static_content.html'/>
<h2 class="problem-header">
  ${ problem['name'] }
  % if problem['weight'] != 1 and problem['weight'] != None:
    : ${ problem['weight'] } points
  % endif
</h2>

<section class="problem">
  ${ problem['html'] }

  <section class="action">
    <input type="hidden" name="problem_id" value="${ problem['name'] }">

    % if check_button:
    <input class="check" type="button" value="${ check_button }">
    % endif
    % if reset_button:
    <input class="reset" type="button" value="Reset">
    % endif
    % if save_button:
    <input class="save" type="button" value="Save">
    % endif
    % if answer_available:
    <input class="show" type="button" value="Show Answer">
    % endif
    % if attempts_allowed :
    <section class="submission_feedback">
    You have used ${ attempts_used } of ${ attempts_allowed } submissions
    </section>
    % endif
  </section>
</section>

<%block name="js_extra">
<script type="text/javascript" charset="utf-8">
  $(function(){
      // this should be brought back into problems
      $('.longform').hide();
      $('.shortform').append('<a href="#" class="full">See full output</a>');

      $('.full').click(function() {
        $(this).parent().siblings().slideToggle();
        $(this).parent().parent().toggleClass('open');
        var text = $(this).text() == 'See full output' ? 'Hide output' : 'See full output';
        $(this).text(text);
        return false;
      });

      $('.collapsible section').hide()
      $('.collapsible header a').click(function() {
        $(this).parent().siblings().slideToggle();
        $(this).parent().parent().toggleClass('open');
        return false
      });
    });
</script>
</%block>