{% block body_content %}
	<div id="MerlinOverlay" class="modal show d-block"
		 role="dialog" tabindex="-1"
		 aria-labelledby="MerlinLabel" aria-modal="true"
		 data-bs-backdrop="static"
		 data-bs-keyboard="false">
		<h2 id="MerlinLabel" class="visually-hidden">{{ strings.wizard_title }}</h2>
		<div class="modal-dialog modal-dialog-centered modal-xl merlin-modal-dialog">
			<div class="modal-content rounded-3">

				<a href="{{ hrefs.dashboard_home }}" class="merlin-close btn-close" aria-label="Close"></a>

				<div class="modal-body">
					<div id="merlin">

						{# Custom stepper #}
						<div class="stepper">
							{% for step in content.steps %}
							<div class="stepper-step {{ loop.first ? 'current' : 'future' }}"
								 data-step-index="{{ loop.index0 }}">
								<div class="stepper-circle">
									<span class="step-number">{{ loop.index }}</span>
									<i class="bi bi-check-lg step-check d-none"></i>
								</div>
								<div class="stepper-label">{{ step.step_name }}</div>
							</div>
							{% endfor %}
						</div>

						{# Wizard card #}
						<div class="wizard-card">
							<div class="wizard-card-accent"></div>
							<div class="wizard-card-body">
								{% for step in content.steps %}
								<div class="wizard-step-pane {{ loop.first ? '' : 'd-none' }}"
									 id="step-{{ step.step_slug }}"
									 data-step-index="{{ loop.index0 }}">
									{{ step.step_body|raw }}
								</div>
								{% endfor %}
							</div>
						</div>

						<div class="wizard-card-footer">
							<button class="btn btn-outline-secondary merlin-prev" type="button" disabled>
								{{ strings.previous }}
							</button>
							<button class="btn btn-primary merlin-next" type="button">
								{{ strings.next }}
							</button>
						</div>

					</div>
				</div>

			</div>
		</div>
	</div>
{% endblock %}

{% block body_footer_scripts %}
{% endblock %}