{% 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_token }}
<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_token }}
      {%- 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" style="float:right;display:none;">
        {%- 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;">
                 <i class="fa fa-folder-o gallery-folder" aria-hidden="true"></i> <span class="folder-gallery-contents-count" style=""><span class="documents-nb">{{ obj.filtered_children|length }}</span></span></span></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' %}
              <div style="width: 256px;height: 332px;border-bottom:1px solid #eee;background-position: -68px;background:url({{icon_src}});"></div>
            {%else%}
             <img style="width: 256px;height: 332px;border-bottom:1px solid #eee;background-position: -68px;" src="{{icon_src}}"/>
            {%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: 0px;
position: absolute;
top: 53px;
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:0px;" 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>
    <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>
    </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, current_folder_id=folder.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>
        {%if loop.last%}
        </div></form>
        {%endif%}
        {%- endfor %}

      <script type="application/json">
        {%- set data = {
            'deleteConfirmMsg': _("Delete selected elements?"),
         } %}
        {{ data | tojson | safe }}
  </script>
<form id="folder_content_download" action="" method="post">
    {{ csrf_token }}
<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>
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 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_edit.html" %}
{%endif%}

{% endmacro %}

