{% extends "reviewpanel/base.html" %}
{% load static %}

{% block vpwidth %}{% if template.min_width %}{{ template.min_width }}{% else %}{{ block.super }}{% endif %}{% endblock %}

{% block title %}{{ presentation.form.name }}{% endblock %}

{% block style %}
  <link rel="stylesheet" href="{% static "css/reviewpanel.css" %}">
  <link rel="stylesheet" href="{% static "css/submission.css" %}">
  <link rel="stylesheet" href="{% static "css/markdown.css" %}">
  <style>
    div.pagecontent {
      position: relative;
      top: 80px;
      width: 100%;
    {% if template.min_width %}min-width: {{ template.min_width }}px;{% endif %}
    {% if template.max_width %}max-width: {{ template.max_width }}px;{% endif %}
      margin: 0 auto;
    }
    
  {% for section, refs, selectors in sections %}
    div#section_{{ section.name }} {
    {% if section.font %}font: {{ section.font }};{% endif %}
      padding-top: {{ section.y }}%;
      left: {{ section.x }}%;
      width: {{ section.w }}%;
    }
    
    div#section_{{ section.name }} div.wrapper {
    {% if section.h %}
      aspect-ratio: {{ section.w }}/{{ section.h }};
    {% endif %}
    {% if section.scroll or not section.wrap %}
      {% if section.scroll %}
        overflow-{% if section.wrap %}y{% else %}x{% endif %}: scroll;
      {% endif %}
      {% if not section.wrap %}white-space: nowrap;{% endif %}
    {% endif %}
    }
    div#section_{{ section.name }} div.wrapper div.content {
      {% if section.h %}bottom: 0;{% endif %}
    }
    {% if not section.wrap and not section.scroll %}
    div#section_{{ section.name }} div.wrapper div.content div {
      overflow-x: hidden;
      text-overflow: ellipsis;
    }
    {% endif %}
  {% endfor %}
{{ presentation.custom_css|striptags|safe }}
  </style>
{% endblock %}

{% block extrajs %}
  <script src="{% static "js/submission.js" %}"></script>
{% endblock %}

{% block body_attributes %}{% endblock %}

{% block content %}
<div id="top" class="pagecontent">

{% if presentation.show_stats %}
<div id="topleft">
  scored: {{ stats.scored }} / {{ stats.total }}
  {% if stats.skipped %}({{ stats.skipped }} skipped){% endif %}
</div>
{% endif %}

<div id="topcenter">
{% if cohort %}
  {% with pslug=presentation.form.program.slug fslug=presentation.form.slug %}
  <a href="{% url 'plugins:reviewpanel:form_index' pslug fslug %}">
    previous scores
  </a>
  {% endwith %}
{% endif %}
</div>

<div id="topright">
  <a href="{% url 'logout' %}?next=/">log out</a>
</div>

</div>

<div id="content" class="pagecontent markdown-body">
{% if submission %}
  {% for section, references, selectors in sections %}
    <div id="section_{{ section.name }}" class="section"
         style="{{ section.inline_style }}">
      <div class="wrapper">
        <div class="content">
          {% if section.name == presentation.inputs_section %}
            {% include "./submission_inputs.html" %}
          {% else %}
            {% include "./submission_section.html" %}
          {% endif %}
        </div>
      </div>
    </div>
  {% endfor %}
{% else %}
  The form '{{ presentation.form }}' doesn't have any submitted apps to preview.
{% endif %}
</div>

<div id="modal">
  <img class="modal-content">
</div>
{% endblock %}
