<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <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-superceded {
                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-superceded > .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 == "superceded" %}
                        <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 <3 using ADR Viewer
        </footer>
    </body>
</html>