HH/templates/accounts/onboarding/step_content.html

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

{% block sidebar %}{% endblock %}

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

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-light to-blue-50 flex items-center justify-center py-12 px-4">
    <div class="max-w-4xl w-full">
        <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
            <!-- Header -->
            <div class="text-center mb-8">
                <div class="inline-flex items-center justify-center w-20 h-20 bg-navy rounded-full mb-6">
                    {% if current_content.icon %}
                    <i data-lucide="{{ current_content.icon }}" class="w-10 h-10 text-white"></i>
                    {% else %}
                    <i data-lucide="book-open" class="w-10 h-10 text-white"></i>
                    {% endif %}
                </div>
                <h1 class="text-xl md:text-2xl font-bold text-navy mb-1">
                    {{ current_content.get_localized_title }}
                </h1>
                {% if current_content.get_localized_description %}
                <p class="text-sm text-slate">
                    {{ current_content.get_localized_description }}
                </p>
                {% endif %}
            </div>

            <!-- Progress -->
            <div class="mb-8">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-gray-500">{% trans "Step" %} {{ step }} {% trans "of" %} {{ content|length }}</span>
                    <span class="text-sm font-medium text-navy">{{ progress_percentage }}%</span>
                </div>
                <div class="w-full bg-gray-200 h-2.5 rounded-full overflow-hidden">
                    <div class="bg-navy h-full rounded-full transition-all duration-500" style="width: {{ progress_percentage }}%"></div>
                </div>
            </div>

            <!-- Step Indicators -->
            <div class="flex items-center justify-center gap-2 mb-8">
                {% for item in content %}
                <div class="flex items-center">
                    {% if item.id == current_content.id %}
                    <div class="w-8 h-8 rounded-full bg-navy text-white flex items-center justify-center text-sm font-bold">
                        {{ forloop.counter }}
                    </div>
                    {% elif forloop.counter0 < step|add:"-1" %}
                    <div class="w-8 h-8 rounded-full bg-green-500 text-white flex items-center justify-center">
                        <i data-lucide="check" class="w-4 h-4"></i>
                    </div>
                    {% else %}
                    <div class="w-8 h-8 rounded-full bg-gray-200 text-gray-400 flex items-center justify-center text-sm font-bold">
                        {{ forloop.counter }}
                    </div>
                    {% endif %}
                    {% if not forloop.last %}
                    <div class="w-8 h-0.5 {% if forloop.counter < step %}bg-green-500{% else %}bg-gray-200{% endif %}"></div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>

            <!-- Content Body -->
            <div class="space-y-6 mb-8">
                <div class="bg-slate-50 rounded-xl p-6 border border-slate-200">
                    <div class="prose prose-sm max-w-none text-gray-600">
                        {{ current_content.get_localized_content|safe }}
                    </div>
                </div>
            </div>

            <!-- Confirmation -->
            <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
                <div class="flex items-start gap-3">
                    <input type="checkbox" id="confirm_reviewed" name="confirm_reviewed" required
                        class="w-5 h-5 mt-0.5 text-blue-500 border-gray-300 rounded focus:ring-blue-500">
                    <label for="confirm_reviewed" class="text-sm text-blue-700">
                        <span class="font-bold">{% trans "I have reviewed the onboarding material above" %}</span>
                    </label>
                </div>
            </div>

            <!-- Actions -->
            <form method="post" id="stepForm">
                {% csrf_token %}
                <input type="hidden" name="step" value="{{ step }}">
                <div class="flex gap-3">
                    {% if previous_step %}
                    <a href="/accounts/onboarding/wizard/step/{{ previous_step }}/" class="px-6 py-4 border-2 border-gray-200 rounded-xl font-medium text-gray-600 hover:bg-gray-50 transition">
                        {% trans "Previous" %}
                    </a>
                    {% endif %}
                    {% if next_step %}
                    <button type="submit" class="flex-1 bg-navy text-white px-6 py-4 rounded-xl font-bold hover:bg-blue transition shadow-lg">
                        {% trans "Next Step" %}
                        <i data-lucide="arrow-right" class="w-5 h-5 inline ml-2"></i>
                    </button>
                    {% else %}
                    <a href="/accounts/onboarding/wizard/checklist/" class="flex-1 bg-navy text-white px-6 py-4 rounded-xl font-bold text-center hover:bg-blue transition shadow-lg block">
                        {% trans "Continue to Checklist" %}
                        <i data-lucide="clipboard-check" class="w-5 h-5 inline ml-2"></i>
                    </a>
                    {% endif %}
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();

    document.getElementById('stepForm').addEventListener('submit', function(e) {
        const checkbox = document.getElementById('confirm_reviewed');
        if (!checkbox.checked) {
            e.preventDefault();
            checkbox.focus();
            checkbox.classList.add('ring-2', 'ring-red-300');
            setTimeout(() => checkbox.classList.remove('ring-2', 'ring-red-300'), 2000);
        }
    });
});
</script>
{% endblock %}