<?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/mx_page.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', file='css/font-awesome-4.3.0.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-3.5.17.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('flow/static', file='js/dagre-d3-0.4.17.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-2.1.4.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>Flow Viewer</title>
</head>

<body>

<div id="flow_header" class="tile_component">
</div>

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

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

<form style="text-align: center">
    <input type="button" class="action_button fa-input" value="&#xf00d;&nbsp;Close" onclick="window.close()"/>
</form>

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

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

    $(document).ready(function () {
        render_flow_header($("#flow_header"), mx_flow, process_name);
        render_flow_graph(mx_flow.graph, d3.select("#flow"));
    });
</script>

</body>
</html>
