{% extends 'base.html' %}

{% block title %}Home{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8 mx-auto">
        <div class="jumbotron bg-light p-5 rounded">
            <h1 class="display-4">Welcome</h1>
            <p class="lead">
                A modern web application with secure authentication, 
                role-based permissions, and powerful features.
            </p>
            <hr class="my-4">
            
            {% if user.is_authenticated %}
                <p>Hello, <strong>{{ user.full_name|default:user.email }}</strong>!</p>
                <a class="btn btn-primary btn-lg" href="{% url 'accounts:dashboard' %}" role="button">
                    Go to Dashboard
                </a>
            {% else %}
                <p>Get started by creating an account or logging in.</p>
                <a class="btn btn-primary btn-lg me-3" href="{% url 'account_signup' %}" role="button">
                    Sign Up
                </a>
                <a class="btn btn-outline-primary btn-lg" href="{% url 'account_login' %}" role="button">
                    Login
                </a>
            {% endif %}
        </div>
    </div>
</div>

<div class="row mt-5">
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title">🔐 Authentication</h5>
                <p class="card-text">
                    Complete authentication system with email verification, 
                    password reset, and social login (Google & Facebook).
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title">👥 Role-Based Access</h5>
                <p class="card-text">
                    Built-in user group system with admin, staff, and user roles 
                    for granular permission control.
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title">🐳 Docker Ready</h5>
                <p class="card-text">
                    Fully containerized with Docker Compose, PostgreSQL database, 
                    and production-ready configuration.
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}