1 files changed, 106 insertions, 0 deletions
diff --git a/app/templates/household.html b/app/templates/household.html
new file mode 100644
index 0000000..cbb5121
--- /dev/null
+++ b/app/templates/household.html
@@ -0,0 +1,106 @@
+{% extends "base.html" %}
+{% block title %}Household — Menu Planner{% endblock %}
+
+{% block content %}
+<div class="d-flex align-items-center justify-content-between mb-4">
+  <div>
+    <h1 class="h3 fw-bold mb-0"><i class="bi bi-people me-2"></i>Household</h1>
+    {% if household %}<p class="text-muted mb-0">{{ household.name }}</p>{% endif %}
+  </div>
+</div>
+
+{% if not household %}
+<div class="card shadow-sm">
+  <div class="card-body text-center py-5">
+    <i class="bi bi-house-add fs-1 text-muted mb-3 d-block"></i>
+    <h5 class="fw-semibold">You're not in a household yet</h5>
+    <p class="text-muted">Create one and invite family members.<br>
+      Shopping lists will automatically combine everyone's meal plans.</p>
+    <form method="POST" action="/household/create" class="d-inline-flex gap-2 mt-2">
+      <input type="text" name="name" class="form-control form-control-sm"
+             placeholder="e.g. The Smith Family" style="width:230px">
+      <button type="submit" class="btn btn-primary btn-sm">
+        <i class="bi bi-plus-circle me-1"></i>Create Household
+      </button>
+    </form>
+  </div>
+</div>
+
+{% else %}
+
+<!-- Members -->
+<div class="card shadow-sm mb-4">
+  <div class="card-header fw-semibold d-flex align-items-center gap-2">
+    <i class="bi bi-people-fill"></i> Members
+    <span class="badge bg-secondary ms-auto">{{ members|length }}</span>
+  </div>
+  <ul class="list-group list-group-flush">
+    {% for m in members %}
+    <li class="list-group-item d-flex align-items-center justify-content-between">
+      <div class="d-flex align-items-center gap-2">
+        <i class="bi bi-person-circle text-muted fs-5"></i>
+        <span class="fw-semibold">{{ m.username }}</span>
+        {% if m.id == household.owner_id %}
+          <span class="badge bg-warning text-dark">Owner</span>
+        {% endif %}
+        {% if m.is_me %}
+          <span class="text-muted small">(you)</span>
+        {% endif %}
+      </div>
+      {% if is_owner and not m.is_me %}
+      <form method="POST" action="/household/remove"
+            onsubmit="return confirm('Remove {{ m.username }} from the household?')">
+        <input type="hidden" name="username" value="{{ m.username }}">
+        <button type="submit" class="btn btn-sm btn-outline-danger">
+          <i class="bi bi-person-dash me-1"></i>Remove
+        </button>
+      </form>
+      {% endif %}
+    </li>
+    {% endfor %}
+  </ul>
+</div>
+
+{% if is_owner %}
+<!-- Invite -->
+<div class="card shadow-sm mb-4">
+  <div class="card-header fw-semibold">
+    <i class="bi bi-person-plus me-1"></i>Invite Member
+  </div>
+  <div class="card-body">
+    <form method="POST" action="/household/invite" class="d-flex gap-2">
+      <input type="text" name="username" class="form-control" placeholder="Username" required autocomplete="off">
+      <button type="submit" class="btn btn-primary">Add</button>
+    </form>
+    <p class="text-muted small mt-2 mb-0">
+      The user must already have an account. They'll join immediately and their meal plan
+      will be included in your combined shopping list.
+    </p>
+  </div>
+</div>
+{% endif %}
+
+<!-- Leave / dissolve -->
+<div class="card shadow-sm border-danger border-opacity-25">
+  <div class="card-body">
+    {% if is_owner and members|length > 1 %}
+    <p class="text-muted small mb-2">
+      Remove all other members before you can dissolve the household.
+    </p>
+    <button class="btn btn-outline-danger btn-sm" disabled>
+      <i class="bi bi-box-arrow-left me-1"></i>Dissolve Household
+    </button>
+    {% else %}
+    <form method="POST" action="/household/leave"
+          onsubmit="return confirm('{% if is_owner %}Dissolve this household?{% else %}Leave this household?{% endif %}')">
+      <button type="submit" class="btn btn-outline-danger btn-sm">
+        <i class="bi bi-box-arrow-left me-1"></i>
+        {% if is_owner %}Dissolve Household{% else %}Leave Household{% endif %}
+      </button>
+    </form>
+    {% endif %}
+  </div>
+</div>
+
+{% endif %}
+{% endblock %}