{% load i18n %}
<h3 class="hd hd-3 problem-header"
    id="{{ short_id }}-problem-title"
    aria-describedby="{{ id }}-problem-progress"
    tabindex="-1">{{ problem.name }}</h3>
<div class="problem-progress" id="{{ id }}-problem-progress"></div>
<div class="problem">
    {{ problem.html|safe }}
    <div class="action">
        <input type="hidden" name="problem_id" value="{{ problem.name }}" />
        {% if demand_hint_possible %}
            <div class="problem-hint">
                {% include "problem_notifications.html" with notification_name='hint' notification_type='problem-hint' notification_icon='fa-question' notification_message='' %}
            </div>
        {% endif %}
        <div class="problem-action-buttons-wrapper">
            {% if demand_hint_possible %}
                <span class="problem-action-button-wrapper">
                    <button type="button"
                            class="hint-button problem-action-btn btn-link btn-small"
                            data-value="{% trans 'Hint' as hint_val %}{{ hint_val|force_escape }}"
                            {% if not should_enable_next_hint %}disabled{% endif %}>
                        {% trans "Hint" as hint_text %}{{ hint_text|force_escape }}
                    </button>
                </span>
            {% endif %}
            {% if save_button %}
                <span class="problem-action-button-wrapper">
                    <button type="button"
                            class="save problem-action-btn btn-link btn-small"
                            data-value="{% trans 'Save' as save_val %}{{ save_val|force_escape }}">
                        <span aria-hidden="true">{% trans "Save" as save_text %}{{ save_text|force_escape }}</span>
                        <span class="sr">{% trans "Save your answer" as save_sr %}{{ save_sr|force_escape }}</span>
                    </button>
                </span>
            {% endif %}
            {% if attempts_used and reset_button %}
                <span class="problem-action-button-wrapper">
                    <button type="button"
                            class="reset problem-action-btn btn-link btn-small"
                            data-value="{% trans 'Reset' as reset_val %}{{ reset_val|force_escape }}">
                        <span aria-hidden="true">{% trans "Reset" as reset_text %}{{ reset_text|force_escape }}</span><span class="sr">{% trans "Reset your answer" as reset_sr %}{{ reset_sr|force_escape }}</span>
                    </button>
                </span>
            {% endif %}
            {% if answer_available %}
                <span class="problem-action-button-wrapper">
                    <button type="button"
                            class="show problem-action-btn btn-link btn-small"
                            aria-describedby="{{ short_id }}-problem-title">
                        <span class="show-label">{% trans "Show answer" as show_ans %}{{ show_ans|force_escape }}</span>
                    </button>
                </span>
            {% endif %}
        </div>
        <div class="submit-attempt-container">
            <button type="button"
                    class="submit btn-brand"
                    data-submitting="{{ submit_button_submitting }}"
                    data-value="{{ submit_button }}"
                    data-should-enable-submit-button="{{ should_enable_submit_button }}"
                    aria-describedby="submission_feedback_{{ short_id }}"
                    {% if not should_enable_submit_button %}disabled{% endif %}>
                <span class="submit-label">{{ submit_button }}</span>
            </button>
            {% if submit_disabled_cta %}
                {% if submit_disabled_cta.event_data %}
                    <button class="submit-cta-link-button btn-link btn-small"
                            onclick="emit_event('{{ submit_disabled_cta.event_data }}')">
                        {{ submit_disabled_cta.link_name }}
                    </button>
                    <span class="submit-cta-description"
                          tabindex="0"
                          role="note"
                          aria-label="description">
                        <span data-tooltip="{{ submit_disabled_cta.description }}"
                              data-tooltip-show-on-click="true"
                              class="fa fa-info-circle fa-lg"
                              aria-hidden="true"></span>
                    </span>
                    <span class="sr">({{ submit_disabled_cta.description }})</span>
                {% else %}
                    <form class="submit-cta"
                          method="post"
                          action="{{ submit_disabled_cta.link }}">
                        {% if submit_disabled_cta.link %}
                            <input type="hidden"
                                   id="csrf_token"
                                   name="csrfmiddlewaretoken"
                                   value="{{ csrf_token }}">
                            {% for form_name, form_value in submit_disabled_cta.form_values.items %}
                                <input type="hidden" name="{{ form_name }}" value="{{ form_value }}">
                            {% endfor %}
                            <button class="submit-cta-link-button btn-link btn-small">{{ submit_disabled_cta.link_name }}</button>
                        {% endif %}
                        <span class="submit-cta-description"
                              tabindex="0"
                              role="note"
                              aria-label="description">
                            <span data-tooltip="{{ submit_disabled_cta.description }}"
                                  data-tooltip-show-on-click="true"
                                  class="fa fa-info-circle fa-lg"
                                  aria-hidden="true"></span>
                        </span>
                        <span class="sr">({{ submit_disabled_cta.description }})</span>
                    </form>
                {% endif %}
            {% endif %}
            <div class="submission-feedback {% if submit_disabled_cta %}cta-enabled{% endif %}"
                 id="submission_feedback_{{ short_id }}">
                {% comment %} When attempts are not 0, the CTA above will contain a message about the number of used attempts {% endcomment %}
                {% if attempts_allowed and not submit_disabled_cta or attempts_allowed and attempts_used == 0 %}
                    {% filter force_escape %}
                        {% blocktrans count num_total=attempts_allowed %}You have used {{ attempts_used }} of {{ num_total }} attempt.{% plural %}You have used {{ attempts_used }} of {{ num_total }} attempts{% endblocktrans %}
                    {% endfilter %}
                {% endif %}
                {% if grading_method %}
                    <div>{% trans "Grading method:" as grading_text %}{{ grading_text|force_escape }} {{ grading_method }}</div>
                {% endif %}
                <span class="sr">{% trans "Some problems have options such as save, reset, hints, or show answer. These options follow the Submit button." as options_sr %}{{ options_sr|force_escape }}</span>
            </div>
        </div>
    </div>
    {% include "problem_notifications.html" with notification_type='warning' notification_icon='fa-exclamation-circle' notification_name='gentle-alert' notification_message='' %}
    {% if answer_notification_type %}
        {% if answer_notification_type == 'correct' %}
            {% include "problem_notifications.html" with notification_type='success' notification_icon='fa-check' notification_name='submit' is_hidden=False notification_message=answer_notification_message %}
        {% endif %}
        {% if answer_notification_type == 'incorrect' %}
            {% include "problem_notifications.html" with notification_type='error' notification_icon='fa-close' notification_name='submit' is_hidden=False notification_message=answer_notification_message %}
        {% endif %}
        {% if answer_notification_type == 'partially-correct' %}
            {% include "problem_notifications.html" with notification_type='success' notification_icon='fa-asterisk' notification_name='submit' is_hidden=False notification_message=answer_notification_message %}
        {% endif %}
        {% if answer_notification_type == 'submitted' %}
            {% include "problem_notifications.html" with notification_type='general' notification_icon='fa-info-circle' notification_name='submit' is_hidden=False notification_message=answer_notification_message %}
        {% endif %}
    {% endif %}
    {% if has_saved_answers %}
        {% include "problem_notifications.html" with notification_type='warning' notification_icon='fa-save' notification_name='save' notification_message=save_message is_hidden=False %}
    {% else %}
        {% include "problem_notifications.html" with notification_type='warning' notification_icon='fa-save' notification_name='save' notification_message=save_message is_hidden=True %}
    {% endif %}
    {# xss-lint: disable=django-trans-missing-escape #}
    {% trans "Answers are displayed within the problem" as notification_message %}
    {% with notification_message=notification_message|force_escape %}
        {% include "problem_notifications.html" with notification_type='general' notification_icon='fa-info-circle' notification_name='show-answer' notification_message=notification_message is_hidden=True %}
    {% endwith %}
</div>
<script>
    function emit_event(message) {
        parent.postMessage(message, '*');
    }
</script>