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

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

{% block content %}
<style>
    .urgency-badge {
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
    }
    .bg-critical { background: #FF4D4D; color: #fff; }
    .bg-urgent { background: #FFA500; color: #000; }
    .bg-normal { background: #4CAF50; color: #fff; }
</style>

<div class="container-fluid p-0">
    <div class="row mb-4">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <div>
                <h2 class="brand-font mb-1">Blood Requests</h2>
                <p class="text-secondary">Current active requirements for blood in various hospitals.</p>
            </div>
            <a href="{% url 'request_blood' %}" class="btn btn-danger rounded-pill px-4">Post a Request</a>
        </div>
    </div>

    <div class="glass-card mb-4">
        <div class="row">
            {% for req in requests %}
            <div class="col-md-6 col-xl-4 mb-4">
                <div class="p-3 border rounded h-100 bg-light d-flex flex-column">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="urgency-badge bg-{{ req.urgency|lower }}">{{ req.urgency }}</span>
                        <div class="bg-danger bg-opacity-10 text-danger rounded-circle d-flex align-items-center justify-content-center fw-bold" style="width: 40px; height: 40px;">
                            {{ req.blood_group }}
                        </div>
                    </div>
                    <h5 class="mb-1 fw-bold text-dark">{{ req.patient_name }}</h5>
                    <p class="text-secondary small mb-3"><i class="bi bi-hospital me-1"></i> {{ req.hospital }}</p>
                    <div class="mt-auto pt-3 border-top">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="small text-muted"><i class="bi bi-clock me-1"></i> {{ req.created_at|timesince }} ago</span>
                            <a href="tel:{{ req.contact_number }}" class="btn btn-sm btn-danger px-3 rounded-pill">Help Now</a>
                        </div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12 text-center py-5">
                <i class="bi bi-megaphone fs-1 text-secondary opacity-25"></i>
                <p class="text-secondary mt-3">No active blood requests at the moment.</p>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}
