{% extends "base.html" %}
{% import "_project_pulse_macros.html" as pp %}

{% block title %}Канбан — Проектный пульт{% endblock %}
{% block page_title %}Канбан проектов{% endblock %}
{% block head %}<link rel="stylesheet" href="/static/project_pulse.css?v={{ asset_v }}">
<style>
  /* Канбан-вкладка: специфичные стили инлайном, чтобы не трогать общий
     project_pulse.css (его правит другой чат). Всё на токенах дизайн-системы. */
  .pp-kanban-board { display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 760px) {
    .pp-kanban-board { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); align-items: start; }
  }
  .pp-kcol { background: var(--bs-paper-2, #f2f0ec); border: 1px solid var(--bs-line, #e7e4df);
    border-radius: var(--bs-r-md, 10px); padding: 10px 10px 12px; }
  .pp-kcol-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 10px;
    font-weight: 600; font-size: 14px; color: var(--bs-ink, #2c2933); }
  .pp-kcol-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--bs-mute, #79838f); }
  .pp-kcol-in-progress .pp-kcol-dot { background: var(--bs-up, #1a7f4b); }
  .pp-kcol-paused .pp-kcol-dot { background: var(--bs-warn, #b7791f); }
  .pp-kcol-todo .pp-kcol-dot { background: var(--bs-mute, #79838f); }
  .pp-kcol-done .pp-kcol-dot { background: var(--bs-line, #c9c5bd); }
  .pp-kcol-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--bs-mute, #79838f);
    background: var(--bs-card, #fff); border: 1px solid var(--bs-line, #e7e4df);
    border-radius: var(--bs-r-pill, 999px); padding: 1px 8px; }
  .pp-kcol-list { display: flex; flex-direction: column; gap: 8px; }
  .pp-kcard { display: block; text-decoration: none; color: var(--bs-ink, #2c2933);
    background: var(--bs-card, #fff); border: 1px solid var(--bs-line, #e7e4df);
    border-radius: var(--bs-r-md, 8px); padding: 9px 10px;
    transition: border-color .15s ease, box-shadow .15s ease; }
  .pp-kcard:hover { border-color: var(--bs-accent, #00345c); box-shadow: var(--pp-shadow-kcard-hover, 0 1px 6px rgba(0, 0, 0, .06)); }
  .pp-kcard-head { display: flex; align-items: baseline; gap: 8px; }
  .pp-kcard-name { font-weight: 600; font-size: 14px; line-height: 1.25; flex: 1; min-width: 0; }
  .pp-kcard-biz { font-size: 11px; color: var(--bs-mute, #79838f); margin: 4px 0 0;
    text-transform: uppercase; letter-spacing: .02em; }
  .pp-kcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
  .pp-kcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 8px; font-size: 12px; color: var(--bs-mute, #79838f); }
  .pp-kcol-empty { font-size: 12px; color: var(--bs-mute, #79838f); padding: 6px 2px; }
</style>
{% endblock %}

{% block content %}

{% if d.error %}
<div class="alert alert-error">{{ d.error }}</div>
{% else %}

{# ===== Фильтр по бизнесу + тумблер готовых ===== #}
{% if d.facets and d.facets.businesses %}
<div class="pp-filterbar">
  <div class="pp-facet-row">
    <span class="pp-facet-key">Бизнес</span>
    <a class="pp-fpill {{ 'is-on' if not d.facets.active.business }}" href="{{ set_qs(request,'business','') }}">Все</a>
    {% for b in d.facets.businesses %}
    <a class="pp-fpill {{ 'is-on' if d.facets.active.business == b.key }}"
       href="{{ set_qs(request,'business', '' if d.facets.active.business == b.key else b.key) }}">{{ b.label }} <span class="pp-fcount">{{ b.count }}</span></a>
    {% endfor %}
  </div>
  <div class="pp-facet-row">
    <span class="pp-facet-key">Готовые</span>
    {% if d.done_hidden %}
    <a class="pp-fpill" href="{{ set_qs(request, 'show_done', '1') }}">Показать реализованные</a>
    {% else %}
    <a class="pp-fpill is-on" href="{{ set_qs(request, 'show_done', '') }}">Скрыть реализованные</a>
    {% endif %}
  </div>
</div>
{% endif %}

{% if d.total == 0 %}
<div class="alert alert-info">Под фильтр ничего не нашлось. <a href="/kanban">Сбросить</a>.</div>
{% endif %}

<div class="pp-kanban-board" style="--cols: {{ d.columns|length }}">
  {% for col in d.columns %}
  <section class="pp-kcol pp-kcol-{{ col.key }}">
    <div class="pp-kcol-head">
      <span class="pp-kcol-dot"></span>{{ col.label }}
      <span class="pp-kcol-count">{{ col.count }}</span>
    </div>
    <div class="pp-kcol-list">
      {% for p in col.cards %}
      <a class="pp-kcard" href="/p/{{ p.slug }}">
        <div class="pp-kcard-head">
          <span class="pp-kcard-name">{{ p.name }}</span>
          {{ pp.score_badge(p.score, p.reason) }}
        </div>
        <div class="pp-kcard-biz">{{ p.business_ru }}</div>
        {% if p.has_rating %}
        <div class="pp-kcard-meta">
          {{ pp.money_chip(p.money) }}
          {{ pp.speed_chip(p.speed) }}
        </div>
        {% endif %}
        <div class="pp-kcard-foot">
          {{ pp.progress_bar(p.blocks_done, p.blocks_total, p.blocks_progress, 'is-done' if p.status == 'done' else '') }}
          <span>{{ p.plan_done }}/{{ p.plan_count }} план(ов)</span>
        </div>
      </a>
      {% else %}
      <div class="pp-kcol-empty">Пусто</div>
      {% endfor %}
    </div>
  </section>
  {% endfor %}
</div>

{% endif %}
{% endblock %}