{% extends "base.html" %}
{% from "partials/css_helpers.html" import thread_status_badge %}

{% block content %}
  <div class="d-flex flex-column gap-3">
    <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
      {% include "partials/repo_heading.html" %}
      {% set repo_tab = "threads" %}
      {% include "partials/repo_tabs.html" %}
    </div>

    <div class="card shadow-sm">
      <div class="card-header d-flex flex-column gap-3">
        <div class="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center justify-content-between gap-2">
          <span class="fw-semibold">Repo threads</span>
          <div class="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center gap-2">
            <button
              class="btn btn-sm btn-outline-secondary d-md-none"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#repo-threads-filter-collapse"
              aria-controls="repo-threads-filter-collapse"
              aria-expanded="false"
            >Filters</button>
            <div class="collapse d-md-block" id="repo-threads-filter-collapse">
              <form method="get" action="{{ repo_path }}/threads" class="d-flex flex-column flex-lg-row align-items-stretch align-items-lg-center gap-2" id="repo-threads-filter-form">
                <input type="hidden" name="sort" id="repo-threads-sort-value" value="{{ query.sort }}">
                <div class="d-flex align-items-center gap-2">
                  <button
                    class="btn btn-sm btn-outline-secondary"
                    type="button"
                    id="repo-threads-search-toggle"
                    aria-expanded="{% if query.search %}true{% else %}false{% endif %}"
                    aria-controls="repo-threads-search-row"
                  >Search</button>
                </div>
                <div class="d-flex align-items-center gap-2{% if not query.search %} d-none{% endif %}" id="repo-threads-search-row">
                  <input
                    type="text"
                    class="form-control form-control-sm"
                    id="repo-threads-search"
                    name="search"
                    value="{% if query.search %}{{ query.search }}{% endif %}"
                    placeholder="Search threads…"
                  >
                </div>
                <div class="d-flex align-items-center gap-2">
                  <label class="small text-muted" for="repo-threads-sort-field">Sort</label>
                  <div class="input-group input-group-sm">
                    <select class="form-select" id="repo-threads-sort-field" name="sort_field">
                      <option value="activity" {% if query.sort == "activity" or query.sort == "-activity" %}selected{% endif %}>Activity</option>
                      <option value="created" {% if query.sort == "created" or query.sort == "-created" %}selected{% endif %}>Created</option>
                    </select>
                    <button
                      class="btn btn-outline-secondary"
                      id="repo-threads-sort-direction"
                      type="button"
                      data-direction="{% if query.sort == "activity" or query.sort == "created" %}asc{% else %}desc{% endif %}"
                      aria-label="{% if query.sort == "activity" or query.sort == "created" %}Ascending{% else %}Descending{% endif %}"
                    >
                      {% if query.sort == "activity" or query.sort == "created" %}&uarr;{% else %}&darr;{% endif %}
                    </button>
                  </div>
                </div>
                <div class="d-flex align-items-center gap-2">
                  <label class="small text-muted" for="repo-threads-kind">Kind</label>
                  <select class="form-select form-select-sm" id="repo-threads-kind" name="kind">
                    <option value="" {% if query.kind | length == 0 %}selected{% endif %}>All</option>
                    <option value="discussion" {% if "discussion" in query.kind %}selected{% endif %}>Discussion</option>
                    <option value="change" {% if "change" in query.kind %}selected{% endif %}>Change</option>
                    <option value="task" {% if "task" in query.kind %}selected{% endif %}>Task</option>
                  </select>
                </div>
                <div class="d-flex align-items-center gap-2">
                  <label class="small text-muted" for="repo-threads-priority">Priority</label>
                  <select class="form-select form-select-sm" id="repo-threads-priority" name="priority">
                    <option value="" {% if query.priority | length == 0 %}selected{% endif %}>All</option>
                    <option value="now" {% if "now" in query.priority %}selected{% endif %}>Now</option>
                    <option value="later" {% if "later" in query.priority %}selected{% endif %}>Later</option>
                  </select>
                </div>
                <div class="d-flex align-items-center gap-2">
                  <label class="small text-muted" for="repo-threads-size">Size</label>
                  <select class="form-select form-select-sm" id="repo-threads-size" name="size">
                    <option value="" {% if query.size | length == 0 %}selected{% endif %}>All</option>
                    <option value="small" {% if "small" in query.size %}selected{% endif %}>Small</option>
                    <option value="large" {% if "large" in query.size %}selected{% endif %}>Large</option>
                  </select>
                </div>
                <div class="d-flex align-items-center gap-2">
                  <label class="small text-muted" for="repo-threads-status">Status</label>
                  <select class="form-select form-select-sm" id="repo-threads-status" name="status">
                    <option value="" {% if query.status | length == 0 %}selected{% endif %}>All</option>
                    <option value="open" {% if "open" in query.status %}selected{% endif %}>Open</option>
                    <option value="draft" {% if "draft" in query.status %}selected{% endif %}>Draft</option>
                    <option value="closed" {% if "closed" in query.status %}selected{% endif %}>Closed</option>
                    <option value="done" {% if "done" in query.status %}selected{% endif %}>Done</option>
                  </select>
                </div>
                <a class="btn btn-sm btn-outline-secondary" href="{{ repo_path }}/threads">Reset</a>
              </form>
            </div>
            {% if current_user %}
            <a class="btn btn-sm btn-primary" href="{{ repo_path }}/threads/new">New thread</a>
          {% else %}
              <a class="btn btn-sm btn-primary" href="{{ signin_href }}">Sign in to create</a>
          {% endif %}
          </div>
        </div>
      </div>
      <div class="card-body d-flex flex-column gap-3">
        {% if page.results | length == 0 %}
          <p class="text-muted mb-0">No threads found.</p>
        {% else %}
          {% for thread in page.results %}
            <div class="border rounded p-3">
              <div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3">
                <div>
                  <a class="text-decoration-none fw-semibold" href="{{ repo_path }}/threads/{{ thread.number }}">#{{ thread.number }} {{ thread.title }}</a>
                  <div class="text-muted small mt-1">
                    Started by {% with user_link_href = thread.created_by_href, user_link_username = thread.created_by, user_link_label = thread.created_by, user_link_class = "fw-semibold text-decoration-none" %}
   {% include "partials/hover_card_user_link.html" %}
 {% endwith %} {{ thread.created_at | humantime }}
                  </div>
                  <div class="d-flex flex-wrap align-items-center gap-3 mt-2">
                    {% with lifecycle=thread.lifecycle %}
                      {% include "repo/partials/thread_lifecycle.html" %}
                    {% endwith %}
                    <div class="text-muted small">{{ thread.summary_line }}</div>
                  </div>
                </div>
                <div class="pearing-thread-list-meta d-flex flex-column flex-sm-row align-items-start align-items-sm-center gap-2">
                  {% if thread.priority == "now" %}
                    <span class="badge text-bg-warning text-dark text-uppercase">Now</span>
                  {% endif %}
                  <span class="badge text-bg-info text-uppercase">{{ thread.kind }}</span>
                  <span class="badge {{ thread_status_badge(thread.status) }} text-uppercase">{{ thread.status }}</span>
                  <div class="text-muted small">
                    {% if thread.activity_at %}
                      <div>Active {{ thread.activity_at | humantime }}</div>
                    {% endif %}
                    <div title="{{ thread.updated_at }}">Updated {{ thread.updated_at | humantime }}</div>
                  </div>
                </div>
              </div>
              {% if thread.body_preview %}
                <p class="text-muted mb-0 mt-3">{{ thread.body_preview }}</p>
              {% endif %}
              {% if thread.participants | length > 0 %}
                <div class="small text-muted mt-3">
                  Participants:
                  {% for participant in thread.participants %}
                    {% with user_link_href = participant.href, user_link_username = participant.username, user_link_label = participant.username, user_link_class = "text-decoration-none" %}
                      {% include "partials/hover_card_user_link.html" %}
                    {% endwith %}{% if not loop.last %}, {% endif %}
                  {% endfor %}
                  {% if thread.participants_has_more %}
                    and more
                  {% endif %}
                </div>
              {% endif %}
            </div>
          {% endfor %}
        {% endif %}
      </div>
      {% with page=page, query=query, per_page_id="repo-threads-per-page", per_page_form="repo-threads-filter-form" %}
        {% include "partials/paging_footer.html" %}
      {% endwith %}
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script>
    (function () {
      var $searchToggle = $("#repo-threads-search-toggle");
      var $searchRow = $("#repo-threads-search-row");
      var $searchInput = $("#repo-threads-search");
      if ($searchToggle.length && $searchRow.length && $searchInput.length) {
        $searchToggle.on("click", function () {
          $searchRow.toggleClass("d-none");
          var hidden = $searchRow.hasClass("d-none");
          $searchToggle.attr("aria-expanded", hidden ? "false" : "true");
          if (!hidden) $searchInput.trigger("focus");
        });
      }

      var $form = $("#repo-threads-filter-form");
      var $sortField = $("#repo-threads-sort-field");
      var $sortValue = $("#repo-threads-sort-value");
      var $sortDirection = $("#repo-threads-sort-direction");
      if (!$form.length || !$sortField.length || !$sortValue.length || !$sortDirection.length) return;

      function syncSort() {
        var direction = $sortDirection.attr("data-direction") === "asc" ? "asc" : "desc";
        $sortValue.val(direction === "desc" ? "-" + $sortField.val() : $sortField.val());
        $sortDirection.html(direction === "desc" ? "&darr;" : "&uarr;");
        $sortDirection.attr(
          "aria-label",
          direction === "desc" ? "Descending" : "Ascending"
        );
      }

      $sortField.on("change", function () {
        syncSort();
        $form[0].requestSubmit();
      });
      $sortDirection.on("click", function () {
        $sortDirection.attr("data-direction",
          $sortDirection.attr("data-direction") === "desc" ? "asc" : "desc");
        syncSort();
        $form[0].requestSubmit();
      });
      syncSort();
    })();

    PearingScripts.initAutoSubmitFilters("repo-threads-filter-form", {
      includeFormAttribute: true
    });
  </script>
{% endblock %}