{% 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 %}