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').querySelector('div').querySelectorAll('input[type=checkbox]').forEach(c => c.checked = true)">all of these</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" title="{% if p.friend %}Friend{% endif %}{% if p.friend and p.shared %} · {% endif %}{% if p.shared %}{{ p.shared }} lunch{{ '' if p.shared == 1 else 'es' }} together here{% endif %}">
          <input type="checkbox" class="checkbox checkbox-sm" name="attendee" value="{{ p.id }}" {% if p.me %}checked{% endif %}/>
          <span>{{ p.username }}{% if p.me %} <span class="opacity-60">(you)</span>{% endif %}</span>
          {% if p.friend %}<i class="fas fa-user-group text-xs opacity-60"></i>{% endif %}
          {% if p.shared %}<span class="badge badge-ghost badge-xs">{{ p.shared }}</span>{% endif %}
        </label>
        {% endfor %}
      </div>
      {% if others %}
      <details class="mt-2">
        <summary class="text-xs cursor-pointer opacity-70">Everyone else in {{ area.name }} ({{ others | length }})</summary>
        <div class="flex flex-wrap gap-x-4 gap-y-1 mt-1">
          {% for p in others %}
          <label class="label cursor-pointer gap-2 py-0">
            <input type="checkbox" class="checkbox checkbox-sm" name="attendee" value="{{ p.id }}"/>
            <span>{{ p.username }}</span>
          </label>
          {% endfor %}
        </div>
      </details>
      {% endif %}
    </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 %}