{layout @layout.html}
{block content}
<script type="text/javascript" src="public/js/jQuery/jquery-3.5.1.min.js"></script>
{var $shortDateFormat = ('short_date_format'|translate)}
<ul id="pagelist" class="w3-ul w3-border w3-hoverable w3-margin" style="width: 50%;">
  {foreach $pages as $page}
  <li class="w3-display-container">
    <a href="{=BASE_URL}/{$page->title}">{$page->title}</a> <time>{$page->updated_at|date:$shortDateFormat} {$page->updated_at|date:'h:i'}</time>
    {var $confirm = ('confirm_delete_page'|translate:$page->title)}
    <a href="{=BASE_URL}/{$page->title}/delete" class="w3-btn w3-red w3-tiny w3-round w3-display-right" onclick="return confirm('{$confirm|noescape}');">{_}delete{/_}</a>
  </li>
  {/foreach}
</ul>
<script>
    var currentPage = 1;
    $(window).scroll(function(){
        // End of the document reached ?
        if ($(document).height() - $(this).height() == $(this).scrollTop()) {
            currentPage++;
            $.get({=BASE_URL}+"/list?page="+currentPage, function(data, status){
                $("#pagelist").append(data);
            });
        }
    });
</script>
{/block}
