{% extends "base.html" %}
{% block title %}Issues & PRs - craft-dashboard{% endblock %}
{% block content %}
<h2>Issue &amp; PR triage</h2>

<div class="filter-bar" id="issue-filters" data-shareable-url-root="/issues" data-export-url-root="/issues/export">
  <div class="filter-group">
    <label>Projects</label>
    <div class="multiselect" data-name="project" data-hidden="project-hidden">
      <div class="multiselect__input-wrap" tabindex="0" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-label="Select projects">
        <span class="multiselect__placeholder">All projects</span>
        <div class="multiselect__chips"></div>
      </div>
      <div class="multiselect__dropdown u-hide">
        <div class="multiselect__options" role="listbox">
          {% for p in project_names %}
          <label class="multiselect__option" role="option">
            <input type="checkbox" value="{{ p }}" {% if p in (filter_project or "").split(",") and filter_project %}checked{% endif %} />
            <span>{{ p }}</span>
          </label>
          {% endfor %}
        </div>
      </div>
    </div>
    <input type="hidden" name="project" id="project-hidden" value="{{ filter_project or '' }}"
           hx-get="/issues/table"
           hx-target="#issue-table"
           hx-swap="outerHTML"
           hx-include=".filter-bar [name]"
           hx-sync="#issue-table:replace"
           hx-indicator="#loading-indicator"
           hx-trigger="change" />
  </div>

  <div class="filter-group">
    <label>Author Role</label>
    <div class="multiselect" data-name="author_role" data-hidden="role-hidden">
      <div class="multiselect__input-wrap" tabindex="0" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-label="Select author roles">
        <span class="multiselect__placeholder">Select roles...</span>
        <div class="multiselect__chips"></div>
      </div>
      <div class="multiselect__dropdown u-hide">
        <div class="multiselect__options" role="listbox">
          {% for role in ["maintainer", "contributor", "bot"] %}
          <label class="multiselect__option" role="option">
            <input type="checkbox" value="{{ role }}" {% if role in (filter_author_role or "").split(",") and filter_author_role %}checked{% endif %} />
            <span>{{ role|capitalize }}{% if role == "bot" %}s{% endif %}</span>
          </label>
          {% endfor %}
        </div>
      </div>
    </div>
    <input type="hidden" name="author_role" id="role-hidden" value="{{ filter_author_role or '' }}"
           hx-get="/issues/table"
           hx-target="#issue-table"
           hx-swap="outerHTML"
           hx-include=".filter-bar [name]"
           hx-sync="#issue-table:replace"
           hx-indicator="#loading-indicator"
           hx-trigger="change" />
  </div>

  <div class="filter-group">
    <label>Type</label>
    <div class="multiselect" data-name="type" data-hidden="type-hidden">
      <div class="multiselect__input-wrap" tabindex="0" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-label="Select types">
        <span class="multiselect__placeholder">All types</span>
        <div class="multiselect__chips"></div>
      </div>
      <div class="multiselect__dropdown u-hide">
        <div class="multiselect__options" role="listbox">
          {% for val, label in [("issue", "Issues"), ("pull_request", "PRs")] %}
          <label class="multiselect__option" role="option">
            <input type="checkbox" value="{{ val }}" {% if val in (filter_type or "").split(",") and filter_type %}checked{% endif %} />
            <span>{{ label }}</span>
          </label>
          {% endfor %}
        </div>
      </div>
    </div>
    <input type="hidden" name="type" id="type-hidden" value="{{ filter_type or '' }}"
           hx-get="/issues/table"
           hx-target="#issue-table"
           hx-swap="outerHTML"
           hx-include=".filter-bar [name]"
           hx-sync="#issue-table:replace"
           hx-indicator="#loading-indicator"
           hx-trigger="change" />
  </div>

  <div class="filter-group">
    <label>State</label>
    <div class="multiselect" data-name="state" data-hidden="state-hidden">
      <div class="multiselect__input-wrap" tabindex="0" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-label="Select states">
        <span class="multiselect__placeholder">Open</span>
        <div class="multiselect__chips"></div>
      </div>
      <div class="multiselect__dropdown u-hide">
        <div class="multiselect__options" role="listbox">
          {% for s in ["open", "closed", "merged"] %}
          <label class="multiselect__option" role="option">
            <input type="checkbox" value="{{ s }}" {% if s in (filter_state or "open").split(",") %}checked{% endif %} />
            <span>{{ s|capitalize }}</span>
          </label>
          {% endfor %}
        </div>
      </div>
    </div>
    <input type="hidden" name="state" id="state-hidden" value="{{ filter_state or 'open' }}"
           hx-get="/issues/table"
           hx-target="#issue-table"
           hx-swap="outerHTML"
           hx-include=".filter-bar [name]"
           hx-sync="#issue-table:replace"
           hx-indicator="#loading-indicator"
           hx-trigger="change" />
  </div>

  <div class="filter-group">
    <label>Actions</label>
    <div class="multiselect" data-name="action" data-hidden="action-hidden">
      <div class="multiselect__input-wrap" tabindex="0" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-label="Select actions">
        <span class="multiselect__placeholder">Select actions...</span>
        <div class="multiselect__chips"></div>
      </div>
      <div class="multiselect__dropdown u-hide">
        <div class="multiselect__options" role="listbox">
          {% for act in [
            "needs_triage", "needs_review", "keep_open",
            "close_resolved", "close_superseded", "close_stale", "close_duplicate", "close_not_a_bug", "close_not_mergeable",
            "closed_resolved", "closed_superseded", "closed_not_a_bug", "closed_stale"
          ] %}
          <label class="multiselect__option" role="option">
            <input type="checkbox" value="{{ act }}" {% if act in (filter_action or "").split(",") and filter_action %}checked{% endif %} />
            <span>{{ act|replace("_", " ")|title }}</span>
          </label>
          {% endfor %}
        </div>
      </div>
    </div>
    <input type="hidden" name="action" id="action-hidden" value="{{ filter_action or '' }}"
           hx-get="/issues/table"
           hx-target="#issue-table"
           hx-swap="outerHTML"
           hx-include=".filter-bar [name]"
           hx-sync="#issue-table:replace"
           hx-indicator="#loading-indicator"
           hx-trigger="change" />
  </div>

  <div class="filter-group">
    <label>Columns</label>
    <div class="multiselect" data-name="visible_columns" data-hidden="columns-hidden">
      <div class="multiselect__input-wrap" tabindex="0" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-label="Select visible columns">
        <span class="multiselect__placeholder">All columns</span>
        <div class="multiselect__chips"></div>
      </div>
      <div class="multiselect__dropdown u-hide">
        <div class="multiselect__options" role="listbox">
          {% for key, label in [("issue", "Issue"), ("title", "Title"), ("author", "Author"), ("age", "Age")] %}
          <label class="multiselect__option" role="option">
            <input type="checkbox" value="{{ key }}" checked />
            <span>{{ label }}</span>
          </label>
          {% endfor %}
          {% for key, label in (all_scores or {}).items() %}
          <label class="multiselect__option" role="option">
            <input type="checkbox" value="{{ key }}" {% if key in (filter_scores or "impact,actionability,quick_win").split(",") %}checked{% endif %} />
            <span>{{ label }}</span>
          </label>
          {% endfor %}
          {% for key, label in [("action", "Action"), ("summary", "Summary")] %}
          <label class="multiselect__option" role="option">
            <input type="checkbox" value="{{ key }}" checked />
            <span>{{ label }}</span>
          </label>
          {% endfor %}
        </div>
      </div>
    </div>
    <input type="hidden"
           id="columns-hidden"
           value="issue,title,author,age{% if active_scores %},{{ active_scores | join(',') }}{% endif %},action,summary" />
    <input type="hidden" name="scores" id="scores-hidden" value="{{ filter_scores if filter_scores is not none else 'impact,actionability,quick_win' }}"
           hx-get="/issues/table"
           hx-target="#issue-table"
           hx-swap="outerHTML"
           hx-include=".filter-bar [name]"
           hx-sync="#issue-table:replace"
           hx-indicator="#loading-indicator"
           hx-trigger="change" />
  </div>

  <input type="hidden" name="source" value="{{ filter_source or '' }}" />
  <input type="hidden" name="sort" value="{{ sort_by or 'impact' }}" />

  <div class="filter-group">
    <label>Search</label>
    <div class="search-input-wrap">
      <input type="search" name="search" placeholder="Title, project, issue number... (press Enter)"
             value="{{ filter_search or '' }}"
             hx-get="/issues/table"
             hx-target="#issue-table"
             hx-swap="outerHTML"
             hx-include=".filter-bar [name]"
             hx-sync="#issue-table:replace"
             hx-indicator="#loading-indicator"
             hx-trigger="search, keyup[key=='Enter']"
             style="min-width:200px;" />
      <button type="button" class="search-input-button" aria-label="Search"
              hx-get="/issues/table"
              hx-target="#issue-table"
              hx-swap="outerHTML"
              hx-include=".filter-bar [name]"
              hx-sync="#issue-table:replace"
              hx-indicator="#loading-indicator"
