{% extends "app_home/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/_sidebar.html' %}
{% endblock %}

{% block title %}
<h2>{% translate 'SMS Journal' %}</h2>
<small class="text-muted">{{ count }} {% translate "entries" %}</small>
<hr>{% endblock %}


{% block content %}

{% if bigset %}
<div class="btn-group">

    <div>
    <a class="btn btn-outline-dark" onclick="history.back()" role="button">
    <i class="fa fa-backward" aria-hidden="true"></i>&nbsp; {% translate 'Back' %}</a>
    </div>

    <div class="vr mx-3"></div>

    <div>
    <form class="d-flex" role="search" action="" method="post">{% csrf_token %}
    <button class="btn btn-success" type="submit"><i class="fa fa-search"></i></button> &nbsp;&nbsp;
    <input class="form-control" type="search" name="query" placeholder="{% translate 'Filter by sender' %}" value="{{ query }}">
    </form>
    </div>

    &nbsp;&nbsp;&nbsp;

    {% if page_last > 1 %}
    <div class="my-2">{% translate 'Page' %}</div>
    <div class="mx-3">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="?page={{ page_prev }}&size={{ size }}">&laquo;</a></li>
      <li class="page-item"><a class="page-link {% if page_first %}active{% endif %}" href="?page=1&size={{ size }}">1</a></li>
      &nbsp;&nbsp;&nbsp;
      {% if page_current %}
      <li class="page-item"><a class="page-link active" href="?page={{ page }}&size={{ size }}">{{ page }}</a></li>
      {% else %}
      <li class="page-item"><a class="page-link disabled">...</a></li>
      {% endif %}
      &nbsp;&nbsp;&nbsp;
      <li class="page-item"><a class="page-link {% if page_last_active %}active{% endif %}" href="?page={{ page_last }}&size={{ size }}">{{ page_last }}</a></li>
      <li class="page-item"><a class="page-link" href="?page={{ page_next }}&size={{ size }}">&raquo;</a></li>
    </ul>
    </div>
    {% endif %}

    <div>
      <a class="btn btn-outline-primary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
      {{ size }} {% translate 'per page' %}</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="{% url 'app_sirene:sms_journal' %}?size=10">10</a>
        <a class="dropdown-item" href="{% url 'app_sirene:sms_journal' %}?size=50">50</a>
        <a class="dropdown-item" href="{% url 'app_sirene:sms_journal' %}?size=100">100</a>
        <a class="dropdown-item" href="{% url 'app_sirene:sms_journal' %}?size=500">500</a>
        <a class="dropdown-item" href="{% url 'app_sirene:sms_journal' %}?size=1000">1000</a>
        <a class="dropdown-item" href="{% url 'app_sirene:sms_journal' %}?size=5000">5000</a>
      </div>
    </div>

</div>
{% endif %}

<hr>

<table class="table table-striped table-hover small">
<thead class="thead-dark"><tr>
<th>ID</th>
<th>{% translate 'Date' %}</th>
<th>{% translate 'Sender' %}</th>
<th>{% translate 'Sender Quota' %}</th>
<th>{% translate 'Dest Mobile' %}</th>
<th>{% translate 'Message' %}</th>
</tr></thead>

{% for entry in journal %}
<tr>
<td class="py-1 text-left">{{ entry.id }}</td>
<td class="py-1 px-1 mx-0">{{ entry.created_at|date:'Y-m-d H:i:s (D)' }}</td>
<td class="py-1 text-left">{{ entry.created_by }}</td>
<td class="py-1 text-left">{{ entry.quota }}</td>
<td class="py-1 text-left">{{ entry.mobile }}</td>
<td class="py-1 text-left"><i>... encrypted ...</i></td>
</tr>
{% endfor %}
</table>

{% endblock %}