{#
  SPDX-FileCopyrightText: 2015-2019 CERN.
  SPDX-License-Identifier: MIT
#}

{%- extends config.PREVIEWER_ABSTRACT_TEMPLATE %}

{%- block head %}
{{super()}}
<style>
.panel-heading {
  background-image: radial-gradient(circle farthest-corner at left top, #0B5FB1 0%, #0B5FB1 100%) !important;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  padding-top: 5px;
  padding-bottom: 5px;
}
.panel-heading-alert {
  background-image: radial-gradient(circle farthest-corner at left top, #B20000 0%, #B20000 100%) !important;
}
.panel-title {
  color: hsl(0,0%,85%);
  font-size: 14px;
}
.panel-default {
  border-color: #fff;
  border: 0;
  box-shadow: none;
}
#fullScreenMode:hover {
  background-color: rgba(0,0,200,0.5);
  border-radius: 3px;
}
</style>
<script src="{{ url_for('static', filename='js/fullscreen.js') }}" defer></script>
{%- endblock %}

{%- block panel %}
<div class="panel panel-default">
{% if error %}
  <div class="panel-heading panel-heading-alert">
    <div class="panel-title">
      <i class="fa fa-fw fa-exclamation"></i>
      {{ _(error) }}
    </div>
  </div>
{% else %}
<div class="panel-heading">
  <div class="panel-title">
    <i class="fa fa-file-zip-o"></i> {{ file.filename }}
    <div id="fullScreenMode" title="{{ _('Full screen') }}" class="pull-right"><i class="fa fa-fw fa-arrows-alt"></i></div>
  </div>
</div>
  {%- if limit_reached %}
  <div class="panel-heading panel-heading-alert">
    <div class="panel-title">
      <i class="fa fa-fw fa-exclamation"></i>
      {{ _('The previewer is not showing all the files.') }}
    </div>
  </div>
  {%- endif %}
  <div class="panel-body">
    <ul class="tree list-unstyled">
      {%- for t in tree recursive %}
      {%- set folder_identifier = t.id %}
      <li>
        {%- if t.type != 'folder' %}
          <span><i class="fa fa-file-o"></i> {{ t.name }}</span>
          <span class="pull-right">{{ t.size|filesizeformat }}</span>
        {%- else %}
          <i class="fa fa-folder"></i> <a data-toggle="collapse" href="#tree_{{ folder_identifier }}">{{ t.name }} </a>
        {%- endif %}
        {%- if t.children -%}
        <ul id="tree_{{ folder_identifier }}"
          class="collapse in">
          {{ loop(t.children) }}
        </ul>
        {%- endif %}
      </li>
      {%- endfor %}
    </ul>
  </div>
{%- endif %}
</div>
{%- endblock %}