{% extends "base.html" %}

{% block page_title %}New Poll{% 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">
  <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">New poll</h1>
    <a class="opinion-poll-cancel blocks-button blocks-button-secondary" href="/plugins/opinion-poll">Back to polls</a>
  </div>

  {% if not can_create %}
  <div class="opinion-poll-empty rounded-xl border border-dashed border-divider bg-surface px-4 py-8 text-center text-muted">
    <p>Only designated poll creators can create polls. Please contact an administrator.</p>
  </div>
  {% else %}
  <div id="opinion-poll-create-config"
       hidden
       data-max-options="{{ max_options | default(value=10) }}"
       data-multi-default="{% if multi_default %}1{% else %}0{% endif %}"
       data-results-default="{{ results_default | default(value="public") }}"
       data-default-expiry-days="{{ default_expiry_days | default(value=0) }}"></div>

  <form id="opinion-poll-create-form" class="opinion-poll-form-card grid gap-3 rounded-xl border border-divider bg-surface p-4 sm:p-5">
    <div class="blocks-form-field">
      <label for="op-question">Question</label>
      <input id="op-question" name="question" class="blocks-input" type="text" maxlength="500" required placeholder="What do you want to ask?">
    </div>

    <div class="blocks-form-field">
      <span class="text-sm font-semibold text-foreground">Options</span>
      <div id="op-options"></div>
      <button type="button" id="op-add-option" class="opinion-poll-add-option blocks-button blocks-button-secondary mt-1 w-fit">+ Add option</button>
    </div>

    <div class="opinion-poll-checkbox-row mt-3 flex items-center gap-2 text-foreground">
      <input type="checkbox" class="accent-brand" id="op-multi" name="allow_multi_choice">
      <label for="op-multi">Allow voters to select multiple options</label>
    </div>

    <div class="blocks-form-field">
      <span class="text-sm font-semibold text-foreground">Results visibility</span>
      <div class="opinion-poll-radio-group grid gap-3 text-foreground">
        <label class="flex items-center gap-2"><input type="radio" class="accent-brand" name="results_visibility" value="public"> Public — everyone sees results</label>
        <label class="flex items-center gap-2"><input type="radio" class="accent-brand" name="results_visibility" value="private"> Private — only I (and admins) see results</label>
        <label class="flex items-center gap-2"><input type="radio" class="accent-brand" name="results_visibility" value="public_on_close"> Public on close — results hidden until poll closes</label>
      </div>
    </div>

    <div class="blocks-form-field">
      <label for="op-expires">Expiry (optional)</label>
      <input id="op-expires" name="expires_at" class="blocks-input" type="datetime-local">
    </div>

    <p class="opinion-poll-error mt-2 text-sm text-danger" id="op-form-error" role="alert" hidden></p>

    <div class="opinion-poll-form-actions mt-5 flex flex-wrap gap-3">
      <button type="submit" class="opinion-poll-submit blocks-button blocks-button-primary" id="op-submit">Create poll</button>
      <a class="opinion-poll-cancel blocks-button blocks-button-secondary" href="/plugins/opinion-poll">Cancel</a>
    </div>
  </form>
  {% endif %}
</div>

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