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

{% block style %}
  <style>
    div.par {
      margin-bottom: 16px;
    }
    body {
      font: 100% sans-serif;
      padding: 0 16px;
    }
    
    div#content {
      position: relative;
      top: 100px;
      width: 100%;
    {% if template.max_width %}max-width: {{ template.max_width }}px;{% endif %}
      margin: 0 auto;
    }
    
    div.section {
      position: absolute;
      padding-bottom: 16px;
    }
    div.section div.content {
      width: 100%;
      height: 100%;
    }
    
  {% for section in sections %}
    div#section_{{ section.name }} {
    {% if section.font %}font: {{ section.font }};{% endif %}
      padding-top: {{ section.y }}%;
      left: {{ section.x }}%;
      width: {{ section.w }}%;
    {% if section.h %}
      aspect-ratio: {{ section.w }}/{{ section.h }};
    {% endif %}
    }
  {% if section.scroll or not section.wrap %}
    div#section_{{ section.name }} div.content {
    {% if section.scroll %}
      overflow-{% if section.wrap %}y{% else %}x{% endif %}: scroll;
    {% endif %}
    {% if not section.wrap %}white-space: nowrap;{% endif %}
    {% if not section.wrap and not section.scroll %}
      overflow-x: hidden;
      text-overflow: ellipsis;
    {% endif %}
    }
  {% endif %}
  {% endfor %}
  </style>
{% endblock %}

{% block content %}
<div id="content">
  {% for section in sections %}
    <div id="section_{{ section.name }}" class="section"
         style="{{ section.inline_style }}">
      <div class="content">
        {% include "./submission_section.html" %}
      </div>
    </div>
  {% endfor %}
</div>
{% endblock %}
