{% macro m_breadcrumbs2(breadcrumbs) %}
  {% for obj in breadcrumbs[0:-1] %}
    <a href="{{ obj.path }}">{{ obj.label }}</a>
    <span class="divider">/</span>
  {% endfor %}
  {{ breadcrumbs[-1].label }}
{% endmacro %}

<script>
  var document_data = [];
</script>

{% macro m_docs_table(objects, edit=True) %}
  <div type="button" class="upload-files-btn">
    <i class="glyphicon glyphicon-plus"></i><a style="text-decoration:none;color:white;" href="#modal-upload-files"
                                               data-toggle="modal"> Upload file(s)</a>
  </div>

  <div type="button" class="add-folder-btn">
    <i class="glyphicon glyphicon-plus"></i><a style="text-decoration:none;color: gray;" href="#modal-new-folder"
                                               data-toggle="modal"> New folder</a>
  </div>

  <hr>
  {%- if objects %}
    <form action="{{ url_for('.change_view_style', folder_id=folder.id, community_id=folder.community.slug) }}"
          method="POST">
      {{ csrf.field() }}
      <div style="float:right;margin-left: 12px;position: relative;
top: -65px;" class="btn-group" role="group" aria-label="...">
        <button type="submit" class="btn btn-default" name="view_style" value="thumbnail_view"><span
            class="glyphicon glyphicon-th-list" aria-hidden="true"></span></button>
        <button type="submit" class="btn btn-default" name="view_style" value="gallery_view"><span
            class="glyphicon glyphicon-th-large" aria-hidden="true"></span></button>
      </div>
    </form>

    <form name="folder-listing" style="margin-bottom: 0;" method="POST">
      {{ csrf.field() }}
      {%- if edit %}
        <div class="btn-toolbar" style="margin-bottom: 0;">
          <div class="btn-group" style="margin-right: 20px;display:none;">
            <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
              <i class="fa fa-check"></i>
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a class="doc-select-all" href="#select-all">{{ _("Select all") }}</a></li>
              <li><a class="doc-unselect-all" href="#unselect-all">{{ _("Unselect all") }}</a></li>
            </ul>
          </div>
          <div class="btn-group" style="margin-right: 20px;position: relative;
top: -8px;margin-bottom: -47px;">
            <input id="filter" type="text" class="form-control" placeholder="{{ _('Filter...') }}"
                   style="margin-bottom: 0;">
          </div>

        </div>
      {% endif %}
      &nbsp;
      {% if edit %}
        <span id="horizontal-doc-menu" class="document-horizontal-menu">
        {%- for action in actions.for_category('documents:folder-listing') %}
          <div class="btn-group">
              {{ action.render() }}
            </div>
        {%- endfor %}
        </span>
      {% endif %}

      <br><br>
      <table style="background: white;position:relative;margin-top: -54px;"
             class="document-table-thumbnail table table-striped table-condensed" id="objects-table">
        <thead>
        <tr style="color: #919191;
