{% extends "base.html" %}

{% block page_title %}{{ page_title | default(value="Opinion Polls") }}{% endblock %}

{% block head %}
{% endblock %}

{% block content %}
<div class="opinion-poll-container mx-auto w-full max-w-4xl px-4 py-6 pb-12" data-plugin="opinion-poll" data-disclaimer-agreed="{% if disclaimer_agreed %}1{% else %}0{% endif %}" data-has-ballot-profile="{% if has_ballot_profile %}1{% else %}0{% endif %}">
  <div class="opinion-poll-header mb-4 flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
    <h1 class="opinion-poll-title m-0 text-2xl font-semibold text-foreground">{{ page_title | default(value="Opinion Polls") }}</h1>
    {% if can_create %}
    <a class="opinion-poll-create-btn blocks-button blocks-button-primary w-fit" href="/plugins/opinion-poll/create">+ New poll</a>
    {% endif %}
  </div>

  {% if migration_error %}
  <div class="opinion-poll-card mb-4 rounded-xl border border-divider bg-surface p-4 text-foreground" role="status">
    Poll expiry data could not be fully updated: {{ migration_error }}
  </div>
  {% endif %}

  <div id="op-onboard-gate" {% if disclaimer_agreed %}hidden{% endif %}>
    <div class="opinion-poll-card mb-4 rounded-xl border border-divider bg-surface p-4 sm:p-5">
      <p class="opinion-poll-question mb-2 text-lg font-semibold text-foreground">Before you vote</p>
      <p class="opinion-poll-notice text-sm text-muted">Fill your details once, read the disclaimer, then choose Agree or Disagree. Your choice is saved on the server and polls are fetched only after you agree.</p>
    </div>
  </div>

  {% if ballot_form %}
  <div class="opinion-poll-card mb-4 rounded-xl border border-divider bg-surface p-4 sm:p-5" id="op-ballot-form" data-ballot-required="{% if ballot_form.required %}1{% else %}0{% endif %}">
    <p class="opinion-poll-question mb-2 text-lg font-semibold text-foreground">{{ ballot_form.label }}</p>
    <p class="opinion-poll-notice text-sm text-muted">{% if has_ballot_profile %}Your voter details are saved and read-only.{% else %}Fill this once — it is saved with every vote on this page{% if ballot_form.required %} and required before voting{% endif %}.{% endif %}</p>
    {% for f in ballot_form.fields %}
    {% set saved = ballot_answers[f.name] | default(value="") %}
    <div class="opinion-poll-ballot-field blocks-form-field mb-3">
      <label for="op-ballot-{{ f.name }}">{{ f.label }}{% if f.required %} *{% endif %}</label>
      {% if f.field_type == "textarea" %}
      <textarea id="op-ballot-{{ f.name }}" class="blocks-input w-full" data-ballot-field="{{ f.name }}" data-required="{% if f.required %}1{% else %}0{% endif %}" data-label="{{ f.label }}" {% if has_ballot_profile %}readonly{% endif %}>{{ saved }}</textarea>
      {% elif f.field_type == "select" %}
      <select id="op-ballot-{{ f.name }}" class="blocks-input w-full" data-ballot-field="{{ f.name }}" data-required="{% if f.required %}1{% else %}0{% endif %}" data-label="{{ f.label }}" {% if has_ballot_profile %}disabled{% endif %}>
        <option value="">— Select —</option>
        {% for o in f.options | default(value=[]) %}
        <option value="{{ o.value }}"{% if saved == o.value %} selected{% endif %}>{{ o.label }}</option>
        {% endfor %}
      </select>
      {% elif f.field_type == "checkbox" %}
      <input id="op-ballot-{{ f.name }}" class="accent-brand" type="checkbox" data-ballot-field="{{ f.name }}" data-required="{% if f.required %}1{% else %}0{% endif %}" data-label="{{ f.label }}"{% if saved == true or saved == "true" %} checked{% endif %} {% if has_ballot_profile %}disabled{% endif %}>
      {% elif f.field_type == "number" %}
      <input id="op-ballot-{{ f.name }}" class="blocks-input w-full" type="number" data-ballot-field="{{ f.name }}" data-required="{% if f.required %}1{% else %}0{% endif %}" data-label="{{ f.label }}" value="{{ saved }}" {% if has_ballot_profile %}readonly{% endif %}>
      {% elif f.field_type == "date" %}
      <input id="op-ballot-{{ f.name }}" class="blocks-input w-full" type="date" data-ballot-field="{{ f.name }}" data-required="{% if f.required %}1{% else %}0{% endif %}" data-label="{{ f.label }}" value="{{ saved }}" {% if has_ballot_profile %}readonly{% endif %}>
      {% elif f.field_type == "email" %}
      <input id="op-ballot-{{ f.name }}" class="blocks-input w-full" type="email" data-ballot-field="{{ f.name }}" data-required="{% if f.required %}1{% else %}0{% endif %}" data-label="{{ f.label }}" value="{{ saved }}" autocomplete="email" {% if has_ballot_profile %}readonly{% endif %}>
      {% elif f.field_type == "tel" %}
      <input id="op-ballot-{{ f.name }}" class="blocks-input w-full" type="tel" data-ballot-field="{{ f.name }}" data-required="{% if f.required %}1{% else %}0{% endif %}" data-label="{{ f.label }}" value="{{ saved }}" autocomplete="tel" {% if has_ballot_profile %}readonly{% endif %}>
      {% else %}
      <input id="op-ballot-{{ f.name }}" class="blocks-input w-full" type="text" data-ballot-field="{{ f.name }}" data-required="{% if f.required %}1{% else %}0{% endif %}" data-label="{{ f.label }}" value="{{ saved }}" {% if has_ballot_profile %}readonly{% endif %}>
      {% endif %}
    </div>
    {% endfor %}
    <p class="opinion-poll-error mt-2 text-sm text-danger" data-ballot-error role="alert" hidden></p>
  </div>
  {% endif %}

  {% if disclaimer %}
  <div class="opinion-poll-card opinion-poll-disclaimer mb-4 rounded-xl border border-divider bg-surface p-4 sm:p-5" id="op-disclaimer-card">
    <p class="opinion-poll-question mb-2 text-lg font-semibold text-foreground">Voter disclaimer</p>
    <div class="opinion-poll-notice whitespace-pre-wrap text-sm text-muted">{{ disclaimer | safe }}</div>
    {% if disclaimer_agreed %}
    <div class="opinion-poll-disclaimer-agreed">
      <span class="opinion-poll-badge rounded-full border border-divider bg-canvas px-2 py-0.5 text-xs text-muted">Agreed</span>
    </div>
    {% else %}
    <div class="opinion-poll-onboard-actions mt-4 flex flex-wrap gap-3">
      <button type="button" class="opinion-poll-vote-btn blocks-button blocks-button-primary w-fit" id="op-agree-btn">Agree</button>
      <button type="button" class="opinion-poll-cancel blocks-button blocks-button-secondary" id="op-disagree-btn">Disagree</button>
    </div>
    <p class="opinion-poll-error mt-2 text-sm text-danger" id="op-onboard-error" role="alert" hidden></p>
    {% endif %}
  </div>
  {% endif %}
  {% if disclaimer_agreed %}
  <div class="opinion-poll-card mb-4 rounded-xl border border-divider bg-surface p-4 sm:p-5" id="op-onboard-view">
    <p class="opinion-poll-question mb-2 text-lg font-semibold text-foreground">Your details</p>
    <p class="opinion-poll-notice text-sm text-muted">Saved and read-only. <button type="button" class="opinion-poll-link-btn text-sm text-brand underline" id="op-details-view">View my details</button></p>
  </div>
  {% endif %}

  <div id="op-polls-wrap" {% if disclaimer and not disclaimer_agreed %}hidden{% endif %}>
  <div class="opinion-poll-tabs mb-4 flex flex-wrap gap-2" role="group" aria-label="Filter polls">
    <button type="button" aria-pressed="true" class="opinion-poll-tab active blocks-button blocks-button-primary" data-tab="to-vote">To Vote</button>
    <button type="button" aria-pressed="false" class="opinion-poll-tab blocks-button blocks-button-secondary" data-tab="voted">Voted</button>
    <button type="button" aria-pressed="false" class="opinion-poll-tab blocks-button blocks-button-secondary" data-tab="closed">Closed</button>
    {% if can_create %}
    <button type="button" aria-pressed="false" class="opinion-poll-tab blocks-button blocks-button-secondary" data-tab="mine">My polls</button>
    {% endif %}
  </div>
  <div id="opinion-poll-list-all">
    {% for poll in polls %}
    <div class="opinion-poll-card mb-4 rounded-xl border border-divider bg-surface p-4 sm:p-5" data-poll-id="{{ poll.id }}" data-multi="{% if poll.allow_multi_choice == 1 %}1{% else %}0{% endif %}" data-has-voted="{% if poll.has_voted %}1{% else %}0{% endif %}" data-expires-at="{{ poll.expires_at | default(value="") }}">
      <p class="opinion-poll-question mb-2 text-lg font-semibold text-foreground">{{ poll.question }}</p>
      <div class="opinion-poll-meta mb-3 flex flex-wrap items-center gap-2 text-sm text-muted">
        <span>By {{ poll.creator_name | default(value="Someone") }}</span>
        <span>{{ poll.created_at | date_in_tz(timezone=settings.timezone, format="%d %b %Y") }}</span>
        <span>{{ poll.voter_count }} voter{% if poll.voter_count != 1 %}s{% endif %}</span> <span class="opinion-poll-time-left" aria-live="polite"></span>
        <span class="opinion-poll-badge rounded-full border border-divider bg-canvas px-2 py-0.5 text-xs text-muted">{% if poll.results_public == 1 %}Public results{% elif poll.results_public == 2 %}Results on close{% else %}Private results{% endif %}</span>
        <span class="opinion-poll-badge rounded-full border border-divider bg-canvas px-2 py-0.5 text-xs text-muted">{% if poll.allow_multi_choice == 1 %}Multi-choice{% else %}Single choice{% endif %}</span>
        {% if poll.is_expired == 1 %}<span class="opinion-poll-badge rounded-full border border-divider bg-canvas px-2 py-0.5 text-xs text-muted">Expired</span>{% endif %}
      </div>

      {% if poll.is_active == 1 and poll.is_expired == 0 and not poll.has_voted %}
      <div class="opinion-poll-options mb-3 grid gap-2">
        {% for opt in poll.options %}
        <label class="opinion-poll-option flex cursor-pointer items-center gap-2 rounded-lg border border-divider bg-canvas px-3 py-2 text-foreground">
          {% if poll.allow_multi_choice == 1 %}
          <input type="checkbox" class="accent-brand" name="poll-{{ poll.id }}" value="{{ loop.index0 }}">
          {% else %}
          <input type="radio" class="accent-brand" name="poll-{{ poll.id }}" value="{{ loop.index0 }}">
          {% endif %}
          <span>{{ opt }}</span>
        </label>
        {% endfor %}
      </div>
      <button type="button" class="opinion-poll-vote-btn blocks-button blocks-button-primary w-fit" data-vote="{{ poll.id }}">Vote</button>
      <p class="opinion-poll-error mt-2 text-sm text-danger" data-error="{{ poll.id }}" role="alert" hidden></p>
      {% endif %}

      {% if poll.has_voted %}
      <p class="opinion-poll-notice text-sm text-muted">You voted on this poll.</p>
      {% endif %}

      {% if poll.results_visible %}
      <div class="opinion-poll-results mt-2 grid gap-2">
        {% for opt in poll.options %}
        {% set opt_idx = loop.index0 %}
        {% set_global opt_votes = 0 %}
        {% for t in poll.tallies | default(value=[]) %}
        {% if t.option_index == opt_idx %}{% set_global opt_votes = t.votes %}{% endif %}
        {% endfor %}
        <div class="opinion-poll-result-row grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1">
          <span class="opinion-poll-result-label text-sm text-foreground">{{ opt }}</span>
          <span class="opinion-poll-result-count text-sm text-muted">{{ opt_votes }} vote{% if opt_votes != 1 %}s{% endif %}</span>
          <div class="opinion-poll-result-track col-span-2 h-2 overflow-hidden rounded-full border border-divider bg-canvas">
            {% if poll.vote_count > 0 %}
            <div class="opinion-poll-result-bar h-full bg-brand" style="width: {{ (opt_votes * 100 / poll.vote_count) | round }}%;"></div>
            {% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      {% if poll.results_public == 2 %}
      <p class="opinion-poll-notice text-sm text-muted">Results for this poll will be visible to everyone once the poll closes. Individual choices are never published.</p>
      {% elif poll.results_public == 0 %}
      <p class="opinion-poll-notice text-sm text-muted">Results for this poll are private and visible only to the creator. Individual choices are never published.</p>
      {% endif %}
      {% endif %}
    </div>
    {% else %}
    <div class="opinion-poll-empty rounded-xl border border-dashed border-divider bg-surface px-4 py-8 text-center text-muted">
      <p>No active polls yet. Check back soon.</p>
      {% if can_create %}
      <p><a href="/plugins/opinion-poll/create">Create the first poll</a></p>
      {% endif %}
    </div>
    {% endfor %}
  </div>

  <div id="opinion-poll-list-closed" hidden>
    {% for poll in closed_polls %}
    <div class="opinion-poll-card mb-4 rounded-xl border border-divider bg-surface p-4 sm:p-5" data-poll-id="{{ poll.id }}">
      <p class="opinion-poll-question mb-2 text-lg font-semibold text-foreground">{{ poll.question }}</p>
      <div class="opinion-poll-meta mb-3 flex flex-wrap items-center gap-2 text-sm text-muted">
        <span>By {{ poll.creator_name | default(value="Someone") }}</span>
        <span>{{ poll.created_at | date_in_tz(timezone=settings.timezone, format="%d %b %Y") }}</span>
        <span class="opinion-poll-badge rounded-full border border-divider bg-canvas px-2 py-0.5 text-xs text-muted">{% if poll.results_public == 1 %}Public results{% elif poll.results_public == 2 %}Results on close{% else %}Private results{% endif %}</span>
      </div>
      {% if poll.results_visible %}
      <p class="opinion-poll-notice text-sm text-muted">Total votes: {{ poll.vote_count }}</p>
      <div class="opinion-poll-results mt-2 grid gap-2">
        {% for opt in poll.options %}
        {% set opt_idx = loop.index0 %}
        {% set_global opt_votes = 0 %}
        {% for t in poll.tallies | default(value=[]) %}
        {% if t.option_index == opt_idx %}{% set_global opt_votes = t.votes %}{% endif %}
        {% endfor %}
        <div class="opinion-poll-result-row grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1">
          <span class="opinion-poll-result-label text-sm text-foreground">{{ opt }}</span>
          <span class="opinion-poll-result-count text-sm text-muted">{{ opt_votes }} vote{% if opt_votes != 1 %}s{% endif %}</span>
          <div class="opinion-poll-result-track col-span-2 h-2 overflow-hidden rounded-full border border-divider bg-canvas">
            {% if poll.vote_count > 0 %}
            <div class="opinion-poll-result-bar h-full bg-brand" style="width: {{ (opt_votes * 100 / poll.vote_count) | round }}%;"></div>
            {% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <p class="opinion-poll-notice text-sm text-muted">Results for this poll are private.</p>
      {% endif %}
    </div>
    {% else %}
    <div class="opinion-poll-empty rounded-xl border border-dashed border-divider bg-surface px-4 py-8 text-center text-muted">
      <p>No closed polls yet.</p>
    </div>
    {% endfor %}
  </div>

  {% if can_create %}
  <div id="opinion-poll-list-mine" hidden>
    {% for poll in my_polls %}
    <div class="opinion-poll-card mb-4 rounded-xl border border-divider bg-surface p-4 sm:p-5" data-poll-id="{{ poll.id }}" data-multi="{% if poll.allow_multi_choice == 1 %}1{% else %}0{% endif %}" data-expires-at="{{ poll.expires_at | default(value="") }}">
      <p class="opinion-poll-question mb-2 text-lg font-semibold text-foreground">{{ poll.question }}</p>
      <div class="opinion-poll-meta mb-3 flex flex-wrap items-center gap-2 text-sm text-muted">
        <span>{{ poll.voter_count }} voter{% if poll.voter_count != 1 %}s{% endif %}</span> <span class="opinion-poll-time-left" aria-live="polite"></span>
        <span class="opinion-poll-badge rounded-full border border-divider bg-canvas px-2 py-0.5 text-xs text-muted">{% if poll.results_public == 1 %}Public results{% elif poll.results_public == 2 %}Results on close{% else %}Private results{% endif %}</span>
        <span class="opinion-poll-badge rounded-full border border-divider bg-canvas px-2 py-0.5 text-xs text-muted">{% if poll.is_active == 1 %}Active{% else %}Closed{% endif %}</span>
        {% if poll.expires_at %}<span>Expires {{ poll.expires_at | date_in_tz(timezone=settings.timezone, format="%d %b %Y %H:%M") }}</span>{% endif %}
      </div>
      <div class="opinion-poll-results mt-2 grid gap-2">
        {% for opt in poll.options %}
        {% set opt_idx = loop.index0 %}
        {% set_global opt_votes = 0 %}
        {% for t in poll.tallies | default(value=[]) %}
        {% if t.option_index == opt_idx %}{% set_global opt_votes = t.votes %}{% endif %}
        {% endfor %}
        <div class="opinion-poll-result-row grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1">
          <span class="opinion-poll-result-label text-sm text-foreground">{{ opt }}</span>
          <span class="opinion-poll-result-count text-sm text-muted">{{ opt_votes }} vote{% if opt_votes != 1 %}s{% endif %}</span>
          <div class="opinion-poll-result-track col-span-2 h-2 overflow-hidden rounded-full border border-divider bg-canvas">
            {% if poll.vote_count > 0 %}
            <div class="opinion-poll-result-bar h-full bg-brand" style="width: {{ (opt_votes * 100 / poll.vote_count) | round }}%;"></div>
            {% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% else %}
    <div class="opinion-poll-empty rounded-xl border border-dashed border-divider bg-surface px-4 py-8 text-center text-muted">
      <p>You have not created any polls yet.</p>
      <p><a href="/plugins/opinion-poll/create">Create a poll</a></p>
    </div>
    {% endfor %}
  </div>
  {% endif %}
  </div>
</div>

<script src="/plugins/opinion-poll/assets/js/opinion_poll.js"></script>
{% endblock %}