{% extends 'base.html' %}


{% block title %}
    {% if title %}
        {{ title }} - IOT Database!
    {% else %}
        LoRaWAN Devices Database
    {% endif %}
{% endblock %}

{% block content %}
<div class="col-md-offset-3 col-md-6">
    <h2>Data from device: {{ device.device_name }} # "{{ device.device_EUI }}"</h2>
    <br>

<table class="table table-striped">
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">Data</th>
          <th scope="col">Received</th>
        </tr>
      </thead>
      <tbody>
      {% for data in dates.items %}
        <tr>
          <th scope="row">{{ data.id }}</th>
          <td>{{ data.data }}</td>
          <td>{{ data.timestamp }}</td>
        </tr>
        {% endfor %}
      </tbody>
</table>
<!-- Pagination Links-->
<div class="text-center">
    <a href="{{ url_for('service.device_data', device_eui=device.device_EUI, page=dates.prev_num) }}"
       class="btn btn-default
       {% if dates.page == 1 %}disabled{% endif %}">
        &laquo;
    </a>
<!-- Loop through the number of pages to display a link for each-->
    {% for page_num in dates.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
{% if page_num %}
<!-- Check for the active page and set the link to "Active"-->
            {% if dates.page == page_num %}
            <a href="{{ url_for('service.device_data', device_eui=device.device_EUI, page=page_num) }}"
               class="btn btn-primary">
                {{ page_num }}
            </a>
            {% else %}
            <a href="{{ url_for('service.device_data', device_eui=device.device_EUI, page=page_num) }}"
               class="btn btn-primary">
                {{ page_num }}
            </a>
            {% endif %}
        {% else %}
            ...
        {% endif %}
    {% endfor %}
    <a href="{{ url_for('service.device_data', device_eui=device.device_EUI, page=dates.next_num) }}"
       class="btn btn-default
       {% if dates.page == dates.pages %}disabled{% endif %}">
        &raquo;
    </a>
</div>
<p class="text-center mt-3">
   Showing page {{ dates.page }} of {{ dates.pages }}
</p>
</div>
{% endblock %}
