{% extends 'base.html' %}

{% block content %}
<div class="container mt-5">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">{{ product.title }}</h4>
                </div>
                <div class="card-body">
                    <h5 class="card-title">{{ current_node.question }}</h5>
                    
                    {% if current_node.content %}
                    <div class="card-text mb-4">
                        {{ current_node.content|safe }}
                    </div>
                    {% endif %}
                    
                    <!-- Display images if available -->
                    {% if current_node.images %}
                    <div class="mb-4">
                        {% if current_node.images|length == 1 %}
                            <!-- Single image display -->
                            {% set image = current_node.images|first %}
                            <figure class="figure">
                                <img src="{{ image.image_url }}" class="img-fluid rounded" alt="Node image">
                                {% if image.caption %}
                                <figcaption class="figure-caption text-center">{{ image.caption }}</figcaption>
                                {% endif %}
                            </figure>
                        {% else %}
                            <!-- Multiple images carousel -->
                            <div id="nodeImagesCarousel" class="carousel slide" data-bs-ride="carousel">
                                <div class="carousel-indicators">
                                    {% for image in current_node.images|sort(attribute='display_order') %}
                                    <button type="button" data-bs-target="#nodeImagesCarousel" data-bs-slide-to="{{ loop.index0 }}" 
                                            {% if loop.first %}class="active" aria-current="true"{% endif %} 
                                            aria-label="Slide {{ loop.index }}"></button>
                                    {% endfor %}
                                </div>
                                <div class="carousel-inner">
                                    {% for image in current_node.images|sort(attribute='display_order') %}
                                    <div class="carousel-item {% if loop.first %}active{% endif %}">
                                        <img src="{{ image.image_url }}" class="d-block w-100 rounded" alt="Node image">
                                        {% if image.caption %}
                                        <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded">
                                            <p>{{ image.caption }}</p>
                                        </div>
                                        {% endif %}
                                    </div>
                                    {% endfor %}
                                </div>
                                <button class="carousel-control-prev" type="button" data-bs-target="#nodeImagesCarousel" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#nodeImagesCarousel" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                </button>
                            </div>
                        {% endif %}
                    </div>
                    {% endif %}
                    
                    <!-- For backward compatibility, show the single image if no images relationship -->
                    {% if current_node.image_url and not current_node.images %}
                    <div class="mb-4">
                        <img src="{{ current_node.image_url }}" class="img-fluid rounded" alt="Node image">
                    </div>
                    {% endif %}
                    
                    <!-- Display YouTube video if available -->
                    {% if current_node.youtube_embed_url %}
                    <div class="mb-4">
                        <div class="ratio ratio-16x9">
                            <iframe src="{{ current_node.youtube_embed_url }}" title="YouTube video" allowfullscreen></iframe>
                        </div>
                    </div>
                    {% endif %}
                    
                    {% if current_node.is_terminal %}
                        <div class="alert alert-info">
                            This is the end of this path. 
                            <a href="{{ url_for('user.product_detail', product_id=product.id) }}" class="alert-link">Start over</a>
                        </div>
                    {% else %}
                        <div class="d-flex justify-content-center mt-4">
                            {% if current_node.yes_node %}
                                <a href="{{ url_for('user.decision_node', product_id=product.id, node_id=current_node.yes_node.id) }}" class="btn btn-success mx-2">Yes</a>
                            {% endif %}
                            
                            {% if current_node.no_node %}
                                <a href="{{ url_for('user.decision_node', product_id=product.id, node_id=current_node.no_node.id) }}" class="btn btn-danger mx-2">No</a>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
                <div class="card-footer text-muted">
                    <a href="{{ url_for('user.product_detail', product_id=product.id) }}" class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-arrow-left"></i> Back to Start
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}