{% load i18n %}

<div class="scorm-xblock {% if scorm_xblock.enable_navigation_menu %}navigation-enabled{% endif %}">
  {% if package_warnings %}
  <div class="scorm-package-warnings" role="alert">
    {% for package_warning in package_warnings %}
    <p class="scorm-package-warning">
      <span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
      {% trans package_warning %}
    </p>
    {% endfor %}
  </div>
  {% endif %}

  {% if index_page_url %} {% if scorm_xblock.has_score %}
  <p>
    (<span class="grade">{{ grade|floatformat }}</span>/{{ scorm_xblock.weight|floatformat }} {% trans "points" %})
    <span class="completion-status">{% trans completion_status %}</span>
  </p>
  {% endif %}

  <div class="scorm-content">
            {% if scorm_xblock.enable_fullscreen_button %}
            <div class="fullscreen-controls">
                <button class="enter-fullscreen">{% trans "Fullscreen" %}</button>
                <button class="exit-fullscreen">{% trans "Exit fullscreen" %}</button>
            </div>
            {% endif %}

            <div class="scorm-panel">

                {% if scorm_xblock.enable_navigation_menu and not scorm_xblock.popup_on_launch%}
                <div class="navigation-pane" style="width: {% if scorm_xblock.navigation_menu_width %}{{scorm_xblock.navigation_menu_width}}px{% else %}30%{% endif %};">
                    <h4>Table of contents</h4>

                    <ul>
                        {{ navigation_menu|safe }}
                    </ul>
                </div>
                {% endif %}
                <div class="scorm-pane"  style="width: {% if scorm_xblock.width %}{{ scorm_xblock.width }}px{% else %}100%{% endif %}; height: {% if scorm_xblock.height %}{{ scorm_xblock.height }}px{% else %}450{% endif %};">
            <div class="popup-wrapper">
                <button class="popup-launcher">
                    {% trans "Launch unit in new window" %}
                    <span class="icon fa fa-external-link"></span>
                </button>
            </div>
            <iframe
            class="scorm-embedded"
            src="{{ index_page_url }}"
            width="100%"
            height="100%"
            >
        </iframe>
    </div>
</div>
    {% elif message %}
    <p>{{ message }}</p>
    {% endif %} {% if can_view_student_reports %}
    <div class="scorm-reports">
      <button class="view-reports reports-togglable">
        {% trans "View SCORM reports" %}
      </button>
      <span class="reports-togglable reports-togglable-off">
        <input
          type="text"
          placeholder="Student username or email"
          class="search-students"
        />
        <button class="reload-report reports-togglable-off" alt="reload report">Reload</button>
        <div class="report"></div>
      </span>
    </div>
    {% endif %}
  </div>
</div>