{% extends 'partials/base.html.twig' %}

{% if page.header.show_breadcrumbs is defined %}
    {% set show_breadcrumbs = page.header.show_breadcrumbs %}
{% else %}
    {% set show_breadcrumbs = true %}
{% endif %}

{% block menu %}
    {% include 'partials/sidebar_right.html.twig' %}
{% endblock %}

{% block content %}
    {% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
        {% include 'partials/breadcrumbs.html.twig' %}
    {% endif %}

<article class="post">
  <header>
    <div class="title">
      <h2>{{ page.header.title }}</h2>
    {% if page.header.subtitle %}
      <p>{{ page.header.subtitle }}</p>
    {% endif %}
    </div>
  </header>
    {{ page.content|raw}}

    {% include "forms/form.html.twig" %}

    <script>
        $(function() {
            var currentPage = 0;

            $(document).on('click tap', '.js__load-more', function(event) {
               $.getJSON(window.location + '/page:' + (currentPage + 1))
                .success(function(response) {
                    currentPage = parseInt(response.page);

                    response.messages.forEach(function(message) {
                        $('.js__messages-container').append('<tr>' +
                                '<td>' + message.text + '<br />{{'PLUGIN_GUESTBOOK.WRITTEN_ON'|t}} ' + message.date + ' {{'PLUGIN_GUESTBOOK.BY'|t}} ' + message.author + '</td></tr>');
                    });

                    var totalRetrieved = response.itemsPerPage * (parseInt(response.page) + 1);

                    $('.totalRetrieved').html(totalRetrieved);
                    $('.totalAvailable').html(response.totalAvailable);

                    if (totalRetrieved >= response.totalAvailable) {
                        $('.totalRetrieved').html($('.totalAvailable').html());
                        $('.js__load-more').hide();
                    }
                })
                .error(function() {
                    alert('Unexpected error');
                });
            });
        });
    </script>

    {% block item %}
        {% if grav.twig.guestbookMessages|length %}
        <h2>{{'PLUGIN_GUESTBOOK.MESSAGES'|t}}</h2>

            {% for child in grav.twig.guestbookMessages.messages %}
                {% set child = child|merge({'title': child.author}) %}
                {% set child = child|merge({'content': child.text}) %}
                {% include 'partials/guestbook_item.html.twig' with {'page':child, 'truncate':false} %}
            {% endfor %}
        {% endif %}

        {% if grav.twig.guestbookMessages.totalRetrieved < grav.twig.guestbookMessages.totalAvailable %}
            <form>
                <div class="buttons">
                    <button type="button" class="button js__load-more">
                        Load more
                    </button>
                </div>
            </form>
        {% endif %}
    {% endblock %}
</article>

<section id="footer" class="align-center">
    {% include 'partials/footer.html.twig' %}
</section>
{% endblock %}