{% extends "sentry/bases/stream.html" %}

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

{% block sidebar %}
    <div id="chart" class="chart" data-api-url="{% url 'sentry-api-chart' project.team.slug %}" data-days="1">
        <div class="sparkline">
            <noscript>{% trans "Get yourself some JavaScripts dood" %}</noscript>
            <span class="loading">{% trans "Loading historical data..." %}</span>
        </div>
    </div>

    <form method="get">
        {% if request.user.is_authenticated %}
            {% querystring from request without bookmarks as bookmark_querystring %}
            <h6>{% trans "Bookmarks" %}</h6>
            <div class="filter">
                <ul class="nav nav-tabs nav-stacked filter-list">
                    <li{% if not request.GET.bookmarks %} class="active"{% endif %}><a href="?{{ bookmark_querystring }}">{% trans "All Events" %}</a></li>
                    <li{% if request.GET.bookmarks %} class="active"{% endif %}><a href="?{{ bookmark_querystring }}&amp;bookmarks=1">{% trans "Only Bookmarks" %}</a></li>
                </ul>
            </div>
        {% endif %}

        {% for filter in filters %}
            {% if filter.show_label %}
                <h6>{% trans filter.label %}</h6>
            {% endif %}
            <div class="filter">
                {{ filter.render }}
            </div>
        {% endfor %}
    </form>
{% endblock %}

