{% extends "base.html" %}
{% load static %}

{% block content %}
<div class="container-fluid py-4 py-md-5 px-3 px-md-4">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4 mb-md-5 gap-3">
        <div>
            <h1 class="h2 fw-bold text-dark mb-1">Neighborhood Summary</h1>
            <p class="text-muted mb-0">Household counts by neighborhood based on active filters.</p>
        </div>
        <div>
            <a href="{% url 'door_visits' %}?city={{ city_filter|urlencode }}&district={{ district_filter|urlencode }}&neighborhood={{ neighborhood_filter|urlencode }}&address={{ address_filter|urlencode }}" class="btn btn-outline-secondary shadow-sm py-1 px-4">
                <i class="bi bi-arrow-left me-1"></i> Back to Door Visits
            </a>
        </div>
    </div>

    <!-- Filters Info -->
    {% if district_filter or neighborhood_filter or city_filter or address_filter %}
    <div class="alert alert-info border-0 shadow-sm rounded-4 mb-4">
        <i class="bi bi-info-circle-fill me-2"></i>
        Active Filters: 
        {% if district_filter %}<strong>District:</strong> {{ district_filter }}{% endif %}
        {% if neighborhood_filter %}{% if district_filter %}, {% endif %}<strong>Neighborhood:</strong> {{ neighborhood_filter }}{% endif %}
        {% if city_filter %}{% if district_filter or neighborhood_filter %}, {% endif %}<strong>City:</strong> {{ city_filter }}{% endif %}
        {% if address_filter %}{% if district_filter or neighborhood_filter or city_filter %}, {% endif %}<strong>Address:</strong> {{ address_filter }}{% endif %}
    </div>
    {% endif %}

    <!-- Neighborhood Counts List -->
    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
        <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0 fw-bold text-dark">Neighborhoods</h5>
            <span class="badge bg-primary-subtle text-primary px-3 py-2 rounded-pill">
                {{ neighborhoods|length }} Neighborhoods
            </span>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light text-muted">
                    <tr>
                        <th class="ps-4 py-3 text-uppercase small ls-1">Neighborhood</th>
                        <th class="py-3 text-uppercase small ls-1 text-center">Unvisited Households</th>
                        <th class="pe-4 py-3 text-uppercase small ls-1 text-end">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in neighborhoods %}
                    <tr>
                        <td class="ps-4">
                            <span class="fw-bold text-dark">{{ item.display_name }}</span>
                        </td>
                        <td class="text-center">
                            <span class="badge bg-light text-dark border px-3 py-2 fw-bold" style="font-size: 1rem;">
                                {{ item.count }}
                            </span>
                        </td>
                        <td class="pe-4 text-end">
                            <a href="{% url 'door_visits' %}?city={{ city_filter|urlencode }}&district={{ district_filter|urlencode }}&neighborhood={{ item.neighborhood|default:''|urlencode }}&address={{ address_filter|urlencode }}" class="btn btn-sm btn-primary rounded-3 px-3">
                                View Households
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="3" class="text-center py-5 text-muted">
                            No data found for the current filters.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}