{% extends "base.html" %}

{% block title %}Home - {{project_name}}{% endblock %}

{% block content %}
<div class="hero">
    <h1>Welcome to {{project_name}}</h1>
    <p>A modern Flask fullstack application with authentication</p>
    {% if not current_user.is_authenticated %}
        <div>
            <a href="{{ url_for('auth.register') }}" class="btn btn-success">Get Started</a>
            <a href="{{ url_for('auth.login') }}" class="btn btn-secondary">Login</a>
        </div>
    {% else %}
        <div>
            <a href="{{ url_for('main.dashboard') }}" class="btn btn-primary">Go to Dashboard</a>
        </div>
    {% endif %}
</div>

<div class="card">
    <div class="card-header">Features</div>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 1rem;">
        <div>
            <h3>🔐 Authentication</h3>
            <p>Secure user registration and login with Flask-Login</p>
        </div>
        <div>
            <h3>🎨 Modern UI</h3>
            <p>Clean and responsive design with custom CSS</p>
        </div>
        <div>
            <h3>📝 Form Validation</h3>
            <p>WTForms with CSRF protection and validation</p>
        </div>
        <div>
            <h3>🚀 Production Ready</h3>
            <p>Secure session management and error handling</p>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">Getting Started</div>
    <ol style="line-height: 2;">
        <li>Create an account by clicking the "Get Started" button</li>
        <li>Log in with your credentials</li>
        <li>Access your personalized dashboard</li>
        <li>Start building your application!</li>
    </ol>
</div>
{% endblock %}