{% extends "base.html" %}
{% load static %}

{% block title %}{{ flow.name }} - Flow Editor{% endblock %}

{% block head_extra %}
<link rel="stylesheet" href="{% static 'js/flow-editor.css' %}">
{% endblock %}

{% block body %}
<div class="mx-auto w-full max-w-[1600px] px-4 py-4 sm:px-6 lg:px-8">
    <div
        id="flow-editor-react-root"
        data-flow-id="{{ flow.pk }}"
        data-flow-name="{{ flow.name|escape }}"
        data-flow-status="{{ flow.status }}"
        data-list-url="{% url 'flows:flow_list' %}"
        data-csrf-token="{{ csrf_token }}"
        class="flow-editor-host"
    ></div>
    {{ flow.definition|json_script:"flow-definition-json" }}
</div>
<script src="{% static 'js/flow-editor.js' %}"></script>
{% endblock %}