{% load i18n %}
{% load sentry_helpers %}

<div class="module">
    <div class="page-header">
        <a href="javascript:void(0)" data-container="#raw_stacktrace" data-title="Stacktrace" class="popup btn small pull-right">{% trans "Raw" %}</a>
        {% if system_frames %}
            <form class="pull-right" style="margin:8px 20px 0 0;">
                <label class="checkbox"><input type="checkbox" id="show_hidden_frames"> Show {{ system_frames }} hidden frames</label>
            </form>
        {% endif %}
        <h2>
            {% trans "Stacktrace" %}
            <small>{% if newest_first %}
                ({% trans "most recent call first" %})
            {% else %}
                ({% trans "most recent call last" %})
            {% endif %}</small>
        </h2>
    </div>
    <div class="module-content">
        <ul class="traceback">
            {% for frame in frames %}
                <li class="frame{% if not frame.in_app %} system-frame{% endif %} frame-{{ forloop.counter0 }}">
                    <p>
                        <code>{{ frame.filename }}</code>
                        {% if frame.function %} in <code>{{ frame.function }}</code>{% endif %}
                        {% if not frame.context and frame.lineno %} at line <code>{{ frame.lineno }}</code>{% endif %}
                        {% if frame.in_app %}
                            (application)
                        {% endif %}
                    </p>

                    {% if frame.context or frame.vars %}
                        <div class="commands">
                            <a href="javascript:void(0)" onclick="$('.frame-{{ forloop.counter0 }}').toggleClass('expanded')" title="{% trans "Toggle Context" %}" rel="tooltip" class="tip">{% if frame.vars %}<i class="icon-info-sign"></i> {% endif %}{% if frame.context %}<i class="icon-tasks"></i> {% endif %}</a>
                        </div>
                    {% endif %}

                    {% if frame.context %}
                        <ol start="{{ frame.start_lineno }}" class="context">
                        {% for num, line in frame.context %}
                            <li{% if num == frame.lineno %} class="active"{% else %} class="expandable"{% endif %} onclick="$('.frame-{{ forloop.parentloop.counter0 }}').toggleClass('expanded')"><pre>{{ line|default_if_none:"<i>No line</i>" }}</pre></li>
                        {% endfor %}
                        </ol>
                    {% endif %}

                    {% if frame.vars %}
                        {% if frame.vars|is_dict %}
                            <table class="table vars stack{{ forloop.counter0 }} expandable">
                                <colgroup>
                                    <col style="width:100px;">
                                </colgroup>
                                <tbody>
                                    {% for key, value in frame.vars.iteritems|as_sorted %}
                                        <tr>
                                            <th>{{ key }}</th>
                                            <td class="code"><pre>{{ value|pprint }}</pre></td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        {% else %}
                            <div id="v{{ forloop.counter0 }}" style="display:none;">
                                <pre>{{ frame.vars|pprint }}</pre>
                            </div>
                        {% endif %}
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    </div>
</div>

<div id="raw_stacktrace" style="display: none;">
    <pre>{{ stacktrace }}</pre>
</div>

{% if system_frames %}
    <script type="text/javascript">
    $('#show_hidden_frames').change(function(e){
        var $el = $(e.target);
        if ($el.is(':checked')) {
            $('.traceback li.system-frame').show();
        } else {
            $('.traceback li.system-frame').hide();
        }
    }).change();
    </script>
{% endif %}