{% load fsm_tags %}

{# This partial is loaded via HTMX into #ride-status-section. It must include the container #}
{# element with the same id and hx-* attributes to preserve targeting for subsequent transitions. #}
<div id="ride-status-section"
     data-ride-status-actions
     hx-get="{% url 'parks:rides:ride_status_actions' park_slug=ride.park.slug ride_slug=ride.slug %}"
     hx-trigger="ride-status-changed from:body"
     hx-swap="outerHTML">
{% if user.is_authenticated and perms.rides.change_ride %}
<div class="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
    <h3 class="text-sm font-semibold text-blue-900 dark:text-blue-100 mb-3">
        <i class="fas fa-cog mr-2"></i>Status Management
    </h3>

    {% include "htmx/status_with_actions.html" with object=ride user=user target_id="ride-status-section" %}

    {% if ride.status == 'CLOSING' and ride.post_closing_status %}
    <div class="mt-3 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded text-sm">
        <i class="fas fa-info-circle mr-2 text-yellow-600"></i>
        <strong>Scheduled:</strong> Will transition to {{ ride.get_post_closing_status_display }} on {{ ride.closing_date }}
    </div>
    {% endif %}
</div>
{% endif %}
</div>
