{% load i18n %}
<div 
    bloomerp-component="workflow" class="workflow-builder"
    data-workflow-id="{{ workflow_id }}"
    data-workflow-json='{{ workflow_json|default:"" }}'
    {% if workflow_readonly %}
    data-workflow-readonly="true"
    data-workflow-run-events="{{ workflow_run_events }}"
    data-workflow-run-status="{{ workflow_run_status }}"
    {% else %}
    data-workflow-run-url="{% url 'components_automation_run_workflow' workflow_id=workflow_id %}"
    {% endif %}
    >
    <!-- Toolbar -->
    <div class="workflow-toolbar" role="toolbar" aria-label="Workflow tools">
        <div class="flex gap-2" {% if not workflow_readonly %}data-workflow-edit-tools{% endif %}>
            {% if not workflow_readonly %}
            <button class="btn btn-primary btn-sm" id="add-node-btn" type="button">
                {% blocktrans %}Add Node{% endblocktrans %}
            </button>
            <button class="btn btn-primary btn-sm" type="button" data-workflow-run>
                <i class="fa-solid fa-play"></i>
                {% blocktrans %}Run{% endblocktrans %}
            </button>
            {% endif %}
            <button id="zoom-in-btn" class="btn btn-secondary btn-sm" type="button" aria-label="Zoom in">
                <i class="fa-solid fa-magnifying-glass-plus"></i>
            </button>
            <button id="zoom-out-btn" class="btn btn-secondary btn-sm" type="button" aria-label="Zoom out">
                <i class="fa-solid fa-magnifying-glass-minus"></i>
            </button>
            <button id="focus-first-node-btn" class="btn btn-secondary btn-sm" type="button">
                <i class="fa-solid fa-crosshairs"></i>
                {% blocktrans %}Recenter{% endblocktrans %}
            </button>
        </div>
        <div class="flex items-center gap-2" data-workflow-run-tools hidden>
            <span class="text-sm font-semibold" data-workflow-run-status>{% translate "Preparing run…" %}</span>
            {% if not workflow_readonly %}
            <button class="btn btn-secondary btn-sm" type="button" data-workflow-back-to-editor>
                <i class="fa-solid fa-pen"></i>
                {% translate "Back to editor" %}
            </button>
            {% endif %}
        </div>
    </div>

    <!-- DrawFlow Canvas -->
    <div id="drawflow" tabindex="0" aria-label="Workflow canvas"></div>
    {% if not workflow_readonly %}
    <div class="workflow-selection-actions" data-selection-actions hidden role="toolbar" aria-label="Selection actions">
        <button type="button" class="btn btn-secondary btn-sm" data-selection-rename>{% translate "Rename" %}</button>
        <button type="button" class="btn btn-secondary btn-sm" data-selection-duplicate>{% translate "Duplicate" %}</button>
        <button type="button" class="btn btn-secondary btn-sm" data-selection-delete>{% translate "Delete" %}</button>
        <small data-selection-notice hidden></small>
    </div>
    <span class="sr-only" role="status" data-selection-status></span>
    {% endif %}

    <div class="hidden" aria-hidden="true" data-workflow-node-definition-registry>
        {% for node_type in node_types %}
            {% for sub_type in node_type.nodes %}
            <div
                data-node-subtype-id="{{ sub_type.id }}"
                data-node-subtype-name="{{ sub_type.name }}"
                data-node-subtype-description="{{ sub_type.description }}"
                data-node-subtype-icon="{{ sub_type.icon }}"
                data-node-type-id="{{ node_type.id }}"
                data-node-type-name="{{ node_type.name }}"
                data-node-output-ports="{{ sub_type.default_output_ports_json }}"
            ></div>
            {% endfor %}
        {% endfor %}
    </div>

    {% if not workflow_readonly %}
    <c-ui.drawer id="node-drawer" portal_to_body="true">
        <div data-workflow-drawer-content></div>
    </c-ui.drawer>

    <c-ui.modal title="Update node" id="update-node-modal" />
    {% endif %}
</div>