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

{% block title %}Blood Banks - RaktaPulse{% endblock %}

{% block content %}
<div class="container-fluid p-0">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="brand-font mb-1">Blood Banks</h2>
            <p class="text-secondary">Official blood repositories and their current inventory levels.</p>
        </div>
    </div>

    <div class="row">
        {% for bank in banks %}
        <div class="col-md-6 mb-4">
            <div class="glass-card h-100">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h4 class="brand-font mb-0 text-dark">{{ bank.name }}</h4>
                    {% if bank.is_24_7 %}
                    <span class="badge bg-success bg-opacity-10 text-success">24/7 Available</span>
                    {% endif %}
                </div>
                <p class="text-secondary mb-4"><i class="bi bi-geo-alt me-2"></i> {{ bank.location }}</p>
                <p class="text-secondary mb-4"><i class="bi bi-telephone me-2"></i> {{ bank.contact_number }}</p>
                
                <h6 class="fw-bold text-dark mb-3">Inventory Levels (Units)</h6>
                <div class="row g-2 mb-4">
                    <div class="col-3">
                        <div class="p-2 border rounded text-center bg-light">
                            <div class="extra-small text-muted">A+</div>
                            <div class="fw-bold">{{ bank.stock_a_plus }}</div>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="p-2 border rounded text-center bg-light">
                            <div class="extra-small text-muted">A-</div>
                            <div class="fw-bold">{{ bank.stock_a_minus }}</div>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="p-2 border rounded text-center bg-light">
                            <div class="extra-small text-muted">B+</div>
                            <div class="fw-bold">{{ bank.stock_b_plus }}</div>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="p-2 border rounded text-center bg-light">
                            <div class="extra-small text-muted">B-</div>
                            <div class="fw-bold">{{ bank.stock_b_minus }}</div>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="p-2 border rounded text-center bg-light">
                            <div class="extra-small text-muted">O+</div>
                            <div class="fw-bold">{{ bank.stock_o_plus }}</div>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="p-2 border rounded text-center bg-light">
                            <div class="extra-small text-muted">O-</div>
                            <div class="fw-bold">{{ bank.stock_o_minus }}</div>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="p-2 border rounded text-center bg-light">
                            <div class="extra-small text-muted">AB+</div>
                            <div class="fw-bold">{{ bank.stock_ab_plus }}</div>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="p-2 border rounded text-center bg-light">
                            <div class="extra-small text-muted">AB-</div>
                            <div class="fw-bold">{{ bank.stock_ab_minus }}</div>
                        </div>
                    </div>
                </div>
                
                <button class="btn btn-danger w-100 rounded-pill">Contact Bank</button>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <i class="bi bi-hospital fs-1 text-secondary opacity-25"></i>
            <p class="text-secondary mt-3">No blood banks registered in the system.</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}
