{#
 # This file is part of MedShakeEHR.
 #
 # Copyright (c) 2020
 # Bertrand Boutillier <b.boutillier@gmail.com>
 # http://www.medshake.net
 #
 # MedShakeEHR is free software: you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
 # the Free Software Foundation, either version 3 of the License, or
 # any later version.
 #
 # MedShakeEHR is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU General Public License
 # along with MedShakeEHR.  If not, see <http://www.gnu.org/licenses/>.
 #/

/##
 # Template > dropbox
 #
 # @author Bertrand Boutillier <b.boutillier@gmail.com>
 #}

{% extends "page.html.twig" %}
{% import "macroForm.html.twig" as f %}
{% block title %}{{ config.designAppName }}
  : dropbox{% endblock %}

{% block head %}
  {{ parent() }}
  <script defer="defer" src="{{ config.protocol }}{{ config.host }}{{ config.urlHostSuffixe }}/js/dropbox.js?{{ modules.base }}"></script>
{% endblock %}

{% block body %}

  <h1>Boite de dépôt</h1>

  {% if page.dropBoxesContent is empty %}
    <div class="mt-4 d-flex flex-column align-items-center justify-content-center" style="height: calc(100vh - 200px); min-height: 250px">
      <div class="mb-3">
        <i class="fas fa-inbox fa-10x text-light"></i>
      </div>
      <div class="text-muted">La boite de dépôt est vide.</div>
    </div>
  {% else %}

    <div class="row">
      <div class="col-3">

        <ul class="nav nav-tabs" id="dropboxes" role="tablist">
          {% for boxname, boxparams in page.dropBoxesParams %}
            <li class="nav-item font-weight-bold">
              <a class="nav-link{% if loop.index0 == 0 %} active{% endif %} d-flex justify-content-between align-items-center" id="{{ boxname }}-tab" data-toggle="tab" href="#{{ boxname }}" role="tab">
                <span>{{ boxparams.name }}</span>
                {% if page.dropBoxesContent[boxname]|length > 0 %}<span class="badge badge-light ml-2"  data-box="{{ boxname }}">{{ page.dropBoxesContent[boxname]|length }}</span>{% endif %}
              </a>
            </li>
          {% endfor %}
        </ul>
        <div class="tab-content border-right border-left border-bottom" id="dropBoxContent">
          {% for boxname, boxparams in page.dropBoxesParams %}
            <div class="tab-pane fade{% if loop.index0 == 0 %} show active{% endif %}" id="{{ boxname }}" role="tabpanel" aria-labelledby="{{ boxname }}-tab">

              <ul class="list-group list-group-flush">
                {% for file in page.dropBoxesContent[boxname] %}
                  <li class="list-group-item d-flex justify-content-start align-items-center cursor-pointer selectFile{% if loop.parent.loop.index0 == 0 and loop.index0 == 0 %} list-group-item-success{% endif %}" data-box="{{ boxname }}" data-filename="{{ file.filename }}">
                    <i class="far fa-file-pdf fa-3x mr-3"></i>
                    <div>
                      <span class="font-weight-bold">{{ file.filename }}</span><br>
                      <small>{{ file.size }} - {{ file.date|date('d/m/Y H:i') }}</small>
                    </div>
                    <div class="poubelle ml-auto d-none">
                      <a class="btn btn-sm btn-light" href="#" role="button"><i class="fas fa-trash"></i></a>
                    </div>
                  </li>
                {% endfor %}
              </ul>

            </div>
          {% endfor %}
        </div>

      </div>
      <div id="view" class="col-9"></div>
    </div>

  {% endif %}
{% endblock %}