{% extends "base.html" %}
{% set active_nav = "manage" %}

{% block title %}Families - LSMC Atlas{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Families</h1>
        <p class="page-subtitle">Group patients and capture family relationships</p>
    </div>
    {% if user.can_write %}
    <a href="/families/new" class="btn btn-primary">+ New Family</a>
    {% endif %}
</div>

<div class="card">
    <div class="card-header">
        <form method="get" action="/families" class="flex gap-md items-center">
            <input type="search" name="search" class="form-input" style="width: 300px;"
                   placeholder="Search by family name..." value="{{ search }}">
            <button type="submit" class="btn btn-secondary">Search</button>
            {% if search %}
            <a href="/families" class="btn btn-ghost">Clear</a>
            {% endif %}
        </form>
        <span class="text-muted text-sm">{{ families|length }} families</span>
    </div>

    {% if families %}
    <div class="table-container">
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Notes</th>
                    <th>Created</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for family in families %}
                <tr>
                    <td>
                        <a href="/families/{{ family.id }}" class="font-medium">{{ family.name }}</a>
                    </td>
                    <td class="text-muted text-sm">{{ family.notes or "—" }}</td>
                    <td class="text-muted text-sm">{{ family.created_at | format_dt(user_preferences) }}</td>
                    <td>
                        <a href="/families/{{ family.id }}" class="btn btn-sm btn-ghost">View</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-state-icon">👪</div>
        <p>No families found</p>
        {% if user.can_write and not search %}
        <a href="/families/new" class="btn btn-primary mt-md">Create Family</a>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}