{{define "title"}}
Katalog
{{end}}
{{define "main"}}
<section class="card">
    <div class="card-header">
        <h2>
            <span class="material-symbols-outlined">inventory_2</span>
            Zarządzanie katalogiem
        </h2>
        <a href="/cake" class="btn btn-primary btn-sm">
            <span class="material-symbols-outlined">add</span>
            Nowe ciasto
        </a>
    </div>
    <div class="table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th style="width:32px"></th>
                    <th>Nazwa</th>
                    <th>SKU</th>
                    <th class="right">Cena bazowa</th>
                    <th class="center"></th>
                </tr>
            </thead>
            <tbody>
                {{range .}}
                <tr>
                    <td>
                        <div class="catalogue-item-icon icon-cake" style="width:28px;height:28px">
                            <span class="material-symbols-outlined" style="font-size:14px">cake</span>
                        </div>
                    </td>
                    <td style="font-weight:500">{{.Name}}</td>
                    <td class="text-on-surface-variant">#{{.ID}}</td>
                    <td class="text-right">{{.Price}} PLN</td>
                    <td class="text-center">
                        <a href="/cake/{{.ID}}" class="action-btn">
                            <span class="material-symbols-outlined">edit</span>
                        </a>
                    </td>
                </tr>
                {{end}}
            </tbody>
        </table>
    </div>
    <div class="table-footer">
        <span>Pokazuje 1-{{len .}} z {{len .}}</span>
        <div class="pagination">
            <button class="pagination-btn" disabled>
                <span class="material-symbols-outlined">chevron_left</span>
            </button>
            <button class="pagination-btn active">1</button>
            <button class="pagination-btn" disabled>
                <span class="material-symbols-outlined">chevron_right</span>
            </button>
        </div>
    </div>
</section>
{{end}}