{% extends "base.html" %}

{% block title %}Spin to Win{% endblock %}

{% block head %}
<link rel="stylesheet" href="/plugins/spinner/assets/css/spinner.css">
{% endblock %}

{% block content %}
<main class="mx-auto w-full max-w-3xl px-4 py-6 pb-12 sm:px-6" data-plugin="spinner"
     data-remaining="{{ remaining_spins | default(value=0) }}"
     data-currency="{{ currency_symbol | default(value='') }}">
  <div class="spinner-page-inner">
    <h1 class="mb-1 text-center text-3xl font-bold text-[var(--text-main)]">Spin to Win</h1>
    <p class="mb-6 text-center text-[var(--text-muted)]" id="spinner-remaining-text" aria-live="polite">
      You have <strong id="spinner-remaining-count">{{ remaining_spins | default(value=0) }}</strong> spin(s) left
    </p>

    <div class="spinner-wheel-wrap">
      <div class="spinner-pointer" aria-hidden="true"></div>
      <canvas id="spinner-canvas" width="360" height="360" role="img" aria-label="Prize wheel"></canvas>
      <button type="button" class="spinner-hub font-extrabold tracking-wide focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--primary)]" id="spinner-spin-btn" aria-label="Spin the prize wheel" {% if remaining_spins | default(value=0) == 0 %}disabled{% endif %}>
        SPIN
      </button>
    </div>

    <div class="mt-4 mb-6 rounded-lg border border-[var(--border-color)] bg-[var(--bg-card)] p-4 text-center text-lg font-semibold text-[var(--text-main)]" id="spinner-result" role="status" aria-live="polite" hidden></div>

    <section class="mt-8" aria-labelledby="spinner-history-heading">
      <h2 id="spinner-history-heading" class="mb-3 text-lg font-semibold text-[var(--text-main)]">Recent spins</h2>
      <ul class="divide-y divide-[var(--border-color)]">
        {% for spin in spins %}
        <li class="flex flex-col gap-1 py-3 text-[var(--text-main)] sm:flex-row sm:items-center sm:justify-between">
          <span class="font-medium">{{ spin.label | default(value=spin.status) }}</span>
          <span class="text-sm text-[var(--text-muted)]">{{ spin.status }} · {{ spin.created_at | date_in_tz(timezone=settings.timezone, format='%d %b %Y %H:%M') }}</span>
        </li>
        {% else %}
        <li class="py-4 text-[var(--text-muted)]">No spins yet. Place an eligible order to earn spins.</li>
        {% endfor %}
      </ul>
    </section>
  </div>
</main>
<script type="application/json" id="spinner-segments-json">{{ segments | default(value=[]) | json_encode | safe }}</script>
{% endblock %}

{% block scripts %}
<script src="/plugins/spinner/assets/js/spinner_wheel.js"></script>
{% endblock %}