{% extends "layouts/standard.nunj" %}

{% block content %}
<div class="Page Page--panelled fr-inner">
    <div class="Page-inner">
        <div class="ComponentList" data-behaviour="component-list">

            <div class="ComponentList-header">
                <h2 class="ComponentList-title">All Components</h2>
            </div>

            {{ pagination() }}

            <div class="ComponentList-content"></div>

            {{ pagination() }}

            <script type="text/template" id="component-previews">
            {% for component in list.items %}
            {% for variant in component.variants %}
            {% include 'partials/variant-preview.nunj' %}
            {% endfor %}
            {% endfor %}
            </script>

        </div>
    </div>
</div>
{% endblock %}

{% macro pagination() %}
<div class="Pagination">
    <div class="Pagination-inner">
        <a href="#" class="Pagination-link Pagination-prev">{{ ui.svg('arrow-prev', '#792C5C', '13px', '13px' ) }}</a>
        <span class="Pagination-counter">
            Page <strong class="Pagination-currentPage">1</strong> of <strong class="Pagination-totalPages">1</strong>
        </span>
        <a href="#" class="Pagination-link Pagination-next">{{ ui.svg('arrow-next', '#792C5C', '13px', '13px' ) }}</a>
    </div>
</div>
{% endmacro %}