{% extends "layout.html" %}

{% block title %}Home - KCAP Demo Server{% endblock %}

{% block content %}
<div class="row mt-4">
    <div class="col-md-12">
        <div class="jumbotron position-relative">
            <div class="position-absolute top-0 end-0 p-3">
                <a href="/{{ tenant.id }}/settings" class="btn btn-secondary" title="Settings">
                    <i class="bi bi-gear-fill"></i> Settings
                </a>
            </div>
            <h1 class="display-4">KCAP Demo Server{% if tenant %} - {{ tenant.name }}{% endif %}</h1>
            <p class="lead">Manage your product catalog and AR content for barcode scanning applications.</p>
            <hr class="my-4">
            
            <div class="mt-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h2>Products</h2>
                    <a href="/{{ tenant.id }}/admin/add" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i> Add New Product
                    </a>
                </div>
                
                {% if products %}
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Product ID</th>
                                <th>Name</th>
                                <th>Price</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for product_id, product_data in products.items() %}
                            <tr>
                                <td>{{ product_id }}</td>
                                <td>
                                    {% for field in product_data %}
                                        {% if field.fieldName == '_name' %}
                                            {{ field.value }}
                                        {% endif %}
                                    {% endfor %}
                                </td>
                                <td>
                                    {% for field in product_data %}
                                        {% if field.fieldName == '_price' %}
                                            {{ field.value }}
                                        {% endif %}
                                    {% endfor %}
                                </td>
                                <td>
                                    <a href="/{{ tenant.id }}/admin/edit/{{ product_id }}" class="btn btn-sm btn-outline-primary">
                                        <i class="bi bi-pencil"></i> Edit
                                    </a>
                                    <a href="/{{ tenant.id }}/admin/generate_barcode_page/{{ product_id }}" class="btn btn-sm btn-outline-success">
                                        <i class="bi bi-upc-scan"></i> Barcodes
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">
                    <a href="/{{ tenant.id }}/admin/" class="btn btn-secondary">
                        <i class="bi bi-list-task"></i> Manage All Products
                    </a>
                </div>
                {% else %}
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i> No products available yet. Click "Add New Product" to get started.
                </div>
                {% endif %}
            </div>
            
            <div class="mt-4">
                <h2>Getting Started</h2>
                <ol>
                    <li>Configure your AR fields to define what information is returned for products</li>
                    <li>Add products to your catalog with the configured fields</li>
                    <li>Generate barcodes for your products</li>
                    <li>Use the AR endpoints in your scanning application</li>
                </ol>
            </div>
        </div>
    </div>
</div>
{% endblock %}