border-bottom: 2px solid ghostwhite;">
          <th style="width: 1%;"><input class="doc-check-all" style="position: relative;top: 2px;left: -4px;"
                                        type="checkbox">
          </th>
          <th class="hide">type</th>
          <th class="hide">title for sorting</th>
          <th style="width: 39%;">{{ _("Title") }}</th>
          <th class="hide">for size</th>
          <th style="width: 20%;">{{ _("Size") }}</th>
          <th class="hide">Last Name</th>
          <th class="hide">First Name</th>
          <th style="width: 25%;">{{ _("Owner") }}</th>
          <th class="hide">date</th>
          <th style="width: 25%;">{{ _("Age") }}</th>
          <th></th>
          <th class="hide"></th>
        </tr>
        </thead>

        <tbody>
        {%- for obj in objects %}
          <tr>
            <td><input id="check_{{ obj.id }}" style="position: relative;top: 2px;" type="checkbox"
                       name="object-selected"
                       value="{{ obj.sbe_type }}:{{ obj.id }}"></td>

            <td class="hide">{{ obj.object_type }}</td>

            <td class="hide">{{ obj.title }}</td>

            <td>
              {% if obj.object_type == 'abilian.sbe.apps.documents.models.Folder' %}
                <span style="position: relative;left: 7px;">
                  <a style="color: #797C7E;" href="{{ url_for(obj) }}"><i class="fa fa-folder-o document-folder-icon"
                                                                          aria-hidden="true"></i></a></span>
                <div class="numberCircle"><span>{{ obj.filtered_children|length }}</span></div>
              {% else %}
                {% set icon_src = url_for(".document_preview_image",
                      community_id=g.community.slug, doc_id=obj.id,
                      size=obj.preview_size) %}
                <a style="color: #797C7E;" href="{{ url_for(obj) }}"><img
                    class="document-preview"
                    style="background-image: url('{{ icon_src }}');"
                    src="" alt="" data-page="0"/></a>
              {% endif %}
              {%- if obj.object_type == 'folder' %}<i>
                {{ obj.filtered_children|length }}</i>
              {%- endif %}
              <a style="position: relative;top: 3px;left: 58px;"
                 href="{{ url_for(obj) }}">{{ obj.title|truncate(32, False, '...', 0) }}</a>
            </td>

            <td class="hide">
              {%- if obj.is_document %}
                {{ obj.content_length }}
              {% else %}
                0
              {%- endif %}
            </td>

            <td>
              {%- if obj.is_document %}
                {{ obj.content_length|filesize }}
              {%- endif %}
            </td>

            {% set owner = obj.owner %}
            <td class="hide">{{ owner.last_name }}</td>
            <td class="hide">{{ owner.first_name }}</td>
            <td>
              <a href="{{ url_for('social.user', user_id=owner.id) }}"
                 title="{{ owner.name }}"><img
                  alt="{{ owner.name }}"
                  src="{{ user_photo_url(owner, size=40) }}"
                  style="vertical-align: middle;border-radius: 22px;"></a>
            </td>

            <td class="hide">{{ obj.created_at.isoformat() }} </td>

            <td>{{ obj.created_at|age(add_direction=False) }}</td>

            <td>
              <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                        data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="true">
                  <span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
                </button>
                <ul class="dropdown-menu document-thumbnail-menu" aria-labelledby="dropdownMenu1">
                  {%- if obj.object_type == 'abilian.sbe.apps.documents.models.Folder' %}
                    <li>
                      <a href="{{ url_for('.permissions', community_id=obj.community.slug, folder_id=obj.id) }}"><i
                          class="glyphicon glyphicon-lock"></i> {{ _('Permissions') }}</a>
                    </li>
                    <li>
                      <a href="{{ url_for('.descendants_view', community_id=obj.community.slug, folder_id=obj.id) }}"><i
                          class="fa fa-code-fork fa-rotate-90"></i>
                        {{ _('View descendants') }}</a>
                    </li>
                  {% endif %}
                  <li>
                    <a onclick="email_send_document(this)" id="{{ obj.id }}" href="#modal-send-by-email"
                       data-toggle="modal"><i class="fa fa-envelope-o" aria-hidden="true"></i>
                      {{ _('Send by mail') }}</a>
                  </li>
                  {% if not obj.content_type|length %}
                    <li>
                      <button type="button" class="document-folder-download" onclick="download_folder(this)"
                              style="margin-top: -25px;margin-bottom: -28px;" name="action"
                              value="{{ url_for('.folder_post', community_id=obj.community.slug, folder_id=obj.id) }}"
                              title="Download"><i class="fa fa-download" aria-hidden="true"></i> {{ _('Download') }}
                      </button>
                    </li>
                    <li><a onclick="edit_folder(this)" id="{{ obj.id }}"
                           data-toggle="modal"><i class="fa fa-pencil" aria-hidden="true"></i>
                      {{ _('Edit') }}</a>
                    </li>
                  {% else %}
                    <li>
                      <a
                          href="{{ url_for('.document_download', community_id=obj.community.slug, doc_id=obj.id, attach=True) }}"><i
                          class="fa fa-download" aria-hidden="true"></i> {{ _('Download') }}</a>
                    </li>
                    <li>
                      <a onclick="edit_document(this)" id="{{ obj.id }}"
                         data-toggle="modal"><i class="fa fa-pencil" aria-hidden="true"></i> {{ _('Edit') }}
                      </a>
                    </li>
                  {% endif %}
                  <li>
                    <a onclick="move_document(this)" id="{{ obj.id }}" href="#modal-move-files" data-toggle="modal"><i
                        class="fa fa-arrows" aria-hidden="true"></i>
                      {{ _('Move') }}</a>
                  </li>
                  {%- if obj.object_type == 'abilian.sbe.apps.documents.models.Folder' %}
                    <li>
                      <a name="{{ obj.title }}"
                         id="{{ url_for('.folder_post', community_id=obj.community.slug, folder_id=obj.id) }}"
                         onclick="delete_folder(this)" href="#modal-delete-folder" data-toggle="modal"><i
                          class="fa fa-trash-o" aria-hidden="true"></i>
                        {{ _('Delete') }}</a></li>
                  {% else %}
                    <li>
                      <a onclick="replace_document(this)" id="{{ obj.id }}" href="#modal-upload-new-version"
                         data-toggle="modal"><i class="fa fa-refresh" aria-hidden="true"></i>
                        {{ _('Replace') }}</a>
                    </li>
                    <li>
                      <a onclick="delete_document(this)" id="{{ obj.id }}" href="#modal-delete"
                         data-toggle="modal"><i
                          class="fa fa-trash-o" aria-hidden="true"></i>
                        {{ _('Delete') }}</a>
                    </li>
                  {% endif %}
                </ul>
              </div>
            </td>
            <td class="hide">
              <input type="hidden" id="edit_url{{ obj.id }}"
                     value="{{ url_for('.document_edit', doc_id=obj.id, folder_id=folder.id, community_id=obj.community.slug) }}"/>
              <input type="hidden" id="editfolder_url{{ obj.id }}"
                     value="{{ url_for('.folder_post', folder_id=obj.id, community_id=obj.community.slug) }}"/>
              <input type="hidden" id="replace_url{{ obj.id }}"
                     value="{{ url_for('.document_upload', doc_id=obj.id, community_id=obj.community.slug) }}"/>
              <input type="hidden" id="email_url{{ obj.id }}"
                     value="{{ url_for('.document_send', doc_id=obj.id, community_id=obj.community.slug) }}"/>
              <input type="hidden" id="delete_url{{ obj.id }}"
                     value="{{ url_for('.document_delete', doc_id=obj.id, community_id=obj.community.slug) }}"/>
              <input type="hidden" id="title{{ obj.id }}" value="{{ obj.title }}"/>
              <input type="hidden" id="description{{ obj.id }}"
                     value="{% if obj.description %}{{ obj.description }}{% else %}{% endif %}"/>
              <input type="hidden" id="community{{ obj.id }}" value="{{ obj.community.slug }}"/>
            </td>
          </tr>
        {%- endfor %}
        </tbody>

        <tfoot>
        <tr style="color: #919191;
