<template id="tesoft-pagination-template">
    <style>
        @import "/src/styles/default.css";

        :host {
            display: block;
        }

        :host > div {
            align-items: center;
            display: grid;
            grid-template-columns: auto auto auto;
            grid-template-rows: auto;
        }

        .cur-page {
            font-size: 1.8rem;
            padding: 0 var(--medium-padding);
        }
    </style>

    <div>
        <tesoft-button class="prev" disabled transparent>
            <svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="2.4rem" fill="#000000">
                <path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/>
            </svg>
        </tesoft-button>
        <div class="cur-page">
            1
        </div>
        <tesoft-button class="next" disabled transparent>
            <svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="2.4rem" fill="#000000">
                <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/>
            </svg>
        </tesoft-button>
    </div>
</template>

<script src="/src/components/pagination.ts" type="module"></script>
{% includeOnce 'components/button.njk' %}
