{% extends "index.html.twig" %}

{% block searchBtn %}{% endblock %}

{% block breadcrumb %}
    API Log {% if showDateHeader is defined %}- {{ showDateHeader }}{% endif %}
{% endblock %}

{% block sessiontimeout %}{% endblock %}

{% block body %}
    {#    <div class="dropdown"> #}
    {#        <button class="btn btn-secondary dropdown-toggle noload mb-3" type="button" id="dropdownLastDays" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> #}
    {#            Datum auswählen #}
    {#        </button> #}
    {#        <div class="dropdown-menu" aria-labelledby="dropdownLastDays"> #}
    {#            {% for day in lastDays %} #}
    {#                <a class="dropdown-item" href="{{ path('apilog', { 'date': loop.index - 1 }) }}">{{ day }}</a> #}
    {#            {% endfor %} #}
    {#        </div> #}
    {#    </div> #}
    <a class="btn btn-sm btn-success text-white scrolltop"
       style="position: fixed;right:24px;bottom:85px;cursor:pointer;">
        <i class="fas fa-caret-up"></i>
    </a>
    <a class="btn btn-sm btn-success text-white scrolldown"
       style="position: fixed;right:24px;bottom:56px;cursor:pointer;">
        <i class="fas fa-caret-down"></i>
    </a>
    <div class="input-group mb-3">
        <span class="input-group-text" id="basic-addon1">Datum auswählen</span>
        <input type="text" class="form-control" id="datefilter" name="datefilter" value=""/>
        {% if type=='log' %}
            <a href="{{ path('apilog', { 'type': 'raw' }) }}" class="btn btn-primary">Raw Daten anzeigen</a>
        {% else %}
            <a href="{{ path('apilog', { 'type': 'log' }) }}" class="btn btn-primary">Log Daten anzeigen</a>
        {% endif %}
    </div>
    <table class="table">
        <tbody>
        {% for line in lines %}
            <tr>
                <td>
                    {{ line }}
                </td>
            </tr>
        {% else %}
            <tr>
                <td>Die Log-Datei ist leer</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endblock %}


{% block javascripts %}
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
    <script>
      $(function () {
        $('.scrolltop').on('click', function () {
          $('.main').animate({ scrollTop: 0 }, 500);
        });
        $('.scrolldown').on('click', function () {
          console.log($('.main').height());
          $('.main').animate({ scrollTop: $('table').height() }, 500);
        });
        $('#datefilter').daterangepicker({
          'singleDatePicker': true,
          'autoApply': true,
          'locale': {
            'format': 'DD.MM.YYYY',
            'separator': ' - ',
            'applyLabel': 'Apply',
            'cancelLabel': 'Cancel',
            'fromLabel': 'Von',
            'toLabel': 'Bis',
            'customRangeLabel': 'Custom',
            'weekLabel': 'W',
            'daysOfWeek': [
              'So',
              'Mo',
              'Di',
              'Mi',
              'Do',
              'Fr',
              'Sa'
            ],
            'monthNames': [
              'Januar',
              'Februar',
              'März',
              'April',
              'Mai',
              'Juni',
              'Juli',
              'August',
              'September',
              'Oktober',
              'November',
              'Dezember'
            ],
            'firstDay': 1
          },
          'startDate': '{% if date %}{{ date }}{% else %}{{ today }}{% endif %}',
          'minDate': "{{ lastDays }}",
          'maxDate': "{{ today }}"
        }, function (start, end, label) {
          window.location = 'apilog?type={{ type }}&date=' + start.format('DD.MM.YYYY');
        });
      });
    </script>
{% endblock %}