border-top: 2px solid ghostwhite;">
          <th></th>
          <th class="hide">type</th>
          <th class="hide">title for sorting</th>
          <th>{{ _("Title") }}</th>
          <th class="hide">for size</th>
          <th>{{ _("Size") }}</th>
          <th class="hide">Last Name</th>
          <th class="hide">First Name</th>
          <th>{{ _("Owner") }}</th>
          <th class="hide">date</th>
          <th>{{ _("Age") }}</th>
          <th></th>
          <th class="hide"></th>
        </tr>
        </tfoot>
      </table>

      <script>
        {%- set data = {
            'deleteConfirmMsg': _("Delete selected elements?"),
         } %}
        var CONFIG = {{ data | tojson | safe }};
      </script>
    </form>

    <form id="folder_content_download" action="" method="post">
      {{ csrf.field() }}
      <button class="document-folder-download" id="document-folder-download"
              style="margin-top: 1px;margin-bottom:0px;display:none;" name="action" value="download" title="Download"><i
          class="fa fa-download" aria-hidden="true"></i> {{ _('Download') }}</button>
    </form>

    <script>
      function edit_document(obj) {
        var title = $("#title" + obj.id).val();
        var description = $("#description" + obj.id).val();
        var community = $("#community" + obj.id).val();
        var doc_url = $("#edit_url" + obj.id).val();

        $("#modal-edit-form").attr("action", doc_url);
        $(".form-document-title").val(title);
        $(".form-document-description").val(description);
        $('#modal-edit').modal('show');
      }

      function edit_folder(obj) {
        var title = $("#title" + obj.id).val();
        var description = $("#description" + obj.id).val();
        var community = $("#community" + obj.id).val();
        var doc_url = $("#editfolder_url" + obj.id).val();

        $("#modal-editfolder-form").attr("action", doc_url);
        $(".form-folder-title").val(title);
        $(".form-folder-description").val(description);
        $('#folder-modal-edit').modal('show');
      }

      function email_send_document(obj) {
        var doc_url = $("#email_url" + obj.id).val();
        $("#modal-email-form").attr("action", doc_url);
      }

      function replace_document(obj) {
        var doc_url = $("#replace_url" + obj.id).val();
        $(".modal-replacedoc-form").attr("action", doc_url);
      }

      function download_folder(e) {
        $("#folder_content_download").attr("action", e.value);
        $("#document-folder-download").trigger("click");
      }

      function delete_document(obj) {
        var title = $("#title" + obj.id).val();
        var doc_url = $("#delete_url" + obj.id).val();
        $("#modal-delete-document").attr("action", doc_url);
        $("#delete-doc-title").html(title);
      }

      function delete_folder(e) {
        var title = e.name;
        var folder_url = e.id;
        $("#modal-delete-folders").attr("action", folder_url);
        $("#delete-folder-title").html(title);
      }

      function move_document(obj) {
        $(".doc-check-all").prop("checked", false);
        $(":checkbox").prop("checked", false);
        $("#check_" + obj.id).prop('checked', true);
      }

      $('input[type="checkbox"]').change(function () {
        if ($(":checkbox:checked").length > 0) {
          $("#horizontal-doc-menu").show();
        } else {
          $("#horizontal-doc-menu").hide();
        }
      });
    </script>

    {%- deferJS %}
      <script>
        require(['Abilian', 'SBEFolderListingSetup'],
            function (Abilian, setupFolderListing) {
              Abilian.fn.onAppInit(setupFolderListing);
            });
      </script>
    {%- enddeferJS %}

  {%- else %}
    <p>
      <em>{{ _("This folder is currently empty. Why don't you upload some content?") }}</em>
    </p>
  {%- endif %}


  <script>
    $(".doc-check-all").change(function () {
      if ($(this).prop('checked') === true) {
        $(":checkbox").prop("checked", true);
      } else {
        $(":checkbox").prop("checked", false);
        if ($(":checkbox:checked").length === 0) {
          $("#horizontal-doc-menu").hide();
        }
      }
    });
  </script>

  <div style="clear: both;"></div>

  {% if objects %}
    {% set obj = objects[0] %}
    {% include "documents/_modals_document_edit.html" %}
    {% include "documents/_modals_document_send_by_email.html" %}
    {% include "documents/_modals_document_upload_new_version.html" %}
    {% include "documents/_modals_document_delete.html" %}
    {% include "documents/_modals_folder_delete.html" %}
    {% include "documents/_modals_folder_edit.html" %}
  {% endif %}

{% endmacro %}
