{% 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">
            <input id="filter" type="text" class="form-control" placeholder="{{ _('Filter...') }}"
                   style="margin-bottom: 0;">
          </div>

        </div>
      {% endif %}

      {% 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 %}

      <div class="row">
        {% set cnt = [1] %}
        {%- for obj in objects %}
          {% if cnt[0]%5 == 0 %}
            {% if cnt.append(cnt.pop() + 2) %}{% endif %}
            </div>
            <div class="row">
          {% else %}
            {% if cnt.append(cnt.pop() + 1) %}{% endif %}
          {% endif %}
          <div class="col-lg-3 col-md-4 col-sm-5 col-xs-10 gallery_element">
            {% if obj.content_type %}
              {% set content_type = obj.content_type.split("/") %}
            {% endif %}
            <input id="check_{{ obj.id }}" style="position: relative;top: 2px;" type="checkbox" name="object-selected"
                   value="{{ obj.sbe_type }}:{{ obj.id }}">
            <div class="document-gallery-box">
              {% if obj.object_type == 'abilian.sbe.apps.documents.models.Folder' %}
                <div style="height: 310px;"> <span style="position: relative;left: 7px;">
                 <a style="color: #797C7E;" href="{{ url_for(obj) }}"> <i class="fa fa-folder-o gallery-folder"
                                                                          aria-hidden="true"></i></a></span>
                  <div class="gallery-numberCircle"><span>{{ obj.filtered_children|length }}</span></div>
                </div>
                <hr>
              {% else %}
                {% set icon_src = url_for(".document_preview_image",
                                        community_id=g.community.slug, doc_id= obj.id,
                                        size=obj.preview_size) %}

                {% if content_type[0] == 'image' %}
                  <a style="color: #797C7E;" href="{{ url_for(obj) }}">
                    <div
                        style="width: 256px; height: 332px; border-bottom:1px solid #eee; background-position: -68px;background:url({{ icon_src }});">
                    </div>
                  </a>
                {% else %}
                  <a style="color: #797C7E;" href="{{ url_for(obj) }}"><img
                      style="width: 256px;height: 332px;border-bottom:1px solid #eee;background-position: -68px;"
                      src="{{ icon_src }}"/></a>
                {% endif %}
              {% endif %}
              {%- if obj.object_type == 'folder' %}<i>
                {{ obj.filtered_children|length }}</i>{%- endif %}
              <div class="document-gallery-infos">
                {% set owner = obj.owner %}
                <p>
                  <a style="color: #797C7E;" href="{{ url_for(obj) }}">{{ obj.title|truncate(32, False, '...', 0) }}</a>
                </p>
                <p> {{ obj.created_at|age(add_direction=False) }} par {{ owner.name }} </p>
                <p>
                  {%- if obj.is_document %}
                    {{ obj.content_length|filesize }}
                  {%- endif %}
                </p>
              </div>

              <div class="dropdown document-gallery-dropdownbase">
                <button class="dropdown-toggle document-gallery-dropdown" 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" aria-labelledby="dropdownMenu1"
                    style="border-radius: 0; position: absolute; top: 63px; margin-bottom: -144px;">
                  {%- 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: 1px;margin-bottom: 0;" 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>

              <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 }}"/>
            </div>
            <!---end of doc -->
          </div>
        {%- endfor %}
        </div>
    </form>

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

    <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:0; display:none;"
              name="action" value="download" title="Download"><i
          class="fa fa-download" aria-hidden="true"></i>
        {{ _('Download') }}
      </button>
    </form>

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

    <script>
      var folder_url = "{{ url_for('.folder_post', folder_id=folder.id, community_id=folder.community.slug) }}";

      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 download_folder(e) {
        $("#folder_content_download").attr("action", e.value);
        $("#document-folder-download").trigger("click");
      }

      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 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 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 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>

  {%- 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>

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

  <script>
    $("#filter").keyup(function (event) {
      $(".gallery_element .document-gallery-infos p:nth-child(1)").each(function (e) {
        var doc_name = $(this).text().toLowerCase().split(".")[0];
        if (doc_name.indexOf($("#filter").val().toLowerCase()) >= 0) {
          $(this).closest(".gallery_element").css("display", "block");
        } else {
          $(this).closest(".gallery_element").css("display", "none");
        }
      });
    });
  </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 %}
