<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>PyTA Error Report</title>
        <style rel="stylesheet">
            {% include "stylesheet.css" %}
        </style>
    </head>
    <body>
        <header>
            <h1 class="title">PyTA Error Report</h1>
            <time>{{ date_time }}</time>
        </header>
        <main>
            {% for file in reporter.messages_by_file %}
            <section>
                <article class="file-name">
                    <h2> {{ file.filename }} </h2>
                </article>
                <article class="error-output code-errors">
                    <h3 class="category-heading">
                        <span>{{ reporter.code_err_title }}</span>
                        <span class="slider">
                            <button>Expand/Collapse Section</button>
                        </span>
                    </h3>
                    <div class="content collapsible">
                        {% for message_id in file.code %}
                        <div class="error-instance">
                            <div class="info">
                                <span class="error-link code-error-id">
                                    <a href="http://www.cs.toronto.edu/~david/pyta/&#35;{{message_id}}" target="_blank">&#10064; {{ message_id }} ({{ file.code[message_id].messages[0].symbol }})</a>
                                </span>
                                <span class="occurrences">
                                {{ file.code[message_id].occurrences }}
                                {% if file.code[message_id].occurrences == 1 %}
                                 occurrence.
                                {% else %}
                                 occurrences.
                                {% endif %}
                                </span>
                                <span class="shown">
                                {% if file.code[message_id].shown != file.code[message_id].occurrences %}
                                 (First {{ file.code[message_id].shown }} shown).
                                {% endif %}
                                </span>
                                <span class="slider">
                                    <button> Expand/Collapse </button>
                                </span>
                            </div>
                            <div class="message-container collapsible">
                                {% for indiv in file.code[message_id].messages %}
                                <div class="message">
                                    <h4 class="message-name">
                                        [Line {{ indiv.line }}] {{ indiv.msg }}
                                        <span class="slider">
                                            <button style="float: right; background: #458B00;"> Expand/Collapse </button>
                                        </span>
                                    </h4>
                                    {% if indiv.snippet != '' %}
                                    <div class="collapsible">
                                      <code>{{ indiv.snippet }}</code>
                                    </div>
                                    {% else %}
                                    <span class="empty-placeholder">{{ reporter.no_snippet }}</span>
                                    {% endif %}
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% else %}
                        <span class="empty-placeholder">{{ reporter.no_err_message }}</span>
                        {% endfor %}
                    </div>
                </article>
                <article class="error-output style-errors">
                    <h3 class="category-heading">
                        <span>{{ reporter.style_err_title }}</span>
                        <span class="slider">
                            <button>Expand/Collapse Section</button>
                        </span>
                    </h3>
                    <div class="content collapsible">
                        {% for message_id in file.style %}
                        <div class="error-instance">

                            <div class="info">
                                <span class="error-link style-error-id">
                                    <a href="http://www.cs.toronto.edu/~david/pyta/&#35;{{message_id}}" target="_blank">&#10064; {{ message_id }} ({{ file.style[message_id].messages[0].symbol }})</a>
                                </span>
                                <span class="occurrences">
                                {{ file.style[message_id].occurrences }}
                                {% if file.style[message_id].occurrences == 1 %}
                                 occurrence.
                                {% else %}
                                 occurrences.
                                {% endif %}
                                </span>
                                <span class="shown">
                                {% if file.style[message_id].shown != file.style[message_id].occurrences %}
                                 (First {{ file.style[message_id].shown }} shown).
                                {% endif %}
                                </span>
                                <span class="slider">
                                   <button> Expand/Collapse </button>
                                </span>
                            </div>

                            <div class="message-container collapsible">
                                {% for indiv in file.style[message_id].messages %}
                                <div class="message">
                                    <h4 class="message-name">
                                        [Line {{ indiv.line }}] {{ indiv.msg }}
                                        <span class="slider">
                                            <button style="float: right; background: #458B00;"> Expand/Collapse </button>
                                        </span>
                                    </h4>
                                    <div class="collapsible">
                                      {% if indiv.snippet != '' %}
                                      <code>{{ indiv.snippet }}</code>
                                      {% else %}
                                      <span class="empty-placeholder">{{ reporter.no_snippet }}</span>
                                      {% endif %}
                                    </div>
                                </div>
                                {% endfor %}
                            </div>

                        </div>
                        {% else %}
                        <span class="empty-placeholder">{{ reporter.no_err_message }}</span>
                        {% endfor %}
                    </div>
                </article>
            </section>
            {% endfor %}
        </main>
        <footer>
            <div id="report-bug">
                <a href="mailto:david@cs.toronto.edu">Found a bug? Report it to Prof. Liu!</a>
            </div>
            <div id="logo">
                <a href="http://www.cs.toronto.edu/~david/pyta/" target="_blank">
                <img src="http://www.cs.toronto.edu/~david/pyta/images/pyta_logo.svg" alt="PyTA logo" height="50"/>
                </a>
            </div>
        </footer>
        <script type="text/javascript">
            {% include "jquery-3.2.1.min.js" %}
            {% include "script.js" %}
        </script>
    </body>
</html>
