{% import 'lib.html' as lib %}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>{{ exception_class }}: {{ error_message }} | Starception Debugger</title>
    <meta name="viewport" content="width=device-width">
    <style>
        {% include 'styles.css' %}
        {% include 'dark.css' %}
        {% include 'code_light.css' %}
        {% include 'code_dark.css' %}
    </style>
</head>
<body>
<header class="header">
    <div style="display: flex; align-items: start; justify-content: space-between">
        <div>
            <div>
                <strong class="exception-class">{{ exception_class }}</strong>
                at {{ request_method }} {{ request_path }}
            </div>
            <div class="exception text-red">{{ error_message|e }}</div>
        </div>
        <div class="flex-center">
            <div class="search-links">
                <a target="_blank" href="https://www.google.com/search?q={{ search_query }}">
                    {% include 'icon_google.svg' %}
                    <span>Google</span>
                </a>
                <a target="_blank" href="https://www.stackoverflow.com/search?q={{ search_query }}">
                    {% include 'icon_stackoverflow.svg' %}
                    <span>Stack Overflow</span>
                </a>
            </div>

            <!-- auto -> dark -> light -> auto -->
            <button data-theme-toggle>
                <div data-force-theme="light" title="Force light theme">
                    {% include 'icon_sun.svg' %}
                </div>
                <div data-force-theme="auto" class="flex-center" title="Use system theme">
                    {% include 'icon_sun_moon.svg' %}
                    <span>Auto</span>
                </div>
                <div data-force-theme="dark" title="Force dark theme">
                    {% include 'icon_moon.svg' %}
                </div>
            </button>
        </div>
    </div>
    {% if solution %}
        <div class="solution">Hint: {{ solution }}</div>
    {% endif %}
</header>
<main>
    <!-- exception block -->
    {% for stack_item in stack %}
        {% set stackloop = loop %}
        <div data-stack-root="{{ stackloop.loop0 }}">
            {% if loop.index0 > 0 %}
                <header class="section-header" data-trace-toggle>
                    Caused by
                    <div>
                        <div class="exception text-red">{{ stack_item.exc|e }}</div>
                    </div>
                </header>
            {% endif %}
            <div data-trace-target {% if loop.index0 > 0 %} class="collapsed"{% endif %}>
                {% if loop.index0 > 0 %}
                    {% if stack_item.solution %}
                        <div style="padding: 0 48px">
                            <div class="solution" style="margin-top: 8px">Hint: {{ stack_item.solution }}</div>
                        </div>
                    {% endif %}
                {% endif %}
                <section class="trace">
                    {% for frame in stack_item.frames|reverse %}
                        {% with frame=frame, is_current=loop.first %}
                            {% include 'code_snippet.html' %}
                        {% endwith %}
                    {% endfor %}

                    <div class="frames">
                        {% if stack_item.has_vendor_frames %}
                            <div style="margin-bottom: 10px">
                                <label class="checkbox">
                                    <input type="checkbox" data-vendor-frame-toggle checked> Hide vendor frames
                                </label>
                            </div>
                        {% endif %}
                        {% for frame in stack_item.frames|reverse %}
                            {% with frame=frame, is_current=loop.first %}
                                {% include 'frame_line.html' %}
                            {% endwith %}
                        {% endfor %}
                    </div>
                </section>
            </div>
        </div>
    {% endfor %}

    <!-- request information -->
    <section class="request-information">
        {{ lib.details_row('Request', request_info, true) }}
        {{ lib.details_row('Headers', request_headers) }}
        {{ lib.details_row('Session', session) }}
        {{ lib.details_row('Cookies', cookies) }}
        {{ lib.details_row('Request state', request_state) }}
        {{ lib.details_row('App state', app_state) }}
        {{ lib.details_row('Platform', platform) }}
        {{ lib.details_row('Environment', environment) }}
    </section>
</main>
<script>
    {% include 'scripts.js' %}
</script>
</body>
</html>
