{% load i18n %}
{% spaceless %}
<!--
  Hosts the frontend templates for both the new and old ORA experiences.
  If the new views are not enabled, `.ora-view` will be hidden, otherwise, `.ora-legacy-view`
  will be hidden.
-->
<!-- Hotjar Tracking Code for https://www.edx.org/ -->
<script>
const isMobile = window.navigator.userAgent.includes("org.edx.mobile");
if(!isMobile){
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:{{hotjar_site_id}},hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
}
</script>
<div class="wrapper wrapper--xblock wrapper--openassessment theme--basic">
  <!--Template for legacy ORA UI (will not co-exist with .ora-view)-->
  <div class="openassessment problem">
    <div class="wrapper--grid">
      <div class="openassessment-initial-wrapper" id="ora-legacy-view">
        {% if title %}
        <h3 class="openassessment__title problem__header">{% trans title %}</h3>
        {% endif %}

        <div class="wrapper-openassessment__message">
          {% block message %}
          <div class="openassessment__message message">
            <div class="message__content">
              <p>
                {% trans "This assignment has several steps. In the first step, you'll provide a response to the prompt. The other steps appear below the Your Response field." %}
              </p>
            </div>
          </div>
          {% endblock %}
        </div>

        <ol class="openassessment__steps">
          {% for assessment in rubric_assessments %}
          <li
            class="{{ assessment.class_id }} openassessment__steps__step is--loading"
          >
            <header class="step__header ui-slidable__container">
              <h4 class="step__title">
                <button
                  class="ui-slidable"
                  aria-expanded="false"
                  aria-describedby="oa_step_status oa_step_deadline"
                  disabled
                >
                  <span class="step__counter"></span>
                  <span class="wrapper--copy">
                    <span class="step__label"
                      >{% trans assessment.title %}</span
                    >
                  </span>
                </button>
              </h4>
              <span class="step__status">
                <span id="oa_step_status" class="step__status__value">
                  <span
                    class="icon fa fa-spinner fa-spin"
                    aria-hidden="true"
                  ></span>
                  <span class="copy">{% trans "Loading" %}</span>
                </span>
              </span>
            </header>
          </li>
          {% endfor %}
        </ol>
      </div>

      <div class="openassessment-initial-wrapper" id="ora-mfe-view">
        <div class="ora-loading">Loading Open Response Assessment...</div>
        <iframe
          title="title"
          allow="microphone *; camera *; midi *; geolocation *; encrypted-media *, clipboard-write *"
          frameborder="0"
          style="width: 100%; display: block;"
        ></iframe>
        {% if leaderboard_ui_model %}
        <ol class="openassessment__steps">
          <li
            class="{{ leaderboard_ui_model.class_id }} openassessment__steps__step is--loading"
          >
            <header class="step__header ui-slidable__container">
              <h4 class="step__title">
                <button
                  class="ui-slidable"
                  aria-expanded="false"
                  aria-describedby="oa_step_status oa_step_deadline"
                  disabled
                >
                  <span class="step__counter"></span>
                  <span class="wrapper--copy">
                    <span class="step__label"
                      >{% trans leaderboard_ui_model.title %}</span
                    >
                  </span>
                </button>
              </h4>
              <span class="step__status">
                <span id="oa_step_status" class="step__status__value">
                  <span
                    class="icon fa fa-spinner fa-spin"
                    aria-hidden="true"
                  ></span>
                  <span class="copy">{% trans "Loading" %}</span>
                </span>
              </span>
            </header>
          </li>
        </ol>
        {% endif %}
      </div>

      {% if show_staff_area %}
      <div class="openassessment__staff-area"></div>
      {% endif %}
    </div>
  </div>
  <div class="sr reader-feedback" aria-live="polite"></div>
</div>
{% endspaceless %}
