{% extends "base.html" %}

{% block title %}Legislator Profiles{% endblock %}

{% block body %}
  <main class="shell">
    <section class="page-heading stacked-heading">
      <div>
        <h1>Legislator profiles</h1>
        <p>Full issue taxonomy · search any current legislator</p>
      </div>
    </section>

    <form class="wide-search legislator-search-form" action="/legislators" method="get">
      <label class="sr-only" for="legislator-search">Search legislators</label>
      <input
        id="legislator-search"
        type="search"
        name="q"
        value="{{ q }}"
        placeholder="Search by name or state"
        autocomplete="off"
        hx-get="/partials/legislator-suggestions"
        hx-trigger="input changed delay:200ms, search"
        hx-target="#legislator-suggestions"
        hx-swap="innerHTML">
      <label class="sr-only" for="legislator-page-size">Results per page</label>
      <select id="legislator-page-size" name="per_page" aria-label="Results per page">
        {% for option in per_page_options %}
          <option value="{{ option }}" {{ "selected" if option == per_page else "" }}>{{ option }}</option>
        {% endfor %}
      </select>
      <button type="submit">Search</button>
    </form>

    <div id="legislator-suggestions" aria-live="polite"></div>

    {% if q %}
      <section class="phonebook-results" aria-label="Matching legislators">
        <header>
          <h2>Matching legislators</h2>
          <span>{{ result_count }} result{{ "" if result_count == 1 else "s" }}</span>
        </header>
        {% if matches %}
          <ol class="phonebook-list" start="{{ ((page - 1) * per_page) + 1 }}">
            {% for option in matches %}
              <li>
                <a href="{{ build_legislator_url(legislator_id=option.legislator_id, q=q, per_page=per_page) }}">
                  <span class="phonebook-name">{{ option.display_name }}</span>
                  <span class="phonebook-meta">
                    {{ option.state or "US" }}{% if option.party %} · {{ option.party }}{% endif %}{% if option.chamber %} · {{ option.chamber }}{% endif %}
                  </span>
                </a>
              </li>
            {% endfor %}
          </ol>
          <nav class="pagination" aria-label="Legislator results pages">
            {% if previous_page %}
              <a href="{{ build_legislator_search_url(q=q, per_page=per_page, page=previous_page) }}">Previous</a>
            {% else %}
              <span>Previous</span>
            {% endif %}
            <strong>Page {{ page }} of {{ total_pages }}</strong>
            {% if next_page %}
              <a href="{{ build_legislator_search_url(q=q, per_page=per_page, page=next_page) }}">Next</a>
            {% else %}
              <span>Next</span>
            {% endif %}
          </nav>
        {% else %}
          <p class="empty-state">No legislators matched this search.</p>
        {% endif %}
      </section>
    {% endif %}

    {% if profile %}
      <section class="profile-card">
        <header class="profile-header">
          <div class="profile-identity">
            <span class="avatar">{{ profile.legislator.display_name.split(',')[0][:1] }}{{ profile.legislator.display_name.split(',')[-1].strip()[:1] }}</span>
            <div>
              <h2>{{ profile.legislator.display_name }} <span class="party-pill">{{ profile.legislator.chamber or "LEG" }}</span></h2>
              <p>{{ profile.legislator.state or "US" }} · {{ profile.legislator.party or "Unaffiliated" }}{% if profile.serving_since %} · Serving since {{ profile.serving_since }}{% endif %}</p>
            </div>
          </div>
          <div class="overall-score">
            <span>Overall avg</span>
            <strong>{{ profile.overall_score|round(0) if profile.overall_score is not none else "—" }}</strong>
            <small>/ 100</small>
          </div>
        </header>

        {% if profile.top_topics or profile.bottom_topics %}
          <div class="topic-panels">
            <article>
              <h3>Most important issues for</h3>
              {% for item in profile.top_topics %}
                <a class="topic-row" href="{{ build_legislator_url(legislator_id=profile.legislator.legislator_id, topic=item.topic) }}">
                  <strong class="score positive">{{ item.score|round(0) }}</strong>
                  <span>{{ item.topic }}</span>
                  <i style="width: {{ item.score }}%"></i>
                </a>
              {% endfor %}
            </article>
            <article>
              <h3 class="opposed-heading">Most important issues against</h3>
              {% for item in profile.bottom_topics %}
                <a class="topic-row {{ 'active' if item.topic == selected_topic else '' }}" href="{{ build_legislator_url(legislator_id=profile.legislator.legislator_id, topic=item.topic) }}">
                  <strong class="score negative">{{ item.score|round(0) }}</strong>
                  <span>{{ item.topic }}</span>
                  <i style="width: {{ item.score }}%"></i>
                </a>
              {% endfor %}
            </article>
          </div>

          <section class="profile-history">
            <h3>{{ selected_topic or "Topic" }} — score history</h3>
            <div class="chart-frame">{{ history_svg | safe }}</div>
            {% if history_series %}
              <div class="chart-legend compact" aria-label="Chart legend">
                {% for item in history_series %}
                  <div class="chart-legend-row">
                    <span class="chart-legend-line line-0"></span>
                    <span class="chart-legend-marker marker-0"></span>
                    <div class="chart-legend-copy">
                      <span class="chart-legend-label">{{ item.label }}</span>
                      <span class="chart-legend-meta">
                        {% if item.party %}{{ item.party }}{% endif %}{% if item.party and item.state %} · {% endif %}{% if item.state %}{{ item.state }}{% endif %}
                      </span>
                    </div>
                  </div>
                {% endfor %}
              </div>
            {% endif %}
          </section>
        {% else %}
          <p class="empty-state">No issue scores are available for this legislator yet.</p>
        {% endif %}
      </section>
    {% endif %}
  </main>
  <footer class="footer">
    <span>Actual record, not rhetoric</span>
    <span>Source: congressional roll-call votes</span>
    <span>Not affiliated with any political party or organization</span>
  </footer>
{% endblock %}