<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
      xmlns:tal="http://xml.zope.org/namespaces/tal"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      xmlns:i18n="http://xml.zope.org/namespaces/i18n"
      lang="en"
      metal:use-macro="context/main_template/macros/master"
      i18n:domain="zopyx.plone.persistentlogger">
<body>

    <metal:slot fill-slot="style_slot">
        <link rel="stylesheet" type="text/css" tal:attributes="href string:$portal_url/++resource++zopyx.plone.persistentlogger/DataTables/media/css/jquery.dataTables.css" />
        <link rel="stylesheet" type="text/css" tal:attributes="href string:$portal_url/++resource++zopyx.plone.persistentlogger/DataTables/extensions/FixedHeader/css/dataTables.fixedHeader.min.css" />
    </metal:slot>

    <metal:slot fill-slot="javascript_head_slot">
        <script type="text/javascript" charset="utf8" tal:attributes="src string:$portal_url/++resource++zopyx.plone.persistentlogger/DataTables/media/js/jquery.dataTables.js"></script>
        <script type="text/javascript" charset="utf8" tal:attributes="src string:$portal_url/++resource++zopyx.plone.persistentlogger/DataTables/extensions/FixedHeader/js/dataTables.fixedHeader.min.js"></script>
        <script type="text/javascript" charset="utf8" tal:attributes="src string:$portal_url/++resource++zopyx.plone.persistentlogger/DataTables/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
    </metal:slot>

<metal:main fill-slot="content-core">
    <metal:content-core define-macro="content-core"
        tal:define="toLocalizedTime nocall:context/@@plone/toLocalizedTime">

      <h2 i18n:translate="">Connector logfile</h2>
      <tal:def define="rows view/entries"> 

          <div class="warning" i18n:translate="" tal:condition="not: rows">
              The connector log is empty
          </div>

          <table class="datatable" tal:condition="rows">
              <thead>
                  <tr>
                      <th width="15%" i18n:translate="">Date</th>
                      <th width="10%" i18n:translate="">Level</th>
                      <th width="10%" i18n:translate="">Username</th>
                      <th i18n:translate="">Comment</th>
                  </tr>
              </thead>
              <tbody>
                  <tr tal:repeat="row python: reversed(rows)">
                      <td width="15%"
                          tal:attributes="data-order python: row['date'].isoformat()"
                          tal:content="python: toLocalizedTime(row['date'], True)" />
                      <td width="10%"tal:attributes="class string:level-${row/level}" tal:content="row/level" />
                      <td width="10%"tal:content="row/username" />
                      <td class="log-text">
                          <span tal:content="structure row/comment" />
                          <tal:if condition="row/details | nothing"> 
                              (<a class="action" i18n:translate="">Details</a>)
                              <pre class="details" 
                                  style="display: none"
                                  tal:content="row/details" />
                          </tal:if>
                  </tr>
              </tbody>
              <tfoot>
                  <tr>
                      <th class="searchable"></th>
                      <th class="searchable"></th>
                      <th class="searchable"></th>
                      <th class="searchable"></th>
                  </tr>
              </tfoot>
          </table>

          <script type="text/javascript">

              var DATATABLES_ORDER = [0, "desc"];

              $(document).ready(function() {

                  $('.action').click(function() {
                          $(this).siblings('pre').fadeToggle('fast');
                  });
              });
          </script>

      </tal:def>
  </metal:content-core>
</metal:main>

</body>
</html>

