<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        {% if config.include_mermaid %}
        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js" async></script>
        {% endif %}
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
        <title>ADR Viewer - {{ config.project_title }}</title>

        <style type="text/css">
            body {
                display: grid;
                width: auto;
                height: auto;
                align-items: center;
                justify-items: center;
                grid-template-rows: 2fr minmax(80%, auto) 2fr;
            }

            @media only screen and (min-width: 1025px) {
                body {
                    grid-template-columns: 1fr 3fr 1fr;
                }

                header, .panel-group, footer {
                    grid-column: 2;
                }
            }

            .panel-group {
                width: 100%
            }

            .panel-heading.adr-accepted {
                background-color: lightgreen;
            }

            .panel-heading.adr-superseded {
                background-color: lightgrey;
            }

            .panel-heading.adr-amended {
                background-color: yellow;
            }

            .panel-heading.adr-unknown {
                background-color: white;
            }

            .panel-heading.adr-pending {
                background-color: lightblue;
            }

            .adr-superseded > .panel-title > a {
                text-decoration: line-through;
            }

            .adr-icon {
                float: right;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>ADR Viewer - {{ config.project_title }}</h1>
        </header>
        <div class="panel-group">
            {% for adr_record in config.records %}
            <div class="panel panel-default">
                <div class="panel-heading adr-{{ adr_record.status }}">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" href="#collapse{{ adr_record.index }}">{{ adr_record.title }}</a>

                        {% if adr_record.status == "accepted" %}
                        <i class="adr-icon fas fa-fw fa-check"></i>
                        {% elif adr_record.status == "superseded" %}
                        <i class="adr-icon fas fa-fw fa-times"></i>
                        {% elif adr_record.status == "amended" %}
                        <i class="adr-icon fas fa-fw fa-arrow-down"></i>
                        {% elif adr_record.status == "pending" %}
                        <i class="adr-icon fas fa-fw fa-hourglass-half"></i>
                        {% else %}
                        <i class="adr-icon fas fa-fw fa-question"></i>
                        {% endif %}

                    </h4>
                </div>
                <div id="collapse{{ adr_record.index }}" class="panel-collapse collapse">
                    <div class="panel-body">{{ adr_record.body|safe }}</div>
                </div>
            </div>
            {% endfor %}
        </div>
        <footer>
            Generated with &lt;3 using ADR Viewer
        </footer>
        {% if config.include_mermaid %}
        <script type="application/javascript">
            window.addEventListener("load", function(){
                if (window.mermaid != undefined) {
                    mermaid.initialize({
                        startOnLoad: false,
                        securityLevel: 'loose',
                        logLevel: 'error',
                        wrap: true
                    });
                    {#
                        We have to hook into the Bootstrap events in the way the docs prescribe.
                        https://getbootstrap.com/docs/3.4/javascript/#collapse-events
                    #}
                    panels = document.querySelectorAll(".panel-collapse");
                    Array.from(panels).forEach(function(panel){
                        $(panel).on('show.bs.collapse', function(){
                            selector = "#" + panel.id + ' .language-mermaid';
                            mermaid.run({
                                querySelector: selector,
                            });
                        });
                    });
                }
            });
        </script>
        {% endif %}
    </body>
</html>
