{% extends "base.html" %}

{% block title %}Compare Legislators{% endblock %}

{% block body %}
  <main class="shell">
    <section class="page-heading stacked-heading">
      <div>
        <h1>Compare legislators</h1>
        <p>Up to 4 legislators · up to 8 issue axes · each polygon = one legislator's full issue profile</p>
      </div>
    </section>

    <section class="compare-controls">
      <form class="wide-search compare-search" action="/compare" method="get">
        <label class="sr-only" for="compare-legislator-search">Search legislators</label>
        {% for legislator_id in selected_legislators %}
          <input type="hidden" name="legislator_id" value="{{ legislator_id }}">
        {% endfor %}
        {% for topic in topics %}
          <input type="hidden" name="topic" value="{{ topic }}">
        {% endfor %}
        <input
          id="compare-legislator-search"
          type="search"
          name="q"
          value="{{ q }}"
          placeholder="Search legislators to add"
          autocomplete="off">
        <button type="submit">Search</button>
      </form>

      <h2>Legislators ({{ selected_legislator_options|length }} / 4)</h2>
      <div class="result-chips">
        {% for legislator in selected_legislator_options %}
          {% set without = selected_legislators | reject('equalto', legislator.legislator_id) | list %}
          <a href="{{ build_compare_url(legislator_ids=without, topics=topics, q=q) }}"><span class="legend-dot dot-{{ loop.index0 }}"></span>{{ legislator.display_name }}{% if legislator.state %} — {{ legislator.state }}{% endif %} ×</a>
        {% endfor %}
        {% if selected_legislator_options|length < 4 %}
          {% for option in legislator_options %}
            {% if option.legislator_id not in selected_legislators %}
              <a class="dashed-chip" href="{{ build_compare_url(legislator_ids=selected_legislators + [option.legislator_id], topics=topics, q=q) }}">+ {{ option.display_name }}</a>
            {% endif %}
          {% endfor %}
        {% endif %}
      </div>

      <h2>Issue axes ({{ topics|length }} / 8)</h2>
      <div class="axis-chips">
        {% for topic in topics %}
          {% set without_topic = topics[:loop.index0] + topics[loop.index:] %}
          <a href="{{ build_compare_url(legislator_ids=selected_legislators, topics=without_topic, q=q) }}">{{ topic }} ×</a>
        {% endfor %}
        {% if topics|length < 8 %}
          {% for topic in topic_options %}
            {% if topic not in topics %}
              <a href="{{ build_compare_url(legislator_ids=selected_legislators, topics=topics + [topic], q=q) }}">{{ topic }}</a>
            {% endif %}
          {% endfor %}
        {% endif %}
      </div>
    </section>

    <section class="compare-card">
      <div class="radar-frame">{{ radar_svg | safe }}</div>
      <aside class="compare-legend">
        <h2>Legend</h2>
        {% for item in series %}
          <div class="legend-row">
            <span class="legend-line line-{{ loop.index0 }}"></span>
            <div>
              <strong>{{ item.legislator.display_name }}</strong>
              <small>{{ item.legislator.state or "US" }} · {{ item.legislator.party or "—" }} · avg {{ item.average_score|round(0) if item.average_score is not none else "—" }}</small>
            </div>
          </div>
        {% endfor %}
        <p>Outer ring = 100% support. Each axis is scored independently against full roll-call record.</p>
        <p><em>Max 4 legislators · max 8 axes</em></p>
      </aside>
    </section>
  </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 %}