{namespace be=TYPO3\CMS\Backend\ViewHelpers}
{namespace mrmbepages=Meramo\Mrmbepages\ViewHelpers}
<f:layout name="backend" />
<f:section name="content">

  <h1>
    <f:translate key="mrmbepage.dashboard.headline" />
  </h1>
  <table class="table table-striped table-hover">
    <tr>
      <th>
        <f:translate key="mrmbepage.dashboard.starttime"></f:translate>
      </th>
      <th>
        <f:translate key="mrmbepage.dashboard.endtime"></f:translate>
      </th>
      <th>
        <f:translate key="mrmbepage.dashboard.category"></f:translate>
      </th>
      <th>
        <f:translate key="mrmbepage.dashboard.title"></f:translate>
      </th>
      <th>
        <f:translate key="mrmbepage.dashboard.roof"></f:translate>
      </th>
      <th>
        <f:translate key="mrmbepage.dashboard.pageid"></f:translate>
      </th>
    </tr>
    <f:if condition="{pagination.pages}">
      <f:then>
        <f:for each="{pagination.pages}" as="page">
          <tr>
            <td>
              <f:format.date format="d.m.Y">{page.starttime}</f:format.date>
            </td>
            <td class="{mrmbepages:cssBackground(endtime: '{page.endtime}')}">
              <f:format.date format="d.m.Y">{page.endtime}</f:format.date>
            </td>
            <td>{mrmbepages:category(slug: '{page.slug}')}</td>
            <td>{page.title}</td>
            <td>{page.roof}</td>
            <td>
              <be:link.editRecord uid="{page.uid}" table="pages" returnUrl="{f:be.uri(route: 'pageadmin_MrmbepagesPagelisting')}">
                <core:icon identifier="actions-document-open" />
              </be:link.editRecord>
            </td>
          </tr>
        </f:for>
      </f:then>
      <f:else>
        <p>No Paginated Data found</p>
      </f:else>
    </f:if>
  </table>
  <f:if condition="{pagination}">
    <div class="row d-flex justify-content-center">
      <div class="col-sm-4">
        <span>Anzahl der Einträge: {pagination.totalRecords}</span> 
      </div>
      <div class="col-sm-8 justify-content-center">
        <ul class="pagination">
          <f:if condition="{pagination.previousPage} && {pagination.previousPage} >= {pagination.firstPage}">
            <f:then>
              <li class="wave-effect list">
                <a href="{f:uri.action(action:actionName, arguments:'{currentPage: pagination.firstPage}')}">
                  <i class="material-icons">first_page</i>
                </a>
              </li>
              <li class="wave-effect list">
                <a href="{f:uri.action(action:actionName, arguments:'{currentPage: pagination.previousPage}')}">
                  <i class="material-icons">chevron_left</i>
                </a>
              </li>
            </f:then>
            <f:else>
              <li class="disabled"><a href="#"><i class="material-icons">first_page</i></a></li>
              <li class="disabled"><a href="#"><i class="material-icons">chevron_left</i></a></li>
            </f:else>
          </f:if>
          <li><span class="pageNumbers">Seite {pagination.currentPage} von {pagination.totalPages}</span></li>
          <f:for each="{pageRange}" as="pRange">
            <li class="{f:if(condition: '{pRange} == {paginator.currentPage}', then:'active', else:'waves-effect')}">
              <a href="{f:uri.action(action:actionName, arguments:{currentPage: pRange})}">{pRange}</a>
            </li>
          </f:for>
          <f:if condition="{pagination.nextPage} && {pagination.nextPage} <= {pagination.lastPage}">
            <f:then>
              <li class="waves-effect list">
                <a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.nextPage})}">
                  <i class="material-icons">chevron_right</i>
                </a>
              </li>
              <li class="waves-effect list">
                <a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.lastPage})}">
                  <i class="material-icons">last_page</i>
                </a>
              </li>
            </f:then>
            <f:else>
              <li class="disabled"><a href="#"><i class="material-icons">chevron_right</i></a></li>
              <li class="disabled"><a href="#"><i class="material-icons">last_page</i></a></li>
            </f:else>
          </f:if>
        </ul>
      </div>
    </div>
  </f:if>
</f:section>