{% extends "admin/layout.html" %}

{% block title %}Katalog Website | Admin Albab Store{% endblock %}
{% block topbar_title %}Katalog Website{% endblock %}

{% block content %}

<div class="admin-card">
    <div class="admin-card-head">
        <h2>Semua Produk ({{ products|length }})</h2>
        <a class="btn btn-primary btn-sm" href="{{ url_for('admin_product_add') }}">➕ Tambah Website</a>
    </div>

    {% if products %}
    <div class="table-wrap">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Preview</th>
                    <th>Nama</th>
                    <th>Kategori</th>
                    <th>Harga</th>
                    <th>Status</th>
                    <th>Demo</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                {% for product in products %}
                <tr>
                    <td>
                        <img class="table-thumb"
                             src="{{ url_for('static', filename='images/' + product.thumbnail) }}"
                             alt="{{ product.name }}">
                    </td>
                    <td>
                        <strong>{{ product.name }}</strong><br>
                        <small class="muted">/katalog/{{ product.slug }}</small>
                    </td>
                    <td>{{ product.category_name }}</td>
                    <td>{{ rupiah(product.price) }}</td>
                    <td>
                        {% if product.status == 'active' %}
                            <span class="badge badge-success">Aktif</span>
                        {% else %}
                            <span class="badge badge-muted">Nonaktif</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if product.demo_slug %}
                            <a href="{{ url_for('demo', slug=product.demo_slug) }}" target="_blank">Lihat</a>
                        {% else %}—{% endif %}
                    </td>
                    <td class="table-actions">
                        <form method="POST" action="{{ url_for('admin_product_toggle', product_id=product.id) }}">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button class="btn btn-sm {% if product.status == 'active' %}btn-muted{% else %}btn-outline{% endif %}"
                                    title="Aktif/nonaktifkan">
                                {{ 'Nonaktifkan' if product.status == 'active' else 'Aktifkan' }}
                            </button>
                        </form>
                        <a class="btn btn-outline btn-sm" href="{{ url_for('admin_product_edit', product_id=product.id) }}">Edit</a>
                        <form method="POST" action="{{ url_for('admin_product_delete', product_id=product.id) }}"
                              class="js-confirm" data-message="Hapus produk '{{ product.name }}'?">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button class="btn btn-danger btn-sm">Hapus</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <p class="empty-state">Belum ada produk. <a href="{{ url_for('admin_product_add') }}">Tambah produk pertama</a>.</p>
    {% endif %}
</div>

{% endblock %}