neiam /fieri-forever

{% extends "root.html" %}

{% block content %}
<div class="space-y-4">
  <a href="/areas/{{ area.id }}" class="btn btn-ghost btn-sm">&larr; {{ area.name }}</a>
  <h2 class="text-2xl font-bold text-accent">Where to?</h2>

  <form id="plan-form" class="card bg-base-200 p-4 space-y-4"
        hx-post="/areas/{{ area.id }}/plan" hx-target="#plan-result" hx-select="#plan-result" hx-swap="outerHTML">
    <fieldset>
      <legend class="label-text text-xs mb-1 flex items-center gap-3">
        Who's going?
        <button type="button" class="link text-xs"
                onclick="this.closest('fieldset').querySelectorAll('input[type=checkbox]').forEach(c => c.checked = true)">everyone</button>
        <button type="button" class="link text-xs"
                onclick="this.closest('fieldset').querySelectorAll('input[type=checkbox]').forEach(c => c.checked = false)">nobody</button>
      </legend>
      <div class="flex flex-wrap gap-x-4 gap-y-1">
        {% for p in people %}
        <label class="label cursor-pointer gap-2 py-0">
          <input type="checkbox" class="checkbox checkbox-sm" name="attendee" value="{{ p.id }}" {% if p.id == user.id %}checked{% endif %}/>
          <span>{{ p.username }}</span>
        </label>
        {% endfor %}
      </div>
    </fieldset>
    <div class="flex flex-wrap items-end gap-3 border-b border-base-300 pb-4">
      <label class="form-control">
        <span class="label-text text-xs">Options</span>
        <input class="input input-bordered input-sm w-24" type="number" name="options" value="{{ default_options }}" min="1" max="{{ max_options }}"/>
      </label>
      {# type=button: a submit would also fire the form's own hx-post. #}
      <button class="btn btn-primary btn-sm" type="button" hx-post="/areas/{{ area.id }}/outings">
        <i class="fas fa-check-to-slot"></i> Start a vote
      </button>
      <p class="text-xs opacity-70 basis-full">
        Draws a few options that everyone can join, vote on, and re-roll, live. Uses the
        date and time below; places closed then are left out.
      </p>
    </div>
    <div class="flex flex-wrap items-end gap-3">
      <label class="form-control">
        <span class="label-text text-xs">Meals</span>
        <input class="input input-bordered input-sm w-24" type="number" name="meals" value="1" min="1" max="{{ max_meals }}"/>
      </label>
      <label class="form-control">
        <span class="label-text text-xs">Starting</span>
        <input class="input input-bordered input-sm" type="date" name="start" value="{{ today }}"/>
      </label>
      <label class="form-control">
        <span class="label-text text-xs">At</span>
        <input class="input input-bordered input-sm" type="time" name="time" value="{{ meal_time }}" step="900"/>
      </label>
      <button class="btn btn-sm" type="submit">
        <i class="fas fa-dice"></i> Just suggest
        <span class="loading loading-spinner loading-xs htmx-indicator"></span>
      </button>
    </div>
    <p class="text-xs opacity-70">
      A quick private draw, no vote. Planning a trip? Set meals to the number of days: each pick counts as a visit
      when choosing the next, so the plan won't repeat itself.
    </p>
  </form>

  <div id="plan-result"></div>
</div>
{% endblock %}