229 lines
11 KiB
HTML
229 lines
11 KiB
HTML
{% extends 'layouts/base.html' %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{{ page_title }} - PX360{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-4">
|
|
<!-- Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h4 class="mb-1">
|
|
<i class="fas fa-eye text-primary me-2"></i>{% trans "Wizard Preview" %}
|
|
</h4>
|
|
<p class="text-muted mb-0">{% trans "Preview the onboarding experience for different user roles" %}</p>
|
|
</div>
|
|
<a href="{% url 'accounts:acknowledgement-content-list' %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-arrow-left me-1"></i>{% trans "Back to Content" %}
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Role Selector -->
|
|
<div class="card mb-4">
|
|
<div class="card-header bg-white">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-user-tag text-info me-2"></i>{% trans "Select Role to Preview" %}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
{% for role in available_roles %}
|
|
<div class="col-md-3">
|
|
<a href="{% url 'accounts:preview-wizard-role' role=role.name %}"
|
|
class="card text-decoration-none h-100 {% if selected_role and selected_role.name == role.name %}border-primary bg-primary bg-opacity-10{% else %}border-light{% endif %}">
|
|
<div class="card-body text-center">
|
|
<i class="fas fa-user-shield fa-2x mb-2 {% if selected_role and selected_role.name == role.name %}text-primary{% else %}text-muted{% endif %}"></i>
|
|
<h6 class="card-title mb-0">{{ role.name }}</h6>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if selected_role %}
|
|
<!-- Preview Stats -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-6">
|
|
<div class="card bg-info text-white">
|
|
<div class="card-body d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="card-title mb-0">{% trans "Content Sections" %}</h6>
|
|
<h2 class="mb-0">{{ content_count }}</h2>
|
|
</div>
|
|
<i class="fas fa-file-alt fa-2x opacity-50"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card bg-warning text-dark">
|
|
<div class="card-body d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="card-title mb-0">{% trans "Checklist Items" %}</h6>
|
|
<h2 class="mb-0">{{ checklist_count }}</h2>
|
|
</div>
|
|
<i class="fas fa-tasks fa-2x opacity-50"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Preview Content -->
|
|
<div class="row g-4">
|
|
<!-- Content Sections -->
|
|
<div class="col-lg-6">
|
|
<div class="card h-100">
|
|
<div class="card-header bg-white d-flex justify-content-between align-items-center">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-file-alt text-info me-2"></i>{% trans "Content Sections" %}
|
|
</h5>
|
|
<span class="badge bg-info">{{ content_count }}</span>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="accordion" id="contentAccordion">
|
|
{% for content in preview_content %}
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button {% if not forloop.first %}collapsed{% endif %}" type="button"
|
|
data-bs-toggle="collapse" data-bs-target="#content{{ forloop.counter }}">
|
|
<span class="badge bg-secondary me-2">{{ forloop.counter }}</span>
|
|
{{ content.title_en }}
|
|
{% if content.role %}
|
|
<span class="badge bg-info ms-2">{{ content.get_role_display }}</span>
|
|
{% else %}
|
|
<span class="badge bg-success ms-2">{% trans "All Roles" %}</span>
|
|
{% endif %}
|
|
</button>
|
|
</h2>
|
|
<div id="content{{ forloop.counter }}" class="accordion-collapse collapse {% if forloop.first %}show{% endif %}"
|
|
data-bs-parent="#contentAccordion">
|
|
<div class="accordion-body">
|
|
<h6>{{ content.title_en }}</h6>
|
|
<p class="text-muted">{{ content.description_en }}</p>
|
|
<hr>
|
|
<div class="small">
|
|
{{ content.content_en|safe|truncatewords:50 }}
|
|
</div>
|
|
{% if content.content_ar %}
|
|
<hr>
|
|
<div class="small text-end" dir="rtl">
|
|
<strong>{% trans "Arabic:" %}</strong>
|
|
{{ content.content_ar|safe|truncatewords:30 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="text-center py-5 text-muted">
|
|
<i class="fas fa-inbox fa-3x mb-3"></i>
|
|
<p>{% trans "No content sections for this role" %}</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Checklist Items -->
|
|
<div class="col-lg-6">
|
|
<div class="card h-100">
|
|
<div class="card-header bg-white d-flex justify-content-between align-items-center">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-tasks text-warning me-2"></i>{% trans "Checklist Items" %}
|
|
</h5>
|
|
<span class="badge bg-warning text-dark">{{ checklist_count }}</span>
|
|
</div>
|
|
<div class="card-body">
|
|
{% for item in preview_checklist %}
|
|
<div class="d-flex align-items-start mb-3 p-3 border rounded {% if item.is_required %}border-warning bg-warning bg-opacity-10{% else %}border-light{% endif %}">
|
|
<div class="form-check flex-grow-1">
|
|
<input class="form-check-input" type="checkbox" disabled
|
|
{% if item.is_required %}checked{% endif %}>
|
|
<label class="form-check-label">
|
|
<strong>{{ item.text_en }}</strong>
|
|
{% if item.is_required %}
|
|
<span class="badge bg-danger ms-1">{% trans "Required" %}</span>
|
|
{% endif %}
|
|
</label>
|
|
{% if item.description_en %}
|
|
<p class="text-muted small mb-0 mt-1">{{ item.description_en }}</p>
|
|
{% endif %}
|
|
{% if item.content %}
|
|
<p class="text-info small mb-0 mt-1">
|
|
<i class="fas fa-link me-1"></i>{{ item.content.title_en }}
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="text-center py-5 text-muted">
|
|
<i class="fas fa-clipboard-check fa-3x mb-3"></i>
|
|
<p>{% trans "No checklist items for this role" %}</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Experience Preview -->
|
|
<div class="card mt-4">
|
|
<div class="card-header bg-white">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-mobile-alt text-success me-2"></i>{% trans "User Experience Summary" %}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-4">
|
|
<div class="col-md-4">
|
|
<div class="text-center">
|
|
<div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
|
|
<i class="fas fa-book-open text-primary fa-2x"></i>
|
|
</div>
|
|
<h6>{% trans "Step 1: Learn" %}</h6>
|
|
<p class="text-muted small mb-0">
|
|
{% blocktrans %}Users will see {{ content_count }} content sections to learn about PX360.{% endblocktrans %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="text-center">
|
|
<div class="bg-warning bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
|
|
<i class="fas fa-check-double text-warning fa-2x"></i>
|
|
</div>
|
|
<h6>{% trans "Step 2: Acknowledge" %}</h6>
|
|
<p class="text-muted small mb-0">
|
|
{% blocktrans %}Users must acknowledge {{ checklist_count }} checklist items.{% endblocktrans %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="text-center">
|
|
<div class="bg-success bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
|
|
<i class="fas fa-signature text-success fa-2x"></i>
|
|
</div>
|
|
<h6>{% trans "Step 3: Sign & Activate" %}</h6>
|
|
<p class="text-muted small mb-0">
|
|
{% trans "Users provide digital signature and create their account." %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% else %}
|
|
<!-- No Role Selected -->
|
|
<div class="card">
|
|
<div class="card-body text-center py-5">
|
|
<i class="fas fa-hand-pointer text-muted fa-4x mb-3"></i>
|
|
<h5 class="text-muted">{% trans "Select a role above to preview the onboarding experience" %}</h5>
|
|
<p class="text-muted">{% trans "You can see exactly what users with different roles will experience during onboarding." %}</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|