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

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

{% block sidebar %}
    <div id="chart" class="chart" data-api-url="{% url 'sentry-api-0-project-stats' project.id %}" 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 project|get_filters:request %}
            {% if filter.show_label %}
                <h6>{% trans filter.label %}</h6>
            {% endif %}
            <div class="filter">
                {{ filter.render }}
            </div>
        {% endfor %}
    </form>
{% endblock %}

{% block main %}
    {% 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 All Events" %}</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>
            </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">
            {% if prev_cursor %}
                <a class="btn prev" href="?{{ cursorless_query_string|escape }}&amp;cursor={{ prev_cursor }}"><span>{% trans "Previous" %}</span></a>
            {% else %}
                <a class="btn prev disabled"><span>{% trans "Previous" %}</span></a>
            {% endif %}
            {% if next_cursor %}
                <a class="btn next" href="?{{ cursorless_query_string|escape }}&amp;cursor={{ next_cursor }}"><span>{% trans "Next" %}</span></a>
            {% else %}
                <a class="btn next disabled"><span>{% trans "Next" %}</span></a>
            {% endif %}
        </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.organization.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">
            {% if prev_cursor %}
                <a class="btn prev" href="?{{ cursorless_query_string|escape }}&amp;cursor={{ prev_cursor }}"><span>{% trans "Previous" %}</span></a>
            {% else %}
                <a class="btn prev disabled"><span>{% trans "Previous" %}</span></a>
            {% endif %}
            {% if next_cursor %}
                <a class="btn next" href="?{{ cursorless_query_string|escape }}&amp;cursor={{ next_cursor }}"><span>{% trans "Next" %}</span></a>
            {% else %}
                <a class="btn next disabled"><span>{% trans "Next" %}</span></a>
            {% endif %}
        </div>
    </div>

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

    });
    </script>
{% endblock %}

{% block content_after %}
  <script type="text/template" id="empty_message">
    <div class="empty-message">
      <h2>No events to show.</h2>
      <p>We'll notify you if that changes. In the meantime why not take a moment to become more familiar with Sentry.</p>
      <p class="links">
        <a href="{% url 'sentry-help-platform-list' %}?pid={{ project.id }}">Installation instructions</a>
        <a href="{% url 'sentry-manage-project' organization.slug project.slug %}">Project settings</a>
      </p>
    </div>
  </script>

  {% if request.GET.newinstall %}
  {% get_project_dsn for request.user from project as project_dsn %}
  <div class="modal welcome-message-modal" role="modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="welcome-message">
          <div class="actions pull-right">
            <button type="button" class="btn btn-primary"
            data-dismiss="modal">Got it!</button>
          </div>
          <h2>Welcome to your new project</h2>
          <div class="container">
            <div class="row-fluid">
              <div class="span4">
                <p>New here?</p>
                <ul>
                  <li><a href="{% url 'sentry-help-platform-list' %}?pid={{ project.id }}">Installation instructions</a></li>
                  <li><a href="{% url 'sentry-manage-project' organization.slug project.slug %}">Project settings</a></li>
                </ul>
              </div>
              <div class="span8">
                <p>Done this before? Here's your DSN:</p>
                <pre class="clippy">{{ project_dsn }}</pre>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
  $('.welcome-message-modal').modal({show: true, backdrop: true});
  </script>
  {% endif %}
{% endblock %}
