<!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" th:action="@{/startAct}" method="post">
            <th:block th:if="${session.acts != null && session.acts.size > 0}">
              <!--  Options shown only when starting an activity  -->
              <p>The selected Process Model supports the following activities. Choose the activity you want to start.</p>
              <div class="field has-addons">
                <div class="control is-expanded">
                  <div class="select is-fullwidth">
                    <select id="activities" name="iri"
                            th:onchange="'window.location.href = \'' + @{/inarts} + '?iri=\' + encodeURIComponent(this.value) ' ">
                      <option th:value="1">Select Activity</option>
                      <option th:each="act: ${session.acts}" th:selected="${act.iri == current}" th:value="${act.iri}"
                              th:text="${act.name}"></option>
                    </select>
                  </div>
                </div>
                <div class="control" th:unless="${session.arts != null}"><button id="startActivity" type="submit" class="button is-primary" disabled>Start Activity</button></div>
                <div class="control" th:if="${session.arts != null}"><button id="startActivity" type="submit" class="button is-primary">Start Activity</button></div>
              </div>
            </th:block>
            <th:block th:if="${session.endacts != null && session.endacts.size > 0}">
              <!--  Options shown only when ending an activity  -->
              <p>The selected Process Model supports the following activities. Choose the activity you want to end.</p>
              <div class="field has-addons">
                <div class="control is-expanded">
                  <div class="select is-fullwidth">
                    <select id="activitiesend" name="activityend"
                            th:onchange="'window.location.href = \'' + @{/endselect} + '?iri=\' + encodeURIComponent(this.value) ' ">
                      <option th:value="1">Select Activity</option>
                      <option th:each="actend: ${session.endacts}" th:selected="${actend.iri == currentend}"
                              th:value="${actend.iri}" th:text="${actend.name}"></option>
                    </select>
                  </div>
                </div>
              </div>
            </th:block>
            <div class="control">
              <button type="submit" class="button is-primary" id="endEnactment" th:if="${endBool}">End Enactment</button>
            </div>
          </form>

          <div class="artifacts pt-6" th:if="${session.arts != null && session.arts.size > 0}">
            <p class="is-size-4 is-capitalized">Artifacts</p>
            <th:block th:each="art : ${session.arts}">
              <article class="media">
                <figure class="media-left">
                  <p class="image is-64x64">
                    <img src="https://bulma.io/images/placeholders/128x128.png" alt="Download arrow">
                  </p>
                </figure>
                <div class="media-content">
                  <div class="content">
                    <p>
                      <strong th:text="${art.relatesTo.name}"></strong> <small th:text="${art.relatesTo.type}"></small>
                      <br>
                      <a
                        th:if="${art.fileExtension == 'xopp' || art.fileExtension == 'csv' || art.fileExtension == 'drawio'}"
                        th:href="@{|${storageURL}/files/${art.fileExtension}/${art.location}|}">Download</a>
                      <a
                        th:if="${art.fileExtension != null && art.fileExtension != 'xopp' && art.fileExtension != 'csv' && art.fileExtension != 'drawio'}"
                        th:href="@{|${storageURL}/files/file/${art.location}|}">Download</a>
                    </p>
                  </div>
                </div>
              </article>
            </th:block>
          </div>
        </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>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>
