{% extends 'base.html' %}
{% load static %}

{% block title %}Товари — Адмін-панель{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 fw-bold m-0">Товари</h1>
    <div class="d-flex align-items-center gap-2">
        <form action="{% url 'core:index' %}" method="get" class="d-flex gap-2">
            <input type="text" name="q" value="{{ query|default:'' }}" class="form-control search-input" placeholder="Пошук за назвою або SKU..." style="min-width: 300px;">
            <button type="submit" class="btn btn-primary d-none">Пошук</button>
        </form>
    </div>
</div>

<div class="card">
    <div class="table-responsive">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th style="width: 80px;">Фото</th>
                    <th>Назва товару</th>
                    <th>Артикул (SKU)</th>
                    <th>Ціна (грн)</th>
                    <th>Статус</th>
                    <th class="text-center">Продано</th>
                    <th style="width: 100px;">Дії</th>
                </tr>
            </thead>
            <tbody>
                {% for p in products %}
                <tr>
                    <td>
                        {% if p.image %}
                        <img src="{{ p.image }}" alt="{{ p.name }}" class="product-img">
                        {% else %}
                        <div class="product-img d-flex align-items-center justify-content-center text-muted small">N/A</div>
                        {% endif %}
                    </td>
                    <td>
                        <div class="fw-bold">{{ p.name }}</div>
                        <div class="small text-muted">WP ID: {{ p.wp_id }}</div>
                    </td>
                    <td><code>{{ p.sku|default:"-" }}</code></td>
                    <td>
                        <div class="fw-bold">{{ p.price }} ₴</div>
                    </td>
                    <td>
                        <span class="status-{{ p.stock_status }}">
                            {% if p.stock_status == 'instock' %}
                            В наявності
                            {% else %}
                            Немає
                            {% endif %}
                        </span>
                    </td>
                    <td class="text-center">
                        <span class="badge rounded-pill bg-light text-dark px-3">{{ p.total_sales }}</span>
                    </td>
                    <td>
                        <a href="{% url 'core:product_detail' p.pk %}" class="btn btn-sm btn-outline-secondary rounded-3 px-3">Деталі</a>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="7" class="text-center py-5">
                        <div class="text-muted">Товарів не знайдено.</div>
                        <div class="small mt-2">Спробуйте інший запит або запустіть синхронізацію.</div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}