{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}{% trans "Onboarding Complete" %}{% endblock %}

{% block content %}
<div class="container-fluid py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-lg border-0">
                <div class="card-body p-5 text-center">
                    <div class="mb-5">
                        <i class="bi bi-check-circle fa-6x text-success mb-4"></i>
                        <h1 class="display-4 mb-3">{% trans "Welcome Aboard!" %}</h1>
                        <p class="lead text-muted">
                            {% trans "Your account has been successfully activated" %}
                        </p>
                    </div>

                    <div class="alert alert-success mb-4">
                        <i class="bi bi-info-circle me-2"></i>
                        {% trans "You can now log in to PX360 with your new username and password." %}
                    </div>

                    <div class="row mb-5">
                        <div class="col-md-4 mb-3">
                            <div class="card border-success">
                                <div class="card-body">
                                    <i class="bi bi-book fa-2x text-primary mb-2"></i>
                                    <h5>{% trans "Learning Complete" %}</h5>
                                    <p class="small text-muted">
                                        {% trans "You've reviewed all system content" %}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="card border-success">
                                <div class="card-body">
                                    <i class="bi bi-clipboard-check fa-2x text-success mb-2"></i>
                                    <h5>{% trans "Acknowledged" %}</h5>
                                    <p class="small text-muted">
                                        {% trans "All required items confirmed" %}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="card border-success">
                                <div class="card-body">
                                    <i class="bi bi-shield-person fa-2x text-info mb-2"></i>
                                    <h5>{% trans "Account Active" %}</h5>
                                    <p class="small text-muted">
                                        {% trans "Your credentials are ready" %}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-info mb-4">
                        <h6 class="alert-heading">
                            <i class="bi bi-lightbulb me-2"></i>
                            {% trans "What's Next?" %}
                        </h6>
                        <p class="mb-2 text-start">
                            {% trans "• Complete your profile information" %}
                        </p>
                        <p class="mb-2 text-start">
                            {% trans "• Explore the PX360 dashboard" %}
                        </p>
                        <p class="mb-0 text-start">
                            {% trans "• Start improving patient experience!" %}
                        </p>
                    </div>

                    <div class="d-grid gap-2">
                        <a href="/" class="btn btn-primary btn-lg">
                            <i class="bi bi-box-arrow-in-right me-2"></i>
                            {% trans "Go to Dashboard" %}
                        </a>
                    </div>

                    <p class="text-muted small mt-4">
                        {% trans "A confirmation email has been sent to your registered email address." %}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}