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


{% macro m_docs_table(objects, edit=True) %}
  {%- if objects %}
    <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">
            <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 href="#select-all">{{ _("Select all") }}</a></li>
              <li><a href="#unselect-all">{{ _("Unselect all") }}</a></li>
            </ul>
          </div>

          {%- for action in actions.for_category('documents:folder-listing') %}
            <div class="btn-group">
              {{ action.render() }}
            </div>
          {%- endfor %}

          <div class="btn-group pull-right" style="margin-right: 20px;">
            <input id="filter" type="text" class="form-control" placeholder="{{ _("Filter...") }}"
                style="margin-bottom: 0;">
          </div>

          <!-- TODO:
          <div class="btn-group pull-right">
            <button class="btn"><i class="fa fa-th-list"></i></button>
            <button class="btn"><i class="fa fa-th-large"></i></button>
          </div>
          -->
        </div>
      {% endif %}

      <hr style="margin: 10px 0 10px 0;"/>

      <table class="table table-striped table-condensed" id="objects-table">
        <thead>
        <tr>
          <th style="width: 1%;"></th>
          <th class="hide">type</th>
          <th class="hide">title for sorting</th>
          <th style="width: 39%;">{{ _("Title") }}</th>
          <th style="width: 10%;">{{ _("Size") }}</th>
          <th style="width: 25%;">{{ _("Owner") }}</th>
          <th class="hide">date</th>
          <th style="width: 25%;">{{ _("Age") }}</th>
        </tr>
        </thead>

        <tbody>
        {%- for obj in objects %}
          <tr>
            <td><input 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>
              <img src="{{ obj.icon }}" style="vertical-align: middle;" alt=""/>
              {%- if obj.object_type == 'folder' %}<i>
                {{ obj.filtered_children|length }}</i>{%- endif %}
              <a href="{{ url_for(obj) }}">{{ obj.title }}</a>
            </td>
            <td>
              {%- if obj.is_document %}
                {{ obj.content_length|filesize }}
              {%- endif %}
            </td>
            <td>
              <a href="{{ url_for("social.user", user_id=obj.owner.id) }}"><img
                  alt=""
                  src="{{ user_photo_url(obj.owner, size=20) }}"
                  style="vertical-align: middle;">
                {{ obj.owner.name }}</a>
            </td>
            <td class="hide">{{ obj.created_at.isoformat() }} </td>
            <td>{{ obj.created_at|age }}</td>
          </tr>
        {%- endfor %}
        </tbody>
        <tfoot>
        <tr>
          <th></th>
          <th class="hide">type</th>
          <th class="hide">title for sorting</th>
          <th>{{ _("Title") }}</th>
          <th>{{ _("Size") }}</th>
          <th>{{ _("Owner") }}</th>
          <th class="hide">date</th>
          <th>{{ _("Age") }}</th>
        </tr>
        </tfoot>
      </table>
    </form>

    {%- deferJS %}
    <script type="text/javascript">
	 'use strict';	       
     (function(window, document, undefined) {
       Abilian.fn.onAppInit(function() {
         (function(factory) {
           if ( typeof define === 'function' && define.amd ) { // Using requirejs?
		     requirejs(['jquery', 'jquery.dataTables'], factory );
	       }
	       else {
		     factory(jQuery);
	       }
         }
          (function($) {     

            $.fn.dataTableExt.afnFiltering.push(
              function(oSettings, aData, iDataIndex) {
                var filter_value = $("#filter").val();
                var row_text = aData[2].trim();
                return row_text.match(new RegExp(filter_value, "i"));
              }
            );

            var objects_table = $('#objects-table').dataTable({
              aoColumns: [
                { asSorting: [], sWidth: "1%" },
                { bVisible: false, sType: "cmistype" },
                { bVisible: false, sType: "string" },
                { aDataSort: [1, 2], asSorting: [ "asc", "desc" ], sWidth: "31%" },
                { aDataSort: [1, 4], asSorting: [ "asc", "desc" ], sWidth: "8%"  },
                { aDataSort: [1, 5], asSorting: [ "asc", "desc" ], sWidth: "18%"  },
                { bVisible: false, sType: "date"},
                { aDataSort: [1, 6], asSorting: [ "asc", "desc" ], sWidth: "12%"  }
              ],
              {# see http://datatables.net/ref #}

              sPaginationType: "bootstrap",
              bFilter:         true,
              bLengthChange:   false,
              bStateSave:      true,
              iDisplayLength:  50,
              sDom:            'lrtip'
            });

            /* on page reload datatable keep previously filtered rows. Force
               refilter with current filter value */
            var filter = $('#filter');
            objects_table.fnFilter(filter.val());

            $("a[href='#select-all']").click(function(e) {
              $("input[name='object-selected']").attr('checked', true);
              e.preventDefault();
            });
            $("a[href='#unselect-all']").click(function(e) {
              $("input[name='object-selected']").attr('checked', false);
              e.preventDefault();
            });

            filter.bind('keypress', function(e) {
              if (e.keyCode == 13) {
                /* let return key for refilter */
                objects_table.fnFilter(this.value);
                e.preventDefault();
              }
            });

            filter.bind('keyup', function(e) {
              if (e.keyCode == 13) {
                e.preventDefault();
              }
              objects_table.fnFilter(this.value);
            });

            $('button.btn-danger[value="delete"]').click(function(e) {
              e.preventDefault();
              var $button = $(this);
              var button_form = $(this.form);
              var msg = "{{ _("Delete selected elements?") }}";
              var elements = $(document.forms["folder-listing"])
               .find("input[name='object-selected']")
               .filter(function() { return this.checked; })
               .closest('td')
               .next('td');
              var el_list = $('<ul />').attr({'class': 'folder-items'});

              elements.each(function() {
                var li = $('<li />').html($(this).html());
                el_list.append(li);
              });
              msg += $('<div />').append(el_list).html();

              bootbox.confirm(
                msg,
                function(confirm) {
                  if (confirm) {
                    var action_val = $('<input />',
                                       {'type':   'hidden',
                                        'name':  'action',
                                        'value': $button.attr('value')});
                    button_form.append(action_val);
                    button_form.submit();
                  }
                });
            });

            /* Move file functions */
            var move_file_fill_listing = function(modal, folder_url) {
              var tbody = modal.find('tbody');
              var breadcrumbs = modal.find('ul.breadcrumb');

              $.ajax({
                type:     'GET',
                dataType: "json",
                url:      folder_url,
                cache:    false,
                success:  function(data) {
                  var bc = $(data['breadcrumbs']);
                  breadcrumbs.empty();

                  bc.each(function(index) {
                    var li = $('<li />');
                    var link = $('<a>' + this.title + '</a>')
                    .attr('href', this.url)
                    .attr('data-id', this.id)
                    .appendTo(li);
                    li.appendTo(breadcrumbs);
                  });

                  var folders = $(data['folders']);
                  tbody.empty();

                  folders.each(function(index) {
                    var tr = $('<tr />');
                    var td = $('<td />');
                    var link = $('<a>' + this.title + '</a>').attr('href', this.url)
                      .attr('data-id', this.id)
                      .appendTo(td);
                    td.append($('<span>/</span>').attr('class', 'divider'));
                    tr.append(td).appendTo(tbody);
                  });

                  var folder_selectable = data['current_folder_selectable'];
                  var button = $('#modal-move-button-submit');
                  button.attr('disabled', !folder_selectable);
                  if (!folder_selectable ^ button.hasClass('disabled')) {
                    button.toggleClass('disabled');
                  }
                }
              });
            };

            $(document).on('click', '#modal-move-files-directory-listing a', function(e) {
              var self = $(this);
              var folder_id = self.attr('data-id');
              var modal = $('#modal-move-files');
              modal.find('input[name="target-folder"]').attr('value', folder_id);
              var url = self.attr('href');
              move_file_fill_listing(modal, url);
              e.preventDefault();
            });

            $('#modal-move-files').on('show.bs.modal', function() {
              var modal = $(this);
              var listing_form = $(document.forms["folder-listing"]);
              var elements = listing_form.find("input[name='object-selected']")
                                         .filter(function() {
                                           return this.checked;
                                         });
              var footer_inputs = $("#modal-move-files-inputs");
              footer_inputs.empty();
              elements.clone().attr('type', 'hidden').appendTo(footer_inputs);
              var target = $('<input />')
                      .attr({type: 'hidden',
                             name: 'target-folder',
                             value: ''})
                      .appendTo(footer_inputs);
              var l = document.location;
              {# don't use document.location + '/json': if anchors in url '/json' is
              ignored, ie http://.../folder#anchor
              #}
              move_file_fill_listing(modal, l.protocol + "//" + l.host + l.pathname + '/json' + l.search);
            });
          })
         )
       });
     }(window, document));
    </script>
    {%- enddeferJS %}
  {%- else %}
    <p>
      <em>{{ _("This folder is currently empty. Why don't you upload some content?") }}</em>
    </p>
  {%- endif %}

  <div style="clear: both;"></div>
{% endmacro %}
