{% 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" 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 }}
              {%else%}
                {{obj.title}}
              {%- 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, current_folder_id=folder.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, 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, current_folder_id= folder.id, community_id=obj.community.slug) }}" />
            <input type="hidden" id="email_url{{obj.id}}" value="{{ url_for('.document_send', doc_id=obj.id, current_folder_id= folder.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 type="application/json">
        {%- set data = {
            'deleteConfirmMsg': _("Delete selected elements?"),
         } %}
        {{ data | tojson | safe }}
  </script>
    </form>

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

