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

{% block content %}
<div class="pg-title">Каталог ВКонтакте — Альбомы</div>
<div class="pg-sub">Альбомы из VK Market · Всего: {{ albums | length }}</div>

<div class="card" style="padding:0;">
  {% if not vk_conn %}
  <div class="empty-state">
    <i class="bi bi-plug"></i>
    <p>ВКонтакте не подключён.<br><a href="/connections" style="color:#FF5500;">Перейти к подключениям</a></p>
  </div>
  {% elif albums %}
  <div class="table-wrap">
    <table class="tbl">
      <thead>
        <tr>
          <th>Название</th>
          <th>Товаров</th>
          <th>ID</th>
          <th>Обновлено</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for a in albums %}
        <tr>
          <td>
            <div class="tbl-name"><i class="bi bi-collection" style="color:#9EA8BE;margin-right:6px;"></i>{{ a.title }}</div>
          </td>
          <td><span class="mono" style="font-size:12px;">{{ a.count if a.count is not none else '—' }}</span></td>
          <td><span class="mono" style="font-size:11px;color:#9EA8BE;">{{ a.album_id }}</span></td>
          <td><span class="mono" style="font-size:11px;color:#9EA8BE;">{{ a.fetched_at | datefmt }}</span></td>
          <td>
            <a href="/vk-catalog/albums/{{ a.album_id }}/products" class="btn btn-outline btn-xs">
              <i class="bi bi-box-seam"></i> Товары
            </a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="empty-state">
    <i class="bi bi-collection"></i>
    <p>Альбомы ещё не загружены.<br>Синхронизация выполняется каждые {{ refresh_interval }} сек. автоматически.</p>
  </div>
  {% endif %}
</div>
{% endblock %}