{% load i18n catalog_tags %}
{% comment %}
Reusable lint issue list with filter toolbar.
Required context: `issues` (sequence of LintIssue), `error_count`, `warning_count`, `hint_count`.
Hints are heuristic checks (false positives common) — they appear here for
transparency but do NOT subtract from the Insights health score.
{% endcomment %}
<div class="cg-lint-list" data-cg-lint-list>
  <div class="cg-lint-list__filters" data-cg-lint-filters>
    <button type="button" class="cg-lint-chip cg-active" data-cg-filter="all">
      {% trans "All" %} <span class="cg-lint-chip__count">{{ issues|length }}</span>
    </button>
    <button type="button" class="cg-lint-chip cg-lint-chip--error" data-cg-filter="error">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <circle cx="12" cy="12" r="9"/><path d="M15 9l-6 6M9 9l6 6"/>
      </svg>
      {% trans "Errors" %} <span class="cg-lint-chip__count">{{ error_count }}</span>
    </button>
    <button type="button" class="cg-lint-chip cg-lint-chip--warning" data-cg-filter="warning">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M12 3 2 21h20L12 3z"/><path d="M12 10v4M12 18h.01"/>
      </svg>
      {% trans "Warnings" %} <span class="cg-lint-chip__count">{{ warning_count }}</span>
    </button>
    {% if hint_count %}
      <button type="button" class="cg-lint-chip cg-lint-chip--hint" data-cg-filter="hint" title="{% trans 'Heuristic checks — they do not affect the health score' %}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/>
        </svg>
        {% trans "Hints" %} <span class="cg-lint-chip__count">{{ hint_count }}</span>
      </button>
    {% endif %}
    <input type="search" class="cg-lint-list__search" data-cg-lint-search placeholder="{% trans 'Filter rule…' %}" autocomplete="off">
  </div>

  <ul class="cg-lint__issues">
    {% for issue in issues %}
      <li class="cg-lint__issue cg-lint__issue--{{ issue.severity }}"
          data-cg-issue-severity="{{ issue.severity }}"
          data-cg-issue-rule="{{ issue.rule }}">
        <span class="cg-lint__icon cg-lint__icon--{{ issue.severity }}" aria-hidden="true">
          {% if issue.severity == 'error' %}
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="9"/><path d="M15 9l-6 6M9 9l6 6"/>
            </svg>
          {% elif issue.severity == 'hint' %}
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/>
            </svg>
          {% else %}
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round">
              <path d="M12 3 2 21h20L12 3z"/><path d="M12 10v4M12 18h.01"/>
            </svg>
          {% endif %}
        </span>
        <button type="button" class="cg-lint__rule" data-cg-rule-filter="{{ issue.rule }}" title="{% trans 'Click to filter by this rule' %}">{{ issue.rule }}</button>
        <span class="cg-lint__msg">{% lint_message issue %}</span>
        {% if issue.suggestion %}
          <button type="button" class="cg-lint__fix" data-cg-copy="{{ issue.suggestion }}" title="{{ issue.suggestion }}" aria-label="{% trans 'Copy suggested fix' %}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9.75a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"/></svg>
            <span>{% trans "Copy stub" %}</span>
          </button>
        {% endif %}
        {% if issue.line %}<span class="cg-lint__line" tabindex="0" title="{% blocktranslate with n=issue.line %}Line {{ n }} of the component file{% endblocktranslate %}">L{{ issue.line }}</span>{% endif %}
      </li>
    {% endfor %}
  </ul>

  <p class="cg-lint-list__empty" data-cg-lint-empty hidden>{% trans "No issues match this filter." %}</p>
</div>