{% load civic_tags %}
<div class="card-surface rounded-3xl p-6" data-poll data-poll-id="{{ poll.id }}" data-poll-status="{{ poll.status }}">
  <p class="text-xs font-semibold uppercase tracking-wider text-gold-deep">{{ poll.category }}</p>
  <h3 class="mt-2 text-lg font-bold text-forest">{{ poll.question }}</h3>
  {% if poll.description %}<p class="mt-2 text-sm text-muted">{{ poll.description }}</p>{% endif %}
  <ul class="mt-5 space-y-3" data-poll-options>
    {% for opt in poll.options %}
    <li>
      <button type="button" data-option-id="{{ opt.id }}" class="group w-full text-left" {% if poll.status == 'closed' %}disabled{% endif %}>
        <span class="flex items-center justify-between text-sm font-medium text-forest"><span>{{ opt.label }}</span><span class="tabular-nums" data-option-pct>{% if poll.totalVotes %}{{ opt.votes|bn }}{% else %}০{% endif %}</span></span>
        <span class="mt-1.5 block h-2 overflow-hidden rounded-full bg-forest/10"><span class="block h-full rounded-full bg-emerald transition-all duration-700" style="width: {% if poll.totalVotes %}{% widthratio opt.votes poll.totalVotes 100 %}{% else %}0{% endif %}%" data-option-bar></span></span>
      </button>
    </li>
    {% endfor %}
  </ul>
  <p class="mt-4 text-xs text-muted"><span data-total>{{ poll.totalVotes|bn_num }}</span> জন ভোট দিয়েছেন</p>
  <p class="mt-2 min-h-[1.25rem] text-xs font-semibold text-emerald" data-poll-msg role="status"></p>
</div>