<!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>
  <!-- TODO Use fragment inclusion expressions to hide the panel when no ongoing automated activities are present? -->
  <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">[[${act.name}]]</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"/>

            <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}"></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}"></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>
</body>
</html>
