<!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>
    <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">
                        <span th:text="${session.pm.name}"></span>
                    </span>
                </div>

                <div th:if="${errorMessage}" class="notification is-danger">
                    <p th:text="${errorMessage}"></p>
                </div>

                <div class="enactment pt-3">
                    <form th:action="@{/selectBranch}" method="post">
                        <div class="field">
                            <label class="label">Process Model Context</label>
                            <div class="control">
                                <div class="select is-fullwidth">
                                    <select name="branchId" onchange="this.form.submit()" required>
                                        <option value="">Select Process Model</option>
                                        <option th:each="branch : ${activeBranches}"
                                                th:value="${branch.branchId}"
                                                th:text="${branch.pmName + (branch.invokingActivityName != null ? ' (Invoked by ' + branch.invokingActivityName + ')' : '')}"
                                                th:selected="${branch.branchId == session.currentBranchId}">
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div th:if="${#lists.size(availableActsBranches) > 0}">
                        <form th:action="@{/startAct}" method="post">
                            <input type="hidden" name="branchId" th:value="${session.currentBranchId}"/>
                            <div class="field">
                                <label class="label">Activities</label>
                                <div class="control">
                                    <div class="select is-fullwidth">
                                        <select name="iri" required id="activity-selector">
                                            <option value="">Select Activity</option>
                                            <option th:each="act : ${session.acts}"
                                                    th:value="${act.iri}"
                                                    th:text="${act.port != null ? act.port.activity.name : 'End Process'}">
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="control">
                                <button class="button is-primary" type="submit" id="start-activity-button">Start Activity</button>
                            </div>
                        </form>
                    </div>

                    <div th:if="${#lists.size(runningActsBranches) > 0}" class="pt-5">
                        <form th:action="@{/endselect}" method="get">
							<p class="has-text-weight-bold">Select an activity to end</p>
                            <div class="field">
                                <label class="label">Activities to End</label>
                                <div class="control">
                                    <div class="select is-fullwidth">
                                        <select name="iri" required>
                                            <option value="">Select Activity</option>
                                            <option th:each="endAct : ${session.endacts}"
                                                    th:value="${endAct.activity.iri}"
                                                    th:text="${endAct.activity.name}">
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="branchId" th:value="${session.currentBranchId}"/>
                            <div class="control">
                                <button class="button is-danger" type="submit">End Activity</button>
                            </div>
                        </form>
                    </div>

                    <div th:if="${session.arts != null && session.arts.size() > 0}" class="artifacts pt-6">
                        <p class="is-size-4 is-capitalized">Artifacts</p>
                        <div 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">
                                    </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:href="@{|/files/${art.fileExtension}/${art.location}|}">Download</a>
                                        </p>
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
            </div>

            <div class="column">
                <div class="tags are-large has-addons">
                    <span class="tag">PT</span>
                    <span class="tag is-primary" th:text="${session.trace.name}"></span>
                </div>

                <div class="details">
                    <div class="timeline">
                        <th:block th:each="ev : ${eventViews}">
                            <div class="timeline-item">
                                <div class="event-content">
                                    <p>
                                        <strong th:text="${ev.label + ': '}"></strong>
                                        <span class="accent" th:text="${ev.target}"></span>
                                    </p>
                                </div>
                                <div class="arrow">↓</div>
                            </div>
                        </th:block>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script th:inline="javascript">
        document.addEventListener('DOMContentLoaded', () => {
            const activitySelector = document.getElementById('activity-selector');
            const startActivityButton = document.getElementById('start-activity-button');

            if (activitySelector && startActivityButton) {
                const updateButtonText = () => {
                    const selectedOption = activitySelector.options[activitySelector.selectedIndex];

                    if (selectedOption && selectedOption.text === 'End Process') {
                        startActivityButton.textContent = 'End PM';
                    } else {
                        startActivityButton.textContent = 'Start Activity';
                    }
                };

                activitySelector.addEventListener('change', updateButtonText);

                updateButtonText();
            }
        });
    </script>
</main>
</body>
</html>