{#include main}
{#style}
.annotation {
color: gray;
}
code {
  font-family: Consolas,"courier new";
  color: black;
  padding: 2px;
  font-size: 105%;
}
{/style}
{#script} 
function textToClipboard (text) {
    var dummy = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}
{/script}
{#title}Functions{/title}
{#body}
<table class="table table-striped">
    <thead class="thead-dark">
    <tr>
        <th scope="col" class="col-2">Name</th>
        <th scope="col" class="col-2">Endpoint</th>
        <th scope="col" class="col-4">Cloud event - Binary</th>
        <th scope="col" class="col-4">Cloud event - Structured</th>
    </tr>
    </thead>
    <tbody>
    {#for workflowInfo in info:workflowFunctionFlowInfos}
    <tr>
        <td class="col-2">
            {workflowInfo.name}
        </td>
        <td class="col-2">
            {workflowInfo.endpoint}
        </td>
        <td class="col-4">
        	<div class="table-responsive">
        	<button  class="btn btn-outline-dark btn-sm btn-block" onclick="textToClipboard('{workflowInfo.curlBinary}')">Copy cURL</button>
            <pre style="width:400px" id="{workflowInfo.name}_b">{workflowInfo.binaryInstructions}</pre>            
            </div>
        </td>
        <td class="col-4">
        	<div class="table-responsive">
        	<button  class="btn btn-outline-dark btn-sm btn-block" onclick="textToClipboard('{workflowInfo.curlStructure}')">Copy cURL</button>
        	<pre style="width:400px" id="{workflowInfo.name}_s">{workflowInfo.structuredInstructions}</pre>        	
            </div>
        </td>
    {/for}
    </tbody>
</table>
{/body}
{/include}