>
        <i class="p-icon--search" aria-hidden="true"></i>
      </button>
    </div>
  </div>

  <div class="filter-group">
    <label>Per Page</label>
    <select name="per_page"
            hx-get="/issues/table"
            hx-target="#issue-table"
            hx-swap="outerHTML"
            hx-include=".filter-bar [name]"
            hx-sync="#issue-table:replace"
            hx-indicator="#loading-indicator"
            hx-push-url="false">
      <option value="100" {% if per_page == 100 %}selected{% endif %}>100</option>
      <option value="250" {% if per_page == 250 %}selected{% endif %}>250</option>
      <option value="1000" {% if per_page == 1000 %}selected{% endif %}>1,000</option>
      <option value="0" {% if per_page == 0 %}selected{% endif %}>All (max 2,000)</option>
    </select>
  </div>

  <div class="filter-group filter-group--actions">
    <label>&nbsp;</label>
    <a id="reset-filters-link" class="p-button" href="/issues" title="Reset search and filters to their defaults">Reset filters</a>
  </div>
  <div class="filter-group filter-group--actions">
    <label>&nbsp;</label>
    <a id="export-json-link" class="p-button" href="/issues/export">Export JSON</a>
  </div>
  <input type="hidden" name="llm_status" value="{{ filter_llm_status or '' }}" />
</div>

<div id="loading-indicator" class="htmx-indicator" style="text-align:center;padding:1rem;">
  <i class="p-icon--spinner u-animation--spin"></i> Loading...
</div>

{% include "issues/partials/issue_table.html" %}
{% endblock %}

{% block scripts %}
<script src="/static/js/issues-filters.js"></script>
<script src="/static/js/issue-columns.js"></script>
<script src="/static/js/multiselect.js"></script>
<script src="/static/js/table-interact.js"></script>
{% endblock %}