{% extends "base_curator.html" %}

{% block page_content %}

            <style type="text/css">
            #divLegends {
                border: 1px solid lightgray;
                width:20%;
                float: right;
				height: 700px;

            }
            body, select {
				font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
				font-size: 14px;
            }
            #divWorkflow {
                width: 80%;
                float:left;
				height: 700px;
                border: 1px solid lightgray;
            }
            table.legend_table {
                font-size: 11px;
                border-width:1px;
                border-color:#d3d3d3;
                border-style:solid;
            }
            table.legend_table,td {
                border-width:1px;
                border-color:#d3d3d3;
                border-style:solid;
                padding: 2px;
            }
            div.table_content {
                width:80px;
                text-align:center;
            }
            div.table_description {
                width:100px;
            }

            #operation {
                font-size:28px;
            }
            #node-popUp {
                display:none;
                position:absolute;
                top:100px;
                left:170px;
                z-index:299;
                width:300px;
                height:150px;
                background-color: #f9f9f9;
                border-style:solid;
                border-width:3px;
                border-color: #5394ed;
                padding:10px;
                text-align: center;
            }
            #edge-popUp {
                display:none;
                position:absolute;
                top:350px;
                left:170px;
                z-index:299;
                width:250px;
                height:90px;
                background-color: #f9f9f9;
                border-style:solid;
                border-width:3px;
                border-color: #5394ed;
                padding:10px;
                text-align: center;
            }
        </style>
    <div class="card">
        <div class="card-body">
            <h3 data-toggle="tooltip" class="card-title" data-placement="left" title="This step defines the workflow of the paper. A workflow represents how the content of the paper was created. Use the Edit Button in the canvas to add: Add External Node , or to Add Node Connection. The type of nodes are listed on the right. (Hover over the node for hints)."> Generate Workflow </h3>
                    <form method="post" action="workflow">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                        <div id="node-popUp">
						<span id="node-operation">Add External</span> <br>
						<input type="hidden" id="node-label"/>

						<table style="margin:auto;">
							<tr>
								<td>Description</td><td><input id="node-readme" class="tooltipster" title="Enter a  description about the external resources used in the project." value="" /></td>
							</tr>
							<tr>
								<td>URL</td><td><input id="node-url" class="tooltipster" title="Enter a url pointing to the external resource." value="" /></td>
							</tr>
						</table>
						<input type="button" value="Save External" class="tooltipster" title="Saves the External resource information." id="node-saveButton" />
						<input type="button" value="cancel" id="node-cancelButton" />
					</div>
					<div id="edge-popUp">
						<span id="edge-operation">edge</span> <br>
						<input type="button" value="save" id="edge-saveButton" />
						<input type="button" value="cancel" id="edge-cancelButton" />
					</div>
					<div id="divWorkflow"></div>
					<div id="divLegends"></div>
                        <span class="input-group-btn">
                            <input type="button"
                                   title="Adds a free flow to the nodes and edges. This may disperse the nodes zoom in or zoom out as per need."
                                   id="Movement" value="Rearrange" onclick="addPhysics();"
                                   class="btn btn-theme-colored btn-lg m-2"
                                   style="font-weight: bold; height: 50px;">
                            <input type="button" class="btn btn-theme-colored btn-lg m-2"
                                   title="Continue to Step 7."
                                   id="Save"
                                   value="Continue" style="font-weight: bold; height: 50px;"
                                   onclick="connectedNodes('POST');">

                        </span>
                    </form>
        </div>
    </div>
    <script src="{{ url_for('static', filename='./javascript/modules/workflow.js') }}"></script>

{% endblock %}