{# src/net_alpha/web/templates/_data_hygiene.html
   Phase 3 (I1, I2) restructure: missing-basis rows get one shared explanation
   card + compact inline forms (via `missing_basis_rows`).  All other issue
   categories (unpriced, orphan_sell, dup_key, tax_config_missing) continue to
   render in the legacy "Data quality" panel below. #}

{% set other_issues = issues | selectattr("category", "ne", "basis_unknown") | list %}

{% if missing_basis_rows %}
  <section class="panel mb-4" data-testid="data-hygiene-basis">
    <div class="px-4 py-3" style="border-bottom:0.5px solid var(--color-hairline);">
      <h2 class="text-lg">Missing cost basis</h2>
    </div>
    {# I1: single explanation card — appears once regardless of row count #}
    <div data-testid="hygiene-explanation"
         class="px-4 py-3 flex gap-3 items-start"
         style="border-bottom:0.5px solid var(--color-hairline);">
      <img src="/static/icons/triangle-alert.svg?v={{ asset_v }}" class="w-4 h-4 icon-mono mt-0.5 flex-shrink-0" alt="">
      <div class="text-[12px] text-label-2">
        <strong class="text-text">{{ missing_basis_rows|length }} item{% if missing_basis_rows|length != 1 %}s{% endif %} need attention</strong>
        &mdash;
        until basis is set, realized P/L can&rsquo;t be computed for these lots.
        Set a cost basis for each row below.
      </div>
    </div>
    {# I2: per-row inline forms #}
    <ul class="divide-y" style="border-color: var(--color-hairline);">
      {% for row in missing_basis_rows %}
        {% include "_data_hygiene_row.html" %}
      {% endfor %}
    </ul>
  </section>
{% endif %}

{% if other_issues %}
  <section class="panel mb-4" data-testid="data-hygiene">
    <div class="px-4 py-3" style="border-bottom:0.5px solid var(--color-hairline);">
      <h2 class="text-lg">Data quality</h2>
      <p class="text-xs text-label-2 mt-1">
        {{ other_issues|length }} item{{ "s" if other_issues|length != 1 else "" }} need attention from your imports.
      </p>
    </div>
    <div class="px-4 py-3 space-y-2">
      {% set _first_open = namespace(done=false) %}
      {% for key, label in [("missing_basis", "Missing basis"), ("no_quote", "No price quote"), ("missing_dates", "Missing dates")] %}
        {% if dq_groups is defined %}
          {% set group = dq_groups[key] %}
        {% else %}
          {% set group = other_issues | selectattr("category", "equalto", key) | list %}
        {% endif %}
        {% if group %}
          <details class="mb-2" {% if not _first_open.done %}open{% set _first_open.done = true %}{% endif %} data-testid="dq-bucket-{{ key }}">
            <summary class="cursor-pointer text-sm select-none">
              <span class="font-medium text-text">{{ group|length }}</span>
              <span class="text-label-2">{{ label }}</span>
            </summary>
            <ul class="mt-2 divide-y" style="border-color: var(--color-hairline);">
              {% for issue in group %}
                <li class="py-3 flex items-start gap-3" data-category="{{ issue.category }}">
                  <span class="badge badge-{{ issue.severity }}">{{ issue.severity }}</span>
                  <div class="flex-1">
                    <div class="text-sm font-medium">{{ issue.summary }}</div>
                    <div class="text-xs text-label-2 mt-1">{{ issue.detail }}</div>
                    {% if issue.fix_url %}
                      <a class="text-xs underline mt-2 inline-block" href="{{ issue.fix_url }}">go fix →</a>
                    {% endif %}
                    {% if issue.fix_form %}
                      <form class="mt-2 flex gap-2 items-center"
                            hx-post="{{ issue.fix_form.action }}"
                            hx-target="closest li"
                            hx-swap="outerHTML">
                        {% for k, v in issue.fix_form.hidden.items() %}
                          <input type="hidden" name="{{ k }}" value="{{ v }}">
                        {% endfor %}
                        {% for name, ftype in issue.fix_form.fields.items() %}
                          <label class="text-xs">
                            {{ name|replace("_", " ") }}:
                            <input type="{{ ftype }}" name="{{ name }}"
                                   class="border border-label-3 px-1 py-0.5 text-xs ml-1"
                                   required>
                          </label>
                        {% endfor %}
                        <button type="submit" class="text-xs px-2 py-0.5 bg-pos text-bg rounded">save</button>
                      </form>
                    {% endif %}
                  </div>
                </li>
              {% endfor %}
            </ul>
          </details>
        {% endif %}
      {% endfor %}
    </div>
  </section>
{% endif %}