<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="base::layout(~{::title}, ~{::main})">
<head>
    <title>[[${pm.name}]] Enactment End</title>
    <style>
        .timeline {
            position: relative;
            padding-left: 4rem;
            margin: 1rem 0;
        }

        .timeline-item {
            position: relative;
            padding-bottom: 2rem;
        }

        .timeline-item:not(:last-child)::before {
            content: '';
            position: absolute;
            left: -2.35rem;
            top: 0;
            width: 2px;
            height: 100%;
            background-color: #dbdbdb;
        }

        .timeline-icon {
            position: absolute;
            left: -3rem;
            top: 0.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            background-color: #7a7a7a;
            color: white;
            font-size: 0.8rem;
        }
        .timeline-icon.is-start-trace { background-color: #23d160; }
        .timeline-icon.is-end-trace { background-color: #ff3860; }
        .timeline-icon.is-start-activity { background-color: #3273dc; }
        .timeline-icon.is-end-activity { background-color: #666; }
        .timeline-icon.is-invoke { background-color: #ffdd57; color: rgba(0,0,0,.7); }
        .timeline-icon.is-fork { background-color: #7957d5; }

        .timeline-content .heading {
            font-size: 0.9rem;
            color: #7a7a7a;
            margin-bottom: 0.25rem;
        }
        .timeline-content .title {
            font-size: 1.1rem;
            font-weight: 600;
        }
        .timeline-content .subtitle {
            font-size: 0.9rem;
            color: #4a4a4a;
        }
        .is-hierarchical {
            border-left: 3px solid #ffdd57;
            padding-left: 1rem;
            background-color: #fffbeb;
        }
        .is-forked {
            border-left: 3px solid #7957d5;
            padding-left: 1rem;
            background-color: #f4f0ff;
        }
    </style>
</head>
<body>
<main>
    <section class="section">
        <div class="container">
            <h1 class="title">Execution Finished</h1>
            <p class="subtitle" th:inline="text">
                The enactment of the Process Model <strong class="has-text-primary">[[${pm.name}]]</strong> has been completed.
            </p>
            <div class="tags are-medium has-addons">
                <span class="tag">Process Trace</span>
                <span class="tag is-primary" th:text="${trace.iri}"></span>
            </div>
            <hr/>

            <h2 class="title is-4 mt-5">Execution Timeline</h2>

            <div class="box content">
                <div class="timeline">
                    <th:block th:each="ev : ${trace.events}">
                        <div th:if="${not (ev instanceof T(ua.be.wee.model.pt.EndTraceEvent))}">
                            <th:block th:with="baseTraceUri=${(ev.branchId != null and #strings.contains(ev.branchId, '/branches/')) ? #strings.substringBefore(ev.branchId, '/branches/') + '/branches/' : ''},
                                               branchPath=${(ev.branchId != null and #strings.contains(ev.branchId, '/branches/')) ? #strings.substringAfter(ev.branchId, baseTraceUri) : ''},
                                               indentationLevel=${(branchPath != '' ? #strings.length(branchPath) - #strings.length(#strings.replace(branchPath, '/', '')) : 0)}">

                                <div class="timeline-item" th:style="'margin-left: ' + (${indentationLevel} * 3) + 'rem;'">

                                    <div th:if="${ev instanceof T(ua.be.wee.model.pt.StartTraceEvent) and ev.iri == trace.iri}">
                                        <span class="timeline-icon is-start-trace">▶</span>
                                        <div class="timeline-content">
                                            <p class="heading" th:text="${ev.timestampF}"></p>
                                            <p class="title is-5">Process Started</p>
                                            <p class="subtitle" th:text="${trace.pmEnacted.name}"></p>
                                        </div>
                                    </div>

                                    <div th:if="${ev instanceof T(ua.be.wee.model.pt.StartActivityEvent)}">
                                        <th:block th:with="activity = ${ev.relatesTo.activity}">
                                            <div th:if="${activity instanceof T(ua.be.wee.model.nodes.InvokingActivity)}">
                                                <div th:if="${indentationLevel == 0}">
                                                    <span class="timeline-icon is-fork">⑂</span>
                                                    <div class="timeline-content is-forked">
                                                        <p class="heading" th:text="${ev.timestampF}"></p>
                                                        <p class="title is-5">Fork Execution</p>
                                                        <p class="subtitle" th:text="'Executing branch: ' + ${activity.name}"></p>
                                                        <small th:text="'Branch: ' + ${ev.branchId}"></small>
                                                    </div>
                                                </div>
                                                <div th:if="${indentationLevel > 0}">
                                                    <span class="timeline-icon is-invoke">↳</span>
                                                    <div class="timeline-content is-hierarchical">
                                                        <p class="heading" th:text="${ev.timestampF}"></p>
                                                        <p class="title is-5">Hierarchical Call</p>
                                                        <p class="subtitle" th:text="'Executing activity: ' + ${activity.name}"></p>
                                                        <small th:text="'Branch: ' + ${ev.branchId}"></small>
                                                    </div>
                                                </div>
                                            </div>
                                            <div th:unless="${activity instanceof T(ua.be.wee.model.nodes.InvokingActivity)}">
                                                <span class="timeline-icon is-start-activity">●</span>
                                                <div class="timeline-content">
                                                    <p class="heading" th:text="${ev.timestampF}"></p>
                                                    <p class="title is-5">Activity Started</p>
                                                    <p class="subtitle" th:text="${activity.name}"></p>
                                                    <small th:text="'Port: ' + ${ev.relatesTo.name} + ' | Branch: ' + ${ev.branchId}"></small>
                                                </div>
                                            </div>
                                        </th:block>
                                    </div>

                                    <div th:if="${ev instanceof T(ua.be.wee.model.pt.EndActivityEvent)}">
                                        <span class="timeline-icon is-end-activity">○</span>
                                        <div class="timeline-content">
                                            <p class="heading" th:text="${ev.timestampF}"></p>
                                            <p class="title is-5">Activity Ended</p>
                                            <p class="subtitle" th:text="${ev.relatesTo.activity.name}"></p>
                                            <small th:text="'Port: ' + ${ev.relatesTo.name} + ' | Branch: ' + ${ev.branchId}"></small>
                                        </div>
                                    </div>
                                </div>
                            </th:block>
                        </div>
                    </th:block>

                    <th:block th:each="ev, iterStat : ${trace.events}">
                        <th:block th:if="${ev instanceof T(ua.be.wee.model.pt.EndTraceEvent) and ev.iri == trace.iri + '_end'}">
                            <div th:if="${iterStat.index == 0 or trace.events[iterStat.index-1].iri != ev.iri}">
                                 <div class="timeline-item">
                                    <span class="timeline-icon is-end-trace">■</span>
                                    <div class="timeline-content">
                                        <p class="heading" th:text="${ev.timestampF}"></p>
                                        <p class="title is-5">Process Finished</p>
                                        <p class="subtitle" th:text="${pm.name}"></p>
                                    </div>
                                </div>
                            </div>
                        </th:block>
                    </th:block>
                </div>
            </div>
        </div>
    </section>
</main>
</body>
</html>