<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html" xml:lang="en" lang="en">
<head>
    <title>Components</title>
    {{> templates/partials/stylesheet }}
</head>
<body>
<main role="main">
    <a href="https://github.com/lsd-consulting/lsd-core?utm_source=lsd-report&utm_medium=logo&utm_campaign=components-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>
    <h2>{{model.title}}</h2>
    <div class="contents">
        <section class="sequence diagram svg">
            <h3 class="success">Component Diagram</h3>
            <figure>{{{ model.svg  }}}</figure>
            <div onclick="location.href='#!';" id="source" class="overlay">
                <div class="popup" onclick="event.stopPropagation();">
                    <h2>PlantUml markup</h2>
                    <span class="copy" title="copy" onclick="copyToClipboard('uml_code')"></span>
                    <a class="close" href="#!">&times;</a>
                    <div class="content">
                        <pre><code id="uml_code">{{model.uml}}</code></pre>
                    </div>
                </div>
            </div>
            <sub><a href="#source">[source]</a></sub>
        </section>
    </div>
</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();
    </script>
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
    {{> templates/partials/generated-by-footer }}
</footer>
</html>
