{% extends "template.html" %}
{% load i18n %}
{% block extra_meta %}
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/colors.css' %}" type="text/css"/>
<script type="text/javascript" src="{% static 'js/d3.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/dagre-d3.min.js' %}"></script>
{% endblock %}


{% block main_content %}
<div class="container">
    <div id="query_tools" class="row">
        {% include "progressbar.html" %}
    </div>
</div>
<div class="container-full">
    <div class="row row-nav-tools" id="row_nav_tools_top">
        <div class="col-lg-12" id="nav_tools">
            <nav>
                <ul class="pagination pagination-sm">
                    {% if prevpages %}
                    <li class="disabled"><a href="#">...</a></li>
                    {% endif %}
                    {% if prevpage != None %}
                    <li><a href="{% url 'results' prevpage %}">{{ prevpage }}</a></li>
                    {% endif %}
                    <li class="active"><a href="#">{{ curpage }}</a></li>
                    {% if nextpage %}
                    <li><a href="{% url 'results' nextpage %}">{{ nextpage }}</a></li>
                    {% endif %}
                    {% if nextpages %}
                    <li class="disabled"><a href="#">...</a></li>
                    {% endif %}
                </ul>
            </nav>
            <p id="result_color_legend"></p>
        </div>
    </div>
    <div class="row" id="results_type_selection_row">
        <div class="col-md-12">
            <div class="btn-group btn-group-justified" role="group" aria-label="{% trans 'Sposób prezentacji wyników' %}">
                <div class="btn-group" role="group">
                    <button class="btn btn-primary btn_res_type" id="btn_res_k">{% trans "KWIC" %}</button>
                </div>
                <div class="btn-group" role="group">
                    <button class="btn btn-default btn_res_type" id="btn_res_g">{% trans "Grafy" %}</button>
                </div>
                <div class="btn-group" role="group">
                    <button class="btn btn-default btn_res_type" id="btn_res_t">{% trans "Tekst" %}</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-full" id="results_container">
    <div class="row" id="results_row_compact">
        <div class="col-lg-12">
            <div>
                <table class="table table-striped table-condensed table-nonfluid table-bordered" id="compact-table">
                    <thead></thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="row" id="results_row_text">
        <div class="col-lg-12" id="results_text"></div>
    </div>
    <div class="row" id="results_row_kwic">
        <div class="col-lg-12" id="results_kwic">
            <p>
                <button id="download_csv_start" type="button" class="btn btn-primary download-csv" disabled="disabled"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> {% trans 'Pobierz jako plik CSV' %}</button>
                <button id="download_csv_pause" type="button" class="btn btn-danger download-csv"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> {% trans 'Zatrzymaj pobieranie pliku CSV' %}</button>
            </p>
            <div class="progress">
                <div class="progress-bar progress-bar-striped" id="csv_progress" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 0%">
                    0%
                </div>
            </div>
        </div>
    </div>
    <div class="row" id="results_row_graph">
        <div class="col-lg-12" id="results_graph_filter">
            {% load crispy_forms_tags %}
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="filter-heading">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-target="#filter-inputs" aria-expanded="false" aria-controls="filter-inputs">
                            <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span>
                            <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                            {% trans "Filtrowanie elementów grafu" %}
                        </a>
                    </h4>
                </div>
                <div id="filter-inputs" class="panel-collapse collapse" aria-labelledby="pael-title">
                    <div class="panel-body">
                        {% crispy filter_form %}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12" id="results_graph">
            <ul id="results_graph_list" class="list-unstyled">

            </ul>
        </div>
    </div>
    <div class="row" id="results_row_loading">
        <div class="col-lg-12" id="results_loading">
            <h4 class="text-center">{% trans "Pobieranie wyników wyszukiwania..." %}</h4>
            <p class="text-center"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate gi-3x text-primary"></span></p>
        </div>
    </div>
    <div class="row row-nav-tools" id="row_nav_tools_bottom">
        <div class="col-lg-12">
            <nav>
                <ul class="pagination pagination-sm">
                    {% if prevpages %}
                    <li class="disabled"><a href="#">...</a></li>
                    {% endif %}
                    {% if prevpage != None %}
                    <li><a href="{% url 'results' prevpage %}">{{ prevpage }}</a></li>
                    {% endif %}
                    <li class="active"><a href="#">{{ curpage }}</a></li>
                    {% if nextpage %}
                    <li><a href="{% url 'results' nextpage %}">{{ nextpage }}</a></li>
                    {% endif %}
                    {% if nextpages %}
                    <li class="disabled"><a href="#">...</a></li>
                    {% endif %}
                </ul>
            </nav>
        </div>
    </div>
</div>
<div class="cover"><div class="cover-gradient"></div><div class="cover-full"></div></div>
{% endblock %}

{% block alerts %}
{{ block.super }}
{% if q_error_desc.0.msg or q_error_desc.0.details %}
{% include "error_box.html" %}
{% endif %}
{% if info_message %}
{% load alert %}
{% alert 'danger' info_message %}
{% endif %}
{% endblock %}

{% block scripts %}
{{ block.super }}

<script type="text/javascript">
            {% include "js/result_vars.js" %}
</script>

<script type='text/javascript' src="{% static 'js/Blob.js' %}"></script>
<script type='text/javascript' src="{% static 'js/FileSaver.min.js' %}"></script>

<script type='text/javascript' src="{% static 'js/result.js' %}"></script>
<script type='text/javascript' src="{% static 'js/results-query.js' %}"></script>

{% endblock %}