<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{{ exc_type }}: {{ exc }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
    :root {
        --primary: #64b65e;
        --warn: #ea596e;
        --gray: #f1f6f0;
        --gray-dark: #d5dbd2;
        --gray-darker: #bdc1bb;
        --text: #2e3d2b;
        --text-muted: #7f8284;
    }

    html {
        margin: 0;
        padding: 0;
    }

    body {
        font-family: "Menlo", "Courier", monospace;
        color: var(--text);
        padding: 0;
        margin: 2em;
        font-size: 0.75em;
    }

    .container {
        border: 1px solid var(--gray-darker);
        border-radius: 3px;
    }
    header, footer {
        padding: .5em 2em;
    }
    main {
        height: 100%;
        flex: 1;
    }
    footer {
        background: var(--gray);
        border-top: 1px solid var(--gray-darker);
    }

    .traceback {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .frame {
        background: var(--gray);
        padding: .8em 2em;
        border-top: 1px solid var(--gray-darker);
        line-height: 1.6em;
        color: var(--text-muted);
    }

    code {
        font-size: inherit;
        font-family: inherit;
        font-weight: bold;
        color: var(--primary);
    }

    pre {
        background: var(--gray-dark);
        color: var(--text);
        font-size: inherit;
        font-family: inherit;
        padding: .1em .5em;
        margin: .5em 0 .5em 2em;
    }

    .danger {
        color: var(--warn);
    }

    .muted {
        color: var(--text-muted);
    }

    a {
        display: block;
        color: inherit;
        text-decoration: none;
    }
    a::before {
        content: '▶ ';
    }
    a.toggled::before {
        content: '▼ ';
    }
    a:visited {
        color: inherit;
    }

    .locals {
        background: white;
        border-collapse: collapse;
        margin-top: .5em;
    }
    .locals th, .locals td {
        padding: .2em .5em;
    }
    .locals th {
        border-bottom: 1px solid var(--gray);
    }

    </style>
</head>
<body>
    <div class="container">
        <header class="error-container">
            <h1>
                <span class="danger">{{ exc_type }}</span>: {{ exc }}
                <span class="muted">(Most recent call last)</span>
            </h1>
        </header>

        <main>
            <ul class="traceback">
                {% for frame in frames %}
                <li class="frame">
                    File <code>{{ frame.filename }}</code>
                    line <strong>{{ frame.lineno }}</strong>
                    in <code>{{ frame.name }}</code>
                    <pre>{{ frame.line }}</pre>
                    <a href="#" id="{{ loop.index }}" class="untoggled" onclick="return toggleLocals(this)">Local variables</a>
                    <table class="locals" id="locals-{{ loop.index }}" hidden="true">
                        <thead>
                            <tr>
                                <th>Variable</th>
                                <th>Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for name, value in frame.locals.items() %}
                            <tr>
                                <td>{{ name }}</td>
                                <td>{{ value|escape }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </li>
                {% endfor %}
            </ul>
        </main>

        <footer>
            <p>
                <span class="danger">{{ exc_type }}</span>: {{ exc }}
            </p>
        </footer>
    </div>

    <p>
        You are seing this error because you have set <code>debug=True</code>.
        Change it to <code>False</code> and Bocadillo will display a standard
        page generated by the error handler for this exception instead.
    </p>

    <script type="text/javascript">
        function toggleLocals(anchor) {
            const locals = document.getElementById(`locals-${anchor.id}`);
            locals.hidden = !locals.hidden;
            anchor.classList.toggle("toggled");
            return false;  // prevent scrolling to top
        }
    </script>
</body>
</html>
