<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <style>
            ins {
                text-decoration: none;
                background-color: #27A844;
            }
            del {
                text-decoration: none;
                background-color: #DC3546;
            }
            pre {
                border: none;
                background-color: inherit;
                color: inherit;
            }
        </style>

        <title>This is style50.</title>
    </head>
    <body>
        <div class="container">
            <div class="row">

            <h1>style50</h1>
            <hr>
            {% for file in files %}
                <h3> {{ file.name }} </h3>
                <div style="background-color: black; color: white;">
                    {% if "error" in file %}
                        <pre style="color: yellow">{{file.error}}</pre>
                    {% elif file.score == 1.0 %}
                        <pre style="color: #32cf55">Looks good!</pre>
                        {% if file.comments %}
                        <pre style="color: yellow">But consider adding more comments!</pre>
                        {% endif %}
                    {% else %}
                        <pre>{{ file.diff|safe }}</pre>
                        {% if file.comments %}
                            <pre style="color: yellow">And consider adding more comments!</pre>
                        {% endif %}
                    {% endif %}
                </div>
            {% endfor %}
    </body>

</html>
