Massiv +

backend/templates/rsvp.html

@@ -1,24 +1,82 @@
 {% extends 'base.html' %}
 {% block content %}
-<section class="card form-card">
+<section class="card">
   <h1>{{ t('rsvp') }}</h1>
+  <p>{{ t('rsvp_members_intro') }}</p>
   <form method="post" class="form-grid">
-    <label class="radio-row">
-      <input type="radio" name="attending" value="yes" {% if guest and guest['attending'] == 1 %}checked{% endif %} />
-      {{ t('attending') }}
-    </label>
+    {% for member in members %}
+    <article class="member-card" data-member-card>
+      <h2 class="member-name">{{ member['name'] }}</h2>
+      <div class="member-choice-row">
+        <label class="radio-row">
+          <input
+            type="radio"
+            name="attending_{{ member['id'] }}"
+            value="yes"
+            {% if member['attending'] == 1 %}checked{% endif %}
+            data-attendance-input
+            data-member-id="{{ member['id'] }}"
+          />
+          {{ t('attending') }}
+        </label>
 
-    <label class="radio-row">
-      <input type="radio" name="attending" value="no" {% if guest and guest['attending'] == 0 %}checked{% endif %} />
-      {{ t('not_attending') }}
-    </label>
+        <label class="radio-row">
+          <input
+            type="radio"
+            name="attending_{{ member['id'] }}"
+            value="no"
+            {% if member['attending'] == 0 %}checked{% endif %}
+            data-attendance-input
+            data-member-id="{{ member['id'] }}"
+          />
+          {{ t('not_attending') }}
+        </label>
+      </div>
 
-    <label>
-      <input type="checkbox" name="plus_one" {% if guest and guest['plus_one'] == 1 %}checked{% endif %} />
-      {{ t('plus_one') }}
-    </label>
+      {% if member['requires_age'] == 1 %}
+      <label class="member-age-wrap" data-age-wrap data-member-id="{{ member['id'] }}">
+        {{ t('member_age') }}
+        <input
+          type="number"
+          min="0"
+          max="17"
+          step="1"
+          name="age_{{ member['id'] }}"
+          value="{{ member['child_age'] if member['child_age'] is not none else '' }}"
+        />
+        <small>{{ t('member_age_hint') }}</small>
+      </label>
+      {% endif %}
+    </article>
+    {% endfor %}
 
     <button class="btn" type="submit">{{ t('save') }}</button>
   </form>
 </section>
+
+<script>
+  (() => {
+    const inputs = Array.from(document.querySelectorAll("[data-attendance-input]"));
+    const ageWraps = Array.from(document.querySelectorAll("[data-age-wrap]"));
+
+    const updateAgeVisibility = () => {
+      ageWraps.forEach((wrap) => {
+        const memberId = wrap.getAttribute("data-member-id");
+        const yesRadio = document.querySelector(`input[name="attending_${memberId}"][value="yes"]`);
+        const ageInput = wrap.querySelector("input[type='number']");
+        const shouldShow = Boolean(yesRadio && yesRadio.checked);
+        wrap.classList.toggle("is-visible", shouldShow);
+        if (ageInput) {
+          ageInput.required = shouldShow;
+          if (!shouldShow) {
+            ageInput.value = "";
+          }
+        }
+      });
+    };
+
+    inputs.forEach((input) => input.addEventListener("change", updateAgeVisibility));
+    updateAgeVisibility();
+  })();
+</script>
 {% endblock %}