{% load i18n liveops %}
<div id="op-status"></div>
<div id="op-progress"></div>
<div id="op-log"></div>
<div id="op-stages">{% if op.stages %}{% include "liveops/_stages.html" with op=op %}{% endif %}</div>
<div id="op-result">
{% if op.get_state == "FINISHED_OK" %}
{% render_op_result op %}
{% elif op.get_state == "FINISHED_ERROR" %}
{% include "liveops/_error.html" with message=op.traceback %}
{% elif op.get_state == "CANCELLED" %}
{% include "liveops/_cancelled.html" with op=op %}
{% endif %}
</div>
{% url 'liveops:cancel' op_type=op.op_type_key pk=op.pk as cancel_url %}
{% url 'liveops:restart' op_type=op.op_type_key pk=op.pk as restart_url %}
{# Cancel/restart are htmx buttons (no full-page reload). CSRF travels as an #}
{# X-CSRFToken header injected from the cookie by liveops.js, so no rendered #}
{# token is needed — this also works on WS-pushed chained containers, which #}
{# have no request context. liveops.js flips visibility on liveop_finished. #}
<div id="op-controls" data-op-state="{{ op.get_state }}">
{% if cancel_url %}
<button type="button" class="op-controls-cancel" hx-post="{{ cancel_url }}" hx-swap="none"{% if op.get_state != "NOT_STARTED" and op.get_state != "STARTED" %} hidden{% endif %}>{% trans "Cancel" %}</button>
{% endif %}
{% if restart_url %}
<button type="button" class="op-controls-restart" hx-post="{{ restart_url }}" hx-swap="none"{% if op.get_state != "FINISHED_ERROR" %} hidden{% endif %}>{% trans "Retry" %}</button>
{% endif %}
</div>