{% extends "layout.html" %}

{% block content %}
<div class="header">
    <h1>Selamat Datang di Aplikasi Transaksi</h1>
</div>
<div>
    <p>Gunakan menu di sebelah kiri untuk navigasi. Berikut adalah beberapa informasi terkait:</p>
    <hr>
    <h3>Transaksi Terbaru</h3>
    <table border="1" cellspacing="0" cellpadding="8" style="width: 100%;">
        <thead>
            <tr>
                <th>ID Transaksi</th>
                <th>Nama Pelanggan</th>
                <th>Tanggal</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            {% for trx in pagination.transaksi %}
            <tr>
                <td>{{ trx.id }}</td>
                <td>{{ trx.pelanggan }}</td>
                <td>{{ trx.tanggal }}</td>
                <td>{{ trx.total }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <div style="margin-top: 20px;">
        <p>Halaman {{ pagination.page }} dari {{ pagination.pages }}</p>
        <nav>
            <ul style="list-style: none; display: flex; gap: 10px; padding: 0;">
                {% if pagination.page > 1 %}
                <li><a href="{{ url_for('home', page=pagination.page - 1) }}">&laquo; Sebelumnya</a></li>
                {% endif %}
                {% for p in range(1, pagination.pages + 1) %}
                <li>
                    <a href="{{ url_for('home', page=p) }}"
                       style="font-weight: {% if p == pagination.page %}bold{% else %}normal{% endif %};">
                        {{ p }}
                    </a>
                </li>
                {% endfor %}
                {% if pagination.page < pagination.pages %}
                <li><a href="{{ url_for('home', page=pagination.page + 1) }}">Berikutnya &raquo;</a></li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>
{% endblock %}