{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="jumbotron bg-light p-5 rounded-3 mb-4">
            <h1 class="display-4">{{ message }}</h1>
            <p class="lead">
                This is a demonstration of Jinja2 template rendering in BustAPI.
                Explore the different pages to see various template features in action.
            </p>
            <hr class="my-4">
            <p>
                BustAPI combines the simplicity of Flask with the performance of Rust,
                giving you the best of both worlds for web development.
            </p>
            <a class="btn btn-primary btn-lg" href="/users" role="button">
                View Users 👥
            </a>
            <a class="btn btn-outline-primary btn-lg" href="/blog" role="button">
                Read Blog 📝
            </a>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title">🚀 High Performance</h5>
                <p class="card-text">
                    BustAPI delivers superior performance with its Rust-powered backend,
                    achieving 539+ RPS compared to Flask's 452 RPS.
                </p>
                <a href="/dashboard" class="btn btn-primary">View Dashboard</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title">🎨 Template Support</h5>
                <p class="card-text">
                    Full Jinja2 template support with inheritance, filters, and all
                    the features you expect from a modern template engine.
                </p>
                <a href="/form" class="btn btn-primary">Try Form</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title">🔧 Flask Compatible</h5>
                <p class="card-text">
                    Drop-in replacement for Flask applications with familiar
                    routing, request handling, and template rendering.
                </p>
                <a href="/users" class="btn btn-primary">Explore API</a>
            </div>
        </div>
    </div>
</div>

<div class="row mt-5">
    <div class="col-12">
        <h2>Template Features Demonstrated</h2>
        <div class="row">
            <div class="col-md-6">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <strong>Template Inheritance:</strong> Base template with blocks
                    </li>
                    <li class="list-group-item">
                        <strong>Variable Rendering:</strong> Dynamic content from Python
                    </li>
                    <li class="list-group-item">
                        <strong>Conditional Logic:</strong> if/else statements in templates
                    </li>
                    <li class="list-group-item">
                        <strong>Loops:</strong> Iterating over lists and dictionaries
                    </li>
                </ul>
            </div>
            <div class="col-md-6">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <strong>Filters:</strong> Built-in and custom template filters
                    </li>
                    <li class="list-group-item">
                        <strong>Forms:</strong> Form handling and validation
                    </li>
                    <li class="list-group-item">
                        <strong>Static Files:</strong> CSS, JS, and image serving
                    </li>
                    <li class="list-group-item">
                        <strong>Error Pages:</strong> Custom 404 and error templates
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="alert alert-info" role="alert">
            <h4 class="alert-heading">💡 Template Variables</h4>
            <p>This page demonstrates template variable usage:</p>
            <ul class="mb-0">
                <li><strong>Title:</strong> {{ title }}</li>
                <li><strong>Message:</strong> {{ message }}</li>
                <li><strong>Current Time:</strong> {{ moment().format('YYYY-MM-DD HH:mm:ss') if moment else 'Not available' }}</li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Add some interactivity
    document.addEventListener('DOMContentLoaded', function() {
        console.log('BustAPI Template Example loaded!');
        
        // Add click tracking for buttons
        document.querySelectorAll('.btn').forEach(button => {
            button.addEventListener('click', function() {
                console.log('Button clicked:', this.textContent.trim());
            });
        });
    });
</script>
{% endblock %}