{% extends "base.html" %}

{% block content %}
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
    <div class="px-4 py-6 sm:px-0">
        <h1 class="text-3xl font-bold text-gray-900 mb-8">欢迎回来, {{ session.get('username') }}</h1>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- 预测卡片 -->
            <div class="bg-white overflow-hidden shadow sm:rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg leading-6 font-medium text-gray-900">开始新的预测</h3>
                    <div class="mt-2 max-w-xl text-sm text-gray-500">
                        <p>输入最新的身体指标，获取即时的中风风险评估。</p>
                    </div>
                    <div class="mt-5">
                        <a href="{{ url_for('main.predict') }}"
                            class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 sm:text-sm">
                            去预测
                        </a>
                    </div>
                </div>
            </div>

            <!-- 分析卡片 -->
            <div class="bg-white overflow-hidden shadow sm:rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg leading-6 font-medium text-gray-900">查看数据分析</h3>
                    <div class="mt-2 max-w-xl text-sm text-gray-500">
                        <p>浏览基于大数据的可视化分析图表，了解中风的相关因素。</p>
                    </div>
                    <div class="mt-5">
                        <a href="{{ url_for('main.analysis') }}"
                            class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 sm:text-sm">
                            查看图表
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}