<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="base::layout(~{::title}, ~{::main})">
<head>
  <title>[[${session.trace.name}]] Enactment</title>
</head>
<body>
<main>
  <article th:replace="fragments/automated.html :: activity(activities=${session.automated})"></article>

  <section class="pt-6 pb-6 pl-5 pr-5">
    <div class="columns">
      <div class="column is-two-thirds">
        <div class="tags are-large has-addons">
          <span class="tag">PM</span>
          <span class="tag is-primary">[[${session.pm.name}]]</span>
        </div>
        <div class="enactment pt-3">
          <form class="form" id="form" th:action="@{/endAct}" method="post" enctype="multipart/form-data">
            <div class="tags are-large has-addons">
              <span class="tag">ACTIVITY</span>
              <span class="tag is-primary" th:text="${act.name} + (${invokingActivityName != null} ? ' (' + ${invokingActivityName} + ')' : '')"></span>
            </div>
            <p>Choose the output port for the selected Process Model and Activity.</p>

            <div class="select">
              <select id="portSelect" name="port" th:onchange="showDiv(this)">
                <option th:value="1">select port</option>
                <option th:each="port: ${act.ctrlOutPorts}" th:value="${port.iri}" th:text="${port.name}"></option>
              </select>
            </div>
            <input type="hidden" th:value="${act.iri}" name="activity"/>
			<input type="hidden" name="branchId" th:value="${session.currentBranchId}" />

            <div id="hidden_div" class="is-hidden">
              <div th:if="${arts != null && arts.size > 0}">
                <p class="is-size-4 pt-4">Artifacts</p>
                <p>The selected action requires you to upload the artifact created by the Activity.</p>
                <th:block th:each="art : ${arts}">
                  <p th:inline="text"><strong>Name: </strong><span class="accent">[[${art.name}]]</span></p>
                  <p th:inline="text"><strong>Type: </strong><span class="accent">[[${art.type}]]</span></p>
                  <div class="file has-name">
                    <label class="file-label">
                      <input class="file-input" type="file" th:name="${art.name}" id="input-file-${art.name}">
                      <span class="file-cta">
                        <span class="file-icon">
                          <i class="fas fa-upload"></i>
                        </span>
                        <span class="file-label">Choose a file…</span>
                      </span>
                      <span class="file-name">[[${art.type}]]</span>
                    </label>
                  </div>
                </th:block>
              </div>
              <div class="control pt-4">
                <button type="submit" class="button is-primary">End Activity</button>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="column">
        <div class="tags are-large has-addons">
          <span class="tag">PT</span>
          <span class="tag is-primary">[[${session.trace.name}]]</span>
        </div>
        <div class="details">
          <p th:inline="text"><strong>Trace: </strong><span class="accent">[[${session.trace.name}]]</span></p>
          <p th:inline="text"><strong>Started at: </strong><span class="accent">[[${session.trace.events[0].timestampF}]]</span></p>
          <th:block th:each="ev : ${session.trace.events}">
            <p th:if="${ev.class.name == 'ua.be.wee.model.pt.StartActivityEvent'}">
              <strong>Begin: </strong>
              <span class="accent" th:text="${ev.relatesTo.activity.name} + (${invokingActivityMap != null && invokingActivityMap[ev.relatesTo.activity.iri] != null} ? ' (' + ${invokingActivityMap[ev.relatesTo.activity.iri]} + ')' : '')"></span>
            </p>
            <p th:if="${ev.class.name == 'ua.be.wee.model.pt.EndActivityEvent'}">
              <strong>End: </strong>
              <span class="accent" th:text="${ev.relatesTo.activity.name} + (${invokingActivityMap != null && invokingActivityMap[ev.relatesTo.activity.iri] != null} ? ' (' + ${invokingActivityMap[ev.relatesTo.activity.iri]} + ')' : '')"></span>
            </p>
            <p th:if="${ev.class.name == 'ua.be.wee.model.pt.EndActivityEvent' || ev.class.name == 'ua.be.wee.model.pt.StartActivityEvent'}">
              <strong>Port: </strong><span class="accent">[[${ev.relatesTo.name}]]</span>
            </p>
          </th:block>
        </div>
      </div>
    </div>
  </section>
</main>
<script>
  function showDiv(select) {
    var hiddenDiv = document.getElementById("hidden_div");
    if (select.value !== "1") {
      hiddenDiv.classList.remove("is-hidden");
    } else {
      hiddenDiv.classList.add("is-hidden");
    }
  }
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9308425219bb1d7a',t:'MTc0NDY4NjcyMi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
</body>
</html>