{% extends 'rental_app/base_rental.html' %}
{% block title %}{{ title }}{% endblock %}

{% block content %}

<section class="success-page-section py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="success-card text-center shadow-lg">
                    <div class="success-icon-wrap">
                        <i class="bi bi-check-circle-fill"></i>
                    </div>

                    <span class="section-mini-title">Submission Successful</span>
                    <h1 class="fw-bold mb-3">{{ heading }}</h1>
                    <p class="lead text-muted mb-4">
                        {{ message }}
                    </p>

                    <div class="success-info-box">
                        <i class="bi bi-info-circle-fill"></i>
                        <div>
                            You may continue exploring the website while we review your submission and prepare the next suitable step.
                        </div>
                    </div>

                    {% if username or new_account_email or account_role %}
                    <div class="alert alert-success text-start mt-4 shadow-sm">
                        <h5 class="fw-bold mb-3">
                            <i class="bi bi-person-check-fill me-2"></i>Account Created Successfully
                        </h5>

                        {% if account_role %}
                            <p class="mb-2"><strong>Account Type:</strong> {{ account_role }}</p>
                        {% endif %}

                        {% if new_account_email %}
                            <p class="mb-2">
                                <strong>Email:</strong> {{ new_account_email }}
                            </p>
                            <p class="mb-2 text-muted small">
                                Your login details have also been sent to this email address.
                            </p>
                        {% endif %}

                        {% if username %}
                            <p class="mb-2"><strong>Username:</strong> {{ username }}</p>
                        {% endif %}

                        {% if password %}
                            <p class="mb-2"><strong>Temporary Password:</strong> {{ password }}</p>
                        {% endif %}

                        <hr>
                        <p class="mb-0 small text-muted">
                            Please keep your login details safe. For better security, it is recommended to change your password after your first login.
                        </p>
                    </div>
                    {% endif %}

                    <div class="d-flex flex-wrap justify-content-center gap-3 mt-4">
                        <a href="{% url button_1_url %}" class="btn btn-warning btn-lg px-4">
                            {{ button_1_text }}
                        </a>
                        <a href="{% url button_2_url %}" class="btn btn-dark btn-lg px-4">
                            {{ button_2_text }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5 bg-white">
    <div class="container">
        <div class="section-heading text-center mb-5">
            <span class="section-mini-title">Next Options</span>
            <h2 class="fw-bold">What You Can Do Next</h2>
            <p class="text-muted">
                While waiting, you can continue learning more about Sri Lanka living and the available package options.
            </p>
        </div>

        <div class="row g-4">
            <div class="col-md-4">
                <div class="step-card text-center h-100">
                    <div class="step-number">01</div>
                    <h5 class="fw-bold">Review Packages</h5>
                    <p>Explore the available package levels and compare the lifestyle options.</p>
                    <a href="{% url 'expat_life:package_list' %}" class="btn btn-outline-dark mt-3">View Packages</a>
                </div>
            </div>

            <div class="col-md-4">
                <div class="step-card text-center h-100">
                    <div class="step-number">02</div>
                    <h5 class="fw-bold">About Sri Lanka</h5>
                    <p>Read more about why Sri Lanka can be an attractive long-stay lifestyle choice.</p>
                    <a href="{% url 'expat_life:about_sri_lanka' %}" class="btn btn-outline-dark mt-3">Read More</a>
                </div>
            </div>

            <div class="col-md-4">
                <div class="step-card text-center h-100">
                    <div class="step-number">03</div>
                    <h5 class="fw-bold">Contact Us</h5>
                    <p>If needed, send another message or ask more questions about the next step.</p>
                    <a href="{% url 'expat_life:contact_page' %}" class="btn btn-outline-dark mt-3">Contact Us</a>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %}