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

{% block title %}Members of Parliament | {{ project_name }}{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="d-flex justify-content-between align-items-end mb-5">
        <div>
            <h1 class="display-5 fw-bold mb-3">Members of Parliament</h1>
            <p class="lead text-muted mb-0">Full roster of Canadian MPs and their political affiliations.</p>
        </div>
        <div class="text-end">
            <span class="badge bg-dark px-3 py-2 rounded-pill border border-secondary">Total: {{ mps.count }}</span>
        </div>
    </div>

    <div class="row g-4">
        {% for mp in mps %}
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="card bg-card border-0 rounded-4 p-4 h-100 transition-hover">
                <div class="d-flex align-items-center mb-3">
                    <div class="avatar-large me-3">{{ mp.name|slice:":1" }}</div>
                    <div>
                        <h3 class="h6 mb-1 fw-bold">{{ mp.name }}</h3>
                        <div class="badge {% if mp.party == 'Liberal' %}bg-danger{% elif mp.party == 'Conservative' %}bg-primary{% elif mp.party == 'NDP' %}bg-warning text-dark{% else %}bg-secondary{% endif %} small">
                            {{ mp.party }}
                        </div>
                    </div>
                </div>
                <div class="mt-auto pt-3 border-top border-secondary border-opacity-25">
                    <div class="small text-muted mb-1">Constituency</div>
                    <div class="small fw-semibold">{{ mp.constituency }}</div>
                    <div class="small text-muted mt-2">{{ mp.province }}</div>
                </div>
                <a href="#" class="stretched-link"></a>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <p class="text-muted">No MPs found in the database.</p>
        </div>
        {% endfor %}
    </div>
</div>

<style>
    .bg-card {
        background-color: var(--card-bg) !important;
        transition: transform 0.2s ease, background-color 0.2s ease;
    }
    .transition-hover:hover {
        transform: translateY(-5px);
        background-color: rgba(255, 255, 255, 0.05) !important;
    }
    .avatar-large {
        width: 56px;
        height: 56px;
        background-color: var(--border-color);
        color: var(--accent-green);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        font-weight: 700;
        font-size: 1.5rem;
        font-family: 'Lexend', sans-serif;
    }
</style>
{% endblock %}
