templates/scheme_details.html

{% extends "base.html" %}

{% block content %}
<div class="container scheme-detail-container">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url_for('index') }}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ scheme.name }}</li>
        </ol>
    </nav>

    <h1 class="page-title mb-2">{{ scheme.name }}</h1>

    <div class="row g-2">
        <div class="col-lg-8">
            <div class="card mb-2 shadow-sm">
                <div class="card-body p-3">
                    <h2 class="section-title mb-2">Introduction</h2>
                    <p class="scheme-text">{{ scheme.introduction }}</p>
                </div>
            </div>

            {% if scheme.objective %}
            <div class="card mb-2 shadow-sm">
                <div class="card-body p-3">
                    <h2 class="section-title mb-2">Objectives</h2>
                    <ul class="list-group list-group-flush">
                        {% for obj in scheme.objective %}
                        <li class="list-group-item bg-transparent py-1">{{ obj }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            {% endif %}

            {% if scheme.benefits %}
            <div class="card mb-2 shadow-sm">
                <div class="card-body p-3">
                    <h2 class="section-title mb-2">Benefits</h2>
                    <ul class="list-group list-group-flush">
                        {% for benefit in scheme.benefits %}
                        <li class="list-group-item bg-transparent py-1">{{ benefit }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            {% endif %}

            {% if scheme.eligibility %}
            <div class="card mb-2 shadow-sm">
                <div class="card-body p-3">
                    <h2 class="section-title mb-2">Eligibility</h2>
                    {% if scheme.eligibility.eligible %}
                    <h3 class="h5 mb-2">Eligible Beneficiaries:</h3>
                    <ul class="list-group list-group-flush mb-2">
                        {% for eligible in scheme.eligibility.eligible %}
                        <li class="list-group-item bg-transparent py-1">{{ eligible }}</li>
                        {% endfor %}
                    </ul>
                    {% endif %}

                    {% if scheme.eligibility.exclusions %}
                    <h3 class="h5 mb-2">Exclusions:</h3>
                    <ul class="list-group list-group-flush">
                        {% for exclusion in scheme.eligibility.exclusions %}
                        <li class="list-group-item bg-transparent py-1">{{ exclusion }}</li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            {% if scheme.application_process %}
            <div class="card mb-2 shadow-sm">
                <div class="card-body p-3">
                    <h2 class="section-title mb-2">Application Process</h2>
                    <ol class="list-group list-group-flush">
                        {% for step in scheme.application_process %}
                        <li class="list-group-item bg-transparent py-1">{{ step }}</li>
                        {% endfor %}
                    </ol>
                </div>
            </div>
            {% endif %}

            {% if scheme.documents_required %}
            <div class="card mb-2 shadow-sm">
                <div class="card-body p-3">
                    <h2 class="section-title mb-2">Required Documents</h2>
                    <ul class="list-group list-group-flush">
                        {% for doc in scheme.documents_required %}
                        <li class="list-group-item bg-transparent py-1">{{ doc }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            {% endif %}
        </div>

        <div class="col-lg-4">
            <div class="card shadow-sm sticky-lg-top" style="top: 0.5rem;">
                <div class="card-body p-3">
                    <h2 class="section-title mb-2">Contact Information</h2>
                    <ul class="list-unstyled mb-0">
                        {% if scheme.contact.helpline %}
                        <li class="mb-2">
                            <i class="fas fa-phone-alt text-primary me-2"></i>
                            <strong>Helpline:</strong><br>
                            {{ scheme.contact.helpline }}
                        </li>
                        {% endif %}
                        {% if scheme.contact.email %}
                        <li class="mb-2">
                            <i class="fas fa-envelope text-primary me-2"></i>
                            <strong>Email:</strong><br>
                            <a href="mailto:{{ scheme.contact.email }}">{{ scheme.contact.email }}</a>
                        </li>
                        {% endif %}
                        {% if scheme.contact.website %}
                        <li>
                            <i class="fas fa-globe text-primary me-2"></i>
                            <strong>Website:</strong><br>
                            <a href="{{ scheme.contact.website }}" target="_blank" class="text-break">{{ scheme.contact.website }}</a>
                        </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Additional scheme detail specific styles */
.scheme-detail-container .card {
    min-height: 0;
    margin-bottom: 0.5rem;
}
.scheme-detail-container .list-group-item {
    white-space: normal;
    word-break: break-word;
}
.scheme-detail-container .row > div > .card:last-child {
    margin-bottom: 0;
}
.scheme-detail-container h2.section-title {
    font-size: 1.1rem;
}
.scheme-detail-container h3.h5 {
    font-size: 0.95rem;
}
</style>
{% endblock %}