{# 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 rgba(255,255,255,0.08);">
      <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 rgba(255,255,255,0.06);">
      <img src="/static/icons/triangle-alert.svg?v={{ asset_v }}" class="w-4 h-4 invert opacity-70 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: rgba(255,255,255,0.06);">
      {% 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 rgba(255,255,255,0.08);">
      <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>
    <ul class="divide-y" style="border-color: rgba(255,255,255,0.06);">
      {% for issue in other_issues %}
        <li class="px-4 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>
  </section>
{% endif %}