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

{% block title %}Visa.ai | AI-Powered Visa Counselor{% endblock %}

{% block content %}
<main>
    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container">
            <h1>Your AI-Powered Guide to Global Education</h1>
            <p class="lead">Making informed decisions about studying abroad has never been easier. Compare countries, find programs, and get AI-driven advice for your application.</p>
        </div>
    </section>

    <!-- Comparison Section -->
    <section class="comparison-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="comparison-form">
                        <h2 class="text-center mb-4">Country Comparison Tool</h2>
                        <p class="text-center text-muted mb-4">Select two or more countries to compare key metrics for international students.</p>
                        <form method="POST" action="#">
                            {% csrf_token %}
                            <div class="mb-3">
                                <label for="countries-select" class="form-label">Countries</label>
                                <select multiple class="form-select" id="countries-select" name="countries" size="5">
                                    {% for country in available_countries %}
                                        <option value="{{ country.code }}">{{ country.name }}</option>
                                    {% endfor %}
                                </select>
                                <div class="form-text">Hold Ctrl (or Cmd on Mac) to select multiple countries.</div>
                            </div>
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary">Compare Now</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {% if comparison_results %}
            <div class="comparison-results">
                <h3 class="text-center mb-4">Comparison Results</h3>
                <div class="table-responsive">
                    <div class="comparison-table">
                        <table class="table table-striped table-hover mb-0">
                            <thead class="table-dark">
                                <tr>
                                    <th scope="col">Metric</th>
                                    {% for result in comparison_results %}
                                        <th scope="col" class="text-center">{{ result.country }}</th>
                                    {% endfor %}
                                </tr>
                            </thead>
                            <tbody class="table-group-divider">
                                <tr>
                                    <th scope="row">Average Tuition</th>
                                    {% for result in comparison_results %}
                                        <td class="text-center">{{ result.avg_tuition }}</td>
                                    {% endfor %}
                                </tr>
                                <tr>
                                    <th scope="row">Annual Living Costs</th>
                                    {% for result in comparison_results %}
                                        <td class="text-center">{{ result.living_costs }}</td>
                                    {% endfor %}
                                </tr>
                                <tr>
                                    <th scope="row">Post-Study Work Visa</th>
                                    {% for result in comparison_results %}
                                        <td class="text-center">{{ result.post_study_visa }}</td>
                                    {% endfor %}
                                </tr>
                                <tr>
                                    <th scope="row">Permanent Residency Pathway</th>
                                    {% for result in comparison_results %}
                                        <td class="text-center">{{ result.pr_pathway }}</td>
                                    {% endfor %}
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </section>
</main>
{% endblock %}
