<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>{{report.title}}</title>
    {{> templates/partials/stylesheet }}
</head>
<body>
<main role="main">
    {{#if report.showContentsMenu ~}}
        <div class="menu">
            <div class="dropdown">
                <label class="dropdown">Scenarios</label>
                <div class="dropdown-content">
                    {{~#each report.scenarios }}
                        <a class="{{ status }}" href="#{{ id }}">{{title}}</a>
                    {{~/each}}
                </div>
            </div>
        </div>
    {{~/if}}
    <a href="https://github.com/lsd-consulting/lsd-core?utm_source=lsd-report&utm_medium=logo&utm_campaign=html-report" target="_blank" rel="noopener noreferrer" class="logo-link">
        <video class="logo-video" muted playsinline>
            <source src="https://cdn.jsdelivr.net/gh/lsd-consulting/lsd-core@main/src/main/resources/static/lsd_logo_animated.mp4" type="video/mp4">
        </video>
    </a>
    <h1>{{ report.title }}</h1>
    {{~#each report.scenarios ~}}
    <details class="{{ status }}"{{#if @first}} open{{/if}}>
        <summary class="{{ status }}">
            <h2 class="{{ status }}">{{title}}</h2>
        </summary>
        <article id="{{ id }}" class="{{ status }}">
        <div class="cards-row">
            {{~# if description ~}}
            <section class="card description {{ status }}">
                <h3 class="{{ status }}">Description</h3>
                {{{ description }}}
            </section>
            {{~/if}}
            {{#if metrics.asList ~}}
            <section class="card metrics {{ status }}">
                <h3 class="{{ status }}">Metrics</h3>
                <div class="table">
                    <div class="row">
                        <div class="rowHead">Name</div>
                        <div class="rowHead">Value</div>
                    </div>
                    {{~#each metrics.asList ~}}
                    <div class="row">
                        <div class="cell">{{{key}}}</div>
                        <div class="cell">{{{value}}}</div>
                    </div>
                    {{~/each}}
                </div>
            </section>
            {{~/if}}
            {{#if facts ~}}
            <section class="card facts {{ status }}">
                <h3 class="{{ status }}">Key Facts</h3>
                <div class="table">
                    <div class="row">
                        <div class="rowHead">Description</div>
                        <div class="rowHead">Value</div>
                    </div>
                    {{~#each facts ~}}
                    <div class="row">
                        <div class="cell">{{{key}}}</div>
                        <div class="cell">{{{value}}}</div>
                    </div>
                    {{~/each}}
                </div>
            </section>
            {{~/if}}
        </div>
        {{#if sequenceDiagram ~}}
        <section class="diagram-row sequence diagram svg {{ status }}">
            <h3 class="{{ status }}">Sequence Diagram</h3>
            <figure>{{{ sequenceDiagram.svg  }}}</figure>
            <div onclick="location.href='#!';" id="{{sequenceDiagram.id}}" class="overlay">
                <div class="popup" onclick="event.stopPropagation();">
                    <h2>PlantUml markup</h2>
                    <span class="copy" title="copy" onclick="copyToClipboard('sequence_uml_code{{sequenceDiagram.id}}')"></span>
                    <a class="close" href="#!">&times;</a>
                    <div class="content">
                        <pre><code id="sequence_uml_code{{sequenceDiagram.id}}">{{sequenceDiagram.uml}}</code></pre>
                    </div>
                </div>
            </div>
            <sub><a href="#{{sequenceDiagram.id}}">[source]</a></sub>
            <sub><a href="#{{componentDiagram.id}}">[component diagram]</a></sub>
        </section>
        <!-- Popup for component diagram -->
        <div onclick="location.href='#!';" id="{{ componentDiagram.id }}" class="overlay">
            <div class="popup" onclick="event.stopPropagation();">
                <h2>Component Diagram</h2>
                <a class="close" href="#!">&times;</a>
                <div class="content">
                    <pre>{{{ componentDiagram.svg }}}</pre>
                </div>
                <sub><a href="#uml{{componentDiagram.id}}">[source]</a></sub>
            </div>
        </div>
        <!-- Popup for component diagram UML via component diagram popup -->
        <div onclick="location.href='#!';" id="uml{{componentDiagram.id}}" class="overlay">
            <div class="popup" onclick="event.stopPropagation();">
                <h2>PlantUml markup</h2>
                <span class="copy" title="copy" onclick="copyToClipboard('component_uml_code{{componentDiagram.id}}')"></span>
                <a class="close" href="#{{componentDiagram.id}}">&times;</a><!--show previous popup on close-->
                <div class="content">
                    <pre><code id="component_uml_code{{componentDiagram.id}}">{{componentDiagram.uml}}</code></pre>
                </div>
            </div>
        </div>
        <!-- Section containing data for sequence diagram popups -->
        {{~#each dataHolders ~}}
        <div onclick="location.href='#!';" id="{{id}}" class="overlay">
            <div class="popup" onclick="event.stopPropagation();">
                <h2>{{ sanitise abbreviatedLabel }}</h2>
                <a class="close" href="#!">&times;</a>
                <div class="content">
                    <pre>{{{ data }}}</pre>
                </div>
            </div>
        </div>
        {{~/each}}
        {{~/if}}
        </article>
    </details>
    {{~/each}}
</main>
</body>
<footer>
    <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/styles/dark.min.css">
    {{> templates/partials/javascript }}
    <script>
        playLogoVideo();
        addSliderForSvgZoom();
        highlightLifelinesWhenClicked();
    </script>
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>
    <script>
        highlightKeywords();
        {{~#each report.scenarios ~}}
            {{#if facts ~}}
                {{#each facts ~}}
        highlightFact("{{../id}}", "{{value}}");
                {{~/each}}
            {{~/if}}
        {{~/each}}
        unMarkSvg();
    </script>
    {{> templates/partials/generated-by-footer }}
</footer>
</html>
