{% load i18n  patient_tags %}

<!-- Reusable Patient Info Component for Appointments -->
<div class="appointment-patient-info">
    <div class="d-flex align-items-start mb-3">
        <div class="avatar avatar-lg me-3">
            <div class="avatar-initial rounded-circle bg-label-primary">
                <i class="fas fa-user fa-2x"></i>
            </div>
        </div>
        <div class="flex-grow-1">
            <h5 class="mb-1">
                <a href="{% url 'core:patient_detail' patient.pk %}" class="text-decoration-none">
                    {% patient_name patient %}
                </a>
            </h5>
            <div class="text-muted small">
                <span class="badge bg-light text-dark">{% trans "MRN" %}: {{ patient.mrn }}</span>
            </div>
        </div>
    </div>

    <div class="row g-2 small">
        <div class="col-6">
            <div class="text-muted">{% trans "Date of Birth" %}</div>
            <div>{{ patient.date_of_birth|date:"Y-m-d" }}</div>
        </div>
        <div class="col-6">
            <div class="text-muted">{% trans "Age" %}</div>
            <div>{{ patient.age }} {% trans "years" %}</div>
        </div>
        <div class="col-6">
            <div class="text-muted">{% trans "Gender" %}</div>
            <div>{{ patient.get_sex_display }}</div>
        </div>
        <div class="col-6">
            <div class="text-muted">{% trans "Blood Type" %}</div>
            <div>{{ patient.blood_type|default:"—" }}</div>
        </div>
    </div>

    <hr class="my-3">

    <div class="row g-2 small">
        <div class="col-12">
            <div class="text-muted">{% trans "Phone" %}</div>
            <div>
                <i class="fas fa-phone text-success me-1"></i>
                <a href="tel:{{ patient.phone_number|ltr }}">{{ patient.phone_number|ltr }}</a>
            </div>
        </div>
        {% if patient.email %}
        <div class="col-12">
            <div class="text-muted">{% trans "Email" %}</div>
            <div>
                <i class="fas fa-envelope text-info me-1"></i>
                <a href="mailto:{{ patient.email }}">{{ patient.email }}</a>
            </div>
        </div>
        {% endif %}
    </div>

    {% if show_caregiver|default:True %}
    {% if patient.caregiver_name %}
    <hr class="my-3">
    <div class="small">
        <div class="text-muted mb-2">{% trans "Primary Caregiver" %}</div>
        <div><strong>{{ patient.caregiver_name }}</strong></div>
        {% if patient.caregiver_relationship %}
        <div class="text-muted">{{ patient.get_caregiver_relationship_display }}</div>
        {% endif %}
        {% if patient.caregiver_phone %}
        <div>
            <i class="fas fa-phone text-success me-1"></i>
            <a href="tel:{{ patient.caregiver_phone }}">{{ patient.caregiver_phone }}</a>
        </div>
        {% endif %}
    </div>
    {% endif %}
    {% endif %}

    {% if show_insurance|default:True %}
    {% if patient.insurance_provider %}
    <hr class="my-3">
    <div class="small">
        <div class="text-muted mb-2">{% trans "Insurance" %}</div>
        <div><strong>{{ patient.insurance_provider }}</strong></div>
        {% if patient.insurance_policy_number %}
        <div class="text-muted">{% trans "Policy" %}: {{ patient.insurance_policy_number }}</div>
        {% endif %}
    </div>
    {% endif %}
    {% endif %}
</div>