{% extends 'grep/base.html' %}
{% load staticfiles grep_tags %}
{% block extrahead %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/grep/grep.css' %}" />

{% endblock %}
{% block content %}
    <div id="grep-view" >
        <div class="panel-group col-lg-2" role="tablist" aria-multiselectable="true">
            {% dates_item "heading-dates" "collapse-dates" "dates" "Dates" object.index_dates|slice:":-1" %}
            {% columns_item "heading-columns" "collapse-columns" "columns" "Columns" column_names %}
            {% if filters %}
                {% for filter in filters %}
                    {% filter_item filter.heading_id filter.collapse_id filter.field filter.title filter.items %}
                {% endfor %}
            {% endif %}
        </div>

        <div id="log-list" class="col-lg-10">
            <div class="panel panel-default">
                <form id="search-form">
                    <div class="panel-heading">
                        <div class="input-group">
                            <input type="text" class="form-control"
                                   name="search"
                                   id="search-text"
                                   placeholder="Search for...">
                            <span class="input-group-btn">
                                <input class="btn btn-primary" type="submit" value="grep" id="search-btn">
                                <input class="btn btn-default" type="button" value="context" id="context-btn">
                            </span>
                        </div>
                        <div class="btn-group" id="filter-toggles">
                        {% for c in columns %}
                            {% if not c.filtered %}
                                <button class="btn btn-xs btn-default filter-toggler" value="{{ c.name }}">{{ c.name }}</button>
                            {% endif %}
                        {% endfor %}
                        </div>
                    </div>
                </form>
            </div>
            <div class="panel-body" id="log-container">
            </div>
            <div class="progress" id="log-progress">
                <div class="progress-bar progress-bar-striped active"
                     role="progressbar"
                     aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"
                     style="width: 100%">
                    Loading
                </div>
            </div>
            <div class="progress" style="display:none" id="log-error">
                <a class="progress-bar progress-bar-danger"
                     role="progressbar"
                     aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"
                     style="width: 100%">
                    Backend error
                </a>
            </div>
        </div>
    </div>
    <div class="hidden">
        {% lineless %}<script id="log-template" type="text/template">
            <span title="<%= datetime %>" class="column column-ts"> <%= time %> </span>
            {% for c in columns %}
                {% if not c.context %}

                    {% if c.name == 'host' %}
                        <span data-field="host" data-value="<%- host %>" title="<%= host %>" class="column column-toggle column-host"
                                <% if (columns && !_.contains(columns, '{{ c.name }}')) { %> style="display: none;"<% } %>
                                > <%- shortHost %> </span>
                    {% else %}
                        <span data-field="{{ c.name }}" data-value="<%-{{ c.name }}%>"
                              title="{{ c.name }}" class="column column-toggle column-{{ c.name }}"
                                <% if (columns && !_.contains(columns, '{{ c.name }}')) { %> style="display: none;"<% } %>
                                > <%- {{ c.name }} %> </span>
                    {% endif %}
                {% endif %}
            {% endfor %}
            <span class="logline">
            <%= logline %></span>
            {% spaceless %}
            <span class="context-pills">
                {% for c in columns %}
                    {% if c.context %}
                        <% if({{ c.name }}) { %>
                        <a href="#{{ c.name }}" class="label context" data-context="{{ c.name }}">{{ c.name }}</a>
                        <% } %>
                    {% endif %}
                {% endfor %}
            </span>

            <div class="context-area">
                {% for c in columns %}
                    {% if c.context %}
                        <pre class="context" data-context="{{ c.name }}" id="{{ c.name }}"> <%- {{ c.name }} %> </pre>
                    {% endif %}
                {% endfor %}
            </div>
            {% endspaceless %}
    </script>{% endlineless %}</div>
{% endblock %}

{% block footer %}
    <script src="{% static 'js/grep/grep.js' %}"></script>
{% endblock %}