<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="{{ url_for('flow/static', file='css/flow_viewer.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('flow/static', file='css/jquery.tipsy.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', file='css/skeleton-2.0.4.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', file='css/normalize-3.0.2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', file='css/index.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', file='css/font-awesome.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', file='css/alertify.css') }}">
    <script type="text/javascript" src="{{ url_for('flow/static', file='js/d3-5.12.0.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('flow/static', file='js/dagre-d3-0.6.3.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('flow/static', file='js/flow_viewer.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', file='js/jquery-3.4.1.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('flow/static', file='js/jquery.tipsy.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', file='js/mx_utils.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', file='js/alertify-0.3.17.trunk.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', file='js/context_menu.js') }}"></script>
    <title>Workflow Viewer</title>
</head>

<body>

<div id="flow_header">
    <div id="tabs" class="tab">
        <!-- buttons are added by the enlist_tab() function -->
    </div>
</div>

<div id="user_message" class="clear user_message">
</div>

<div class="live map">
    <svg>
        <g/>
    </svg>
</div>

<form class="justify-space-around">
    <button type="button" class="action_button btn-center" onclick="window.close()">
        <i class="fa fa-remove"></i><span>Close</span></button>
</form>

<script type="text/javascript">
    const mx_flow = {{ flow_details|jsonify|safe }};
    const process_name = "{{ process_name|safe }}";
    const active_run_mode = "{{ active_run_mode|safe }}";
    const freerun_uows = {{ freerun_uows|jsonify|safe }};

    // if the mx_flow is not available for this process
    if (Object.keys(mx_flow).length === 0) {
        renderEmptyResponse($("#user_message"), process_name);
    }

    $(function () {  // former $(document).ready(function () {...})
        enlistTabs($("#tabs"), "managed");
        enlistTabContent($("#flow_header"), mx_flow, process_name, "managed", "type_managed", active_run_mode);

        let entry_name;
        for (let freerun_uow in freerun_uows) {
            entry_name = freerun_uow.process_name.substring(process_name.length + 2);  // +2 is to include divider "::"
            enlistTabs($("#tabs"), entry_name);
            enlistTabContent($("#flow_header"), mx_flow, process_name, entry_name, uow.unit_of_work_type, active_run_mode);
        }

        // show "managed" tab
        document.getElementById("tab_button_managed").click();
        renderFlowGraph(mx_flow.graph);
    });
</script>

</body>
</html>
