<div metal:define-macro="main"
     i18n:domain="substanced"
     metal:extend-macro="request.sdiapi.main_template">

  <metal:slot fill-slot="head-more">
    <metal:slot define-slot="head-more">
      <!-- slickgrid -->
      <script src="${request.static_url('substanced.folder:static/js/slickgrid/jquery-ui-1.8.16.custom.min.js')}" type="text/javascript"></script>
      <script src="${request.static_url('substanced.folder:static/js/slickgrid/jquery.event.drag-2.2.js')}" type="text/javascript"></script>
      <script src="${request.static_url('substanced.folder:static/js/slickgrid/jquery.event.drop-2.2.js')}" type="text/javascript"></script>
      <script src="${request.static_url('substanced.folder:static/js/slickgrid/slick.dataview.js')}" type="text/javascript"></script>
      <script src="${request.static_url('substanced.folder:static/js/slickgrid/slick.core.js')}" type="text/javascript"></script>
      <script src="${request.static_url('substanced.folder:static/js/slickgrid/slick.grid.js')}" type="text/javascript"></script>
      <script src="${request.static_url('substanced.folder:static/js/slickgrid/plugins/slick.rowselectionmodel.js')}" type="text/javascript"></script>
      <script src="${request.static_url('substanced.folder:static/js/slickgrid/plugins/slick.checkboxselectcolumn.js')}" type="text/javascript"></script>
      <script src="${request.static_url('substanced.folder:static/js/slickgrid/plugins/slick.rowmovemanager.js')}" type="text/javascript"></script>
      <script src="${request.static_url('substanced.folder:static/js/slick.responsiveness.js')}" type="text/javascript"></script>
      <script src="${request.static_url('substanced.folder:static/js/bootstrap-slickgrid.js')}" type="text/javascript"></script>
      <script src="${request.static_url('substanced.folder:static/js/sdi.grid.remotemodel.js')}" type="text/javascript"></script>
      <script src="${request.static_url('substanced.folder:static/js/slickgrid-config.js')}" type="text/javascript"></script>
      <script src="${request.static_url('substanced.folder:static/js/folder.js')}" type="text/javascript"></script>
      <link href="${request.static_url('substanced.folder:static/css/slick.grid.css')}" rel="stylesheet" />
      <link href="${request.static_url('substanced.folder:static/css/sdi_slickgrid.css')}" rel="stylesheet" />
    </metal:slot>
  </metal:slot>

  <!--!
  you can use this template as a macro to replace slickgrid config, e.g.
  <div metal:use-macro="request.sdiapi.get_macro('substanced.folder:templates/contents.pt', 'main')">
  <div metal:fill-slot="head-more">
  ... replace slickgrid css and js ...
  </div>
  </div>
  -->

  <div metal:fill-slot="main">
    <form id="contents_form" action="@@${request.view_name}" method="POST" class="sdi-contents-actions" autocomplete="off"
          onsubmit="return sdi.loading_indicator_on()">
      <div class="container" tal:define="canadd
           addables and 'tocopy' not in request.session and 'tomove' not in request.session">

        <div class="navbar row contents-button-bar">
          <div class="col-md-1 col-sm-2">

            <button type="button" 
                    i18n:translate=""
                    class="btn btn-primary dropdown-toggle ${not canadd and 'disabled' or ''}" 
                    data-toggle="dropdown">
              Add <span class="caret" style="margin-left: 5px;" i18n:name="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li tal:repeat="addable addables">
                <a href="${addable['url']}"><i
              class="${addable['icon']}"></i> ${addable['type_name']}</a></li>
            </ul>
          </div>

          <div class="col-md-8 col-sm-7">

            <fieldset>
              <input type="hidden" name="csrf_token"
                     value="${request.session.get_csrf_token()}"/>
              
              <div tal:repeat="group buttons"
                   class="${group['type']=='group' and 'btn-group' or 'btn-single'}">
                <button tal:repeat="button group['buttons']"
		                tal:attributes="disabled 'btn-sdi-act' not in button['class'] and 'true' or False"
                        id="${button['id']}"
                        name="${button['name']}"
                        class="btn btn-sdi ${button['class']}"
                        value="${button['value']}"
                        type="submit"
                        >
                  ${button['text']}
                </button>
              </div>
              <input type="hidden" name="item-modify" value="" />
              
            </fieldset>
          </div>

          <div class="col-md-3 col-sm-3">

            <div class="sdi-contents-filter">
              <div class="input-group">
       	        <input type="text"
                       name="filter."
                       class="form-control"
	                   placeholder="Type to filter…" i18n:attributes="placeholder"
                       tal:attributes="value request.params.get('filter.', '')"/>
                <span class="input-group-btn">
       	          <button id="sdi-contents-filter-clear" 
                          type="button"
                          class="btn btn-default"><i 
                            class="glyphicon glyphicon-remove-circle"> </i>
                  </button>
                </span>
              </div>
            </div>

          </div>

        </div>

        <metal:slot define-slot="above-grid" />

        <div class="sdi-sg-header">
          <span>
            <a href="../@@contents" class="up-arrow"><i
                 tal:condition="context.__parent__ is not None"
                 class="glyphicon glyphicon-circle-arrow-up"></i>
            </a>
            <span class="badge badge-primary">
              <span class="sdi-sg-total">&nbsp;</span> 
              <span class="badge-text" i18n:translate="">total</span>
            </span>
            <span class="sdi-sg-selected-box" style="display: none">
              <span class="badge badge-success">
                <span class="sdi-sg-selected">&nbsp;</span>
                <span class="badge-text" i18n:translate="">selected</span>
              </span>
            </span>
          </span>
        </div>

        <div id="sdi-contents-table-sg" class="slickgrid-wrapper"></div>

        <metal:slot define-slot="below-grid" />

        <script type="text/javascript">
         folder.load_contents({
           eventSource: "${request.sdiapi.mgmt_path(context, 'auditstream-sse')}",
           slickgridWrapperOptions: ${structure:slickgrid_wrapper_options}
                          });
        </script>

        <div class="clearfix">
        </div>

      </div>
    </form>
  </div>
</div>
