{% extends "base.html" %}
{% block title %}Товары ВК — {{ album.title }} — Мои Товары{% endblock %}
{% block page_title %}Каталог ВКонтакте{% endblock %}

{% block content %}
<ol class="breadcrumb">
  <li><a href="/vk-catalog/albums">Альбомы ВК</a></li>
  <li>{{ album.title }}</li>
</ol>

<div class="pg-title">{{ album.title }}</div>
<div class="pg-sub">Товары из VK Market · Всего: {{ products | length }}</div>

<div class="card" style="padding:0;">
  {% if products %}
  <div class="table-wrap">
    <table class="tbl">
      <thead>
        <tr>
          <th style="width:56px;"></th>
          <th>Название</th>
          <th>Цена</th>
          <th>Статус</th>
          <th>ID</th>
          <th>Обновлено</th>
        </tr>
      </thead>
      <tbody>
        {% for p in products %}
        <tr>
          <td>
            {% if p.thumb_url %}
            <img src="{{ p.thumb_url }}" alt="" style="width:40px;height:40px;object-fit:cover;border-radius:6px;">
            {% else %}
            <div style="width:40px;height:40px;border-radius:6px;background:#F4F5F7;display:flex;align-items:center;justify-content:center;color:#9EA8BE;">
              <i class="bi bi-image"></i>
            </div>
            {% endif %}
          </td>
          <td>
            <div class="tbl-name">{{ p.name }}</div>
            {% if p.description %}
            <div class="tbl-sub">{{ p.description[:80] }}{% if p.description|length > 80 %}…{% endif %}</div>
            {% endif %}
          </td>
          <td><span class="mono">{% if p.price is not none %}{{ p.price | price }}{% else %}—{% endif %}</span></td>
          <td>
            {% if p.availability == 0 %}
              <span class="tag tag-gr"><span class="dot g"></span>В наличии</span>
            {% elif p.availability == 1 %}
              <span class="tag tag-dim"><span class="dot d"></span>Удалён</span>
            {% elif p.availability == 2 %}
              <span class="tag tag-yl"><span class="dot y"></span>Недоступен</span>
            {% else %}
              <span style="color:#9EA8BE;font-size:12px;">—</span>
            {% endif %}
          </td>
          <td><span class="mono" style="font-size:11px;color:#9EA8BE;">{{ p.vk_product_id }}</span></td>
          <td><span class="mono" style="font-size:11px;color:#9EA8BE;">{{ p.fetched_at | datefmt }}</span></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="empty-state">
    <i class="bi bi-box-seam"></i>
    <p>Товары в этом альбоме не найдены.</p>
  </div>
  {% endif %}
</div>
{% endblock %}