<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="base::layout(~{::title}, ~{::main})">
<head>
  <title>Wee! Workflow Enactment Engine</title>
</head>
<body>
<main>
  <section class="pt-6 pb-6 pl-5 pr-5">
    <h2 class="is-size-3 is-capitalized">Workflow Enactment Engine</h2>
    <div class="level-left">
      <p th:inline="text">Enacting the Process Model:</p>
      <div class="tags has-addons">
        <span class="tag">PM</span>
        <span class="tag is-primary">[[${session.pm.name}]]</span>
      </div>
    </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  -->
          <label for="activities">Select activity to start:</label>
          <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">
              <button th:unless="${session.arts != null}" id="startActivity" type="submit" class="button is-primary" disabled>Start Activity</button>
              <button th:if="${session.arts != null}" 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  -->
          <label for="activitiesend">Select activity to end:</label>
          <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="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 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>

  </section>
</main>
</body>
</html>