{% extends "base.html" %}

{% block title %}{{ tour.name }} - Interactive Guide{% endblock %}

{% block content %}
<div class="container my-4">
    <h1>{{ tour.name }}</h1>
    <p class="lead">{{ tour.description }}</p>
    
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">Ready to Start</h5>
            <p>This interactive guide will walk you through each step of the process.</p>
            <button class="btn btn-primary" onclick="window.tourManager.loadTour('{{ tour.slug }}')">
                Start Guide Now
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Auto-start the tour after a short delay
    document.addEventListener('DOMContentLoaded', () => {
        setTimeout(() => {
            window.tourManager.loadTour('{{ tour.slug }}');
        }, 1000);
    });
</script>
{% endblock %}