{% block main %}
    {% paginator event_list from request as event_list per_page EVENTS_PER_PAGE %}
    {% querystring from request without sort as sort_querystring %}
    {% querystring from request without since as since_querystring %}

    <div class="btn-toolbar">
        <div class="btn-group">
            <a class="btn" href="javascript:void(0)" id="sentry-resolve-feed" onclick="Sentry.stream.clear('{{ project.slug }}');"><i aria-hidden="true" class="icon-checkmark"></i> {% trans "Resolve Feed" %}</a>
        </div>
        <div class="btn-group">
            <a class="btn realtime-play" data-action="pause" data-pause-label="{% trans "Pause Updates" %}" data-play-label="{% trans "Enable Updates" %}" href="javascript:void(0)">
                {% trans "Pause Updates" %}
            </a>
        </div>
        <div class="btn-group">
            <a href="#" class="btn dropdown-toggle" data-toggle="dropdown">{% blocktrans with sort_label as label %}Sort by: {{ label }}{% endblocktrans %} <i aria-hidden="true" class="icon-arrow-down"></i></a>
            <ul class="dropdown-menu">
                <li{% ifequal sort 'priority' %} class="active"{% endifequal %}><a href="?{{ sort_querystring }}&amp;sort=priority">{{ SORT_OPTIONS.priority }}</a></li>
                <li{% ifequal sort 'date' %} class="active"{% endifequal %}><a href="?{{ sort_querystring }}&amp;sort=date">{{ SORT_OPTIONS.date }}</a></li>
                <li{% ifequal sort 'new' %} class="active"{% endifequal %}><a href="?{{ sort_querystring }}&amp;sort=new">{{ SORT_OPTIONS.new }}</a></li>
                <li{% ifequal sort 'freq' %} class="active"{% endifequal %}><a href="?{{ sort_querystring }}&amp;sort=freq">{{ SORT_OPTIONS.freq }}</a></li>
                <li class="divider"></li>
                <li{% ifequal sort 'tottime' %} class="active"{% endifequal %}><a href="?{{ sort_querystring }}&amp;sort=tottime">{{ SORT_OPTIONS.tottime }}</a></li>
                <li{% ifequal sort 'avgtime' %} class="active"{% endifequal %}><a href="?{{ sort_querystring }}&amp;sort=avgtime">{{ SORT_OPTIONS.avgtime }}</a></li>
                {% if HAS_TRENDING %}
                    <li class="divider"></li>
                    <li{% ifequal sort 'accel_15' %} class="active"{% endifequal %}><a href="?{{ sort_querystring }}&amp;sort=accel_15">{{ SORT_OPTIONS.accel_15 }}</a></li>
                    <li{% ifequal sort 'accel_60' %} class="active"{% endifequal %}><a href="?{{ sort_querystring }}&amp;sort=accel_60">{{ SORT_OPTIONS.accel_60 }}</a></li>
                {% endif %}
            </ul>
        </div>
        <div class="btn-group">
            <a href="#" class="btn dropdown-toggle" onclick="$('#daterange').toggle(); return false;">
                {% if from_date %}
                    {% if not to_date %}
                        Since: {{ from_date|date:"M jS" }}
                    {% else %}
                        Between: {{ from_date|date:"M jS" }} <small>and</small> {{ to_date|date:"M jS" }}
                    {% endif %}
                {% else %}
                    {% if to_date %}
                        Before: {{ to_date|date:"M jS" }}
                    {% else %}
                        Between: The Past <small>and</small> The Present
                    {% endif %}
                {% endif %}
             <i aria-hidden="true" class="icon-arrow-down"></i></a>
        </div>
        <div class="btn-group pull-right">
            <a class="btn prev{% if not event_list.paginator.has_previous %} disabled{% endif %}" href="?{{ event_list.query_string|escape }}&amp;p={{ event_list.paginator.previous_page }}"><span>{% trans "Previous" %}</span></a>
            <a class="btn next{% if not event_list.paginator.has_next %} disabled{% endif %}" href="?{{ event_list.query_string|escape }}&amp;p={{ event_list.paginator.next_page }}"><span>{% trans "Next" %}</span></a>
        </div>
    </div>

    <div class="datepicker-box" id="daterange">
        <form method="GET">
            {% for key, value in request.GET.iteritems %}
                {% if key != df and key != tf and key != dt and key != tt and key != page %}
                    <input type="hidden" name="{{ key }}" value="{{ value }}">
                {% endif %}
            {% endfor %}
            <div class="input">
              <div class="inline-inputs">
                <input data-toggle="datepicker" data-date-format="yyyy-mm-dd"name="df" class="date" type="text" value="{% if from_date %}{{ from_date|date:"Y-m-d" }}{% endif %}" />
                <input class="time" type="text" name="tf" value="{% if from_date %}{{ from_date|time:"h:i A" }}{% endif %}" />
                to
                <input data-toggle="datepicker" data-date-format="yyyy-mm-dd" name="dt" class="date" type="text" value="{% if to_date %}{{ to_date|date:"Y-m-d" }}{% endif %}" />
                <input class="time" type="text" name="tt" value="{% if to_date %}{{ to_date|time:"h:i A" }}{% endif %}" />
              </div>
              <div class="help-block">{% trans "All events are represented in UTC time." %}</div>
            </div>
            <div class="submit">
                <div class="pull-right">
                    <input type="button" class="btn btn-small" value="{% trans "Clear" %}" onclick="$('#daterange input[type=text]').val(''); this.form.submit();">
                    <input type="submit" class="btn btn-primary btn-small" value="{% trans "Apply" %}">
                </div>
                <div class="radio-inputs">
                    <label class="radio">
                        <input type="radio" name="date_type" value="last_seen" {% if date_type != 'first_seen' %}checked{% endif %}> {% trans "Last Seen" %}
                    </label>
                    <label class="radio">
                        <input type="radio" name="date_type" value="first_seen" {% if date_type == 'first_seen' %}checked{% endif %}> {% trans "First Seen" %}
                    </label>
                </div>
            </div>
        </form>
    </div>

    {% recent_alerts from project as recent_alerts %}
    {% if recent_alerts %}
        <ul class="active-alerts">
            {% for alert in recent_alerts %}
                <li class="alert alert-error">
                    <a class="close" data-dismiss="alert">×</a>
                    <a href="{% url 'sentry-alert-details' project.team.slug project.slug alert.id %}">{{ alert.message }}</a>
                    <small>&mdash; {{ alert.datetime|timesince }}</small>
                </li>
            {% endfor %}
        </ul>
    {% endif %}

    <div id="event_list"></div>

    <div class="btn-toolbar" style="border-bottom: none">
        <div class="btn-group pull-right">
            <a class="btn prev{% if not event_list.paginator.has_previous %} disabled{% endif %}" href="?{{ event_list.query_string|escape }}&amp;p={{ event_list.paginator.previous_page }}"><span>{% trans "Previous" %}</span></a>
            <a class="btn next{% if not event_list.paginator.has_next %} disabled{% endif %}" href="?{{ event_list.query_string|escape }}&amp;p={{ event_list.paginator.next_page }}"><span>{% trans "Next" %}</span></a>
        </div>
    </div>

    <script>
    $(function(){
        new app.StreamPage({
            groups: {{ event_list.paginator.objects|to_json:request|safe }},
            canStream: {{ has_realtime|to_json|safe }},
            realtime: true
        });
    });
    </script>

{% endblock %}
