{% extends "base.html" %}

{% block menu %}
{% endblock %}

{% block content %}
<br>
<img alt="VVF" src="./resources/images/owner.png" width="150"
  style="display: block; margin-left: auto; margin-right: auto;">
<br>
<br>
<div style="display: none" id="list" class="table-responsive">
  <table id="table" class="table table-striped table-bordered dt-responsive nowrap">
    <thead>
      <tr>
        <th>{{ 'Name'|t }}</th>
        <th>{{ 'Available'|t }}</th>
        {% if user.full_viewer %}
        <th>{{ 'Driver'|t }}</th>
        <th>{{ 'Call'|t }}</th>
        <th>{{ 'Write'|t }}</th>
        <th>{{ 'Services'|t }}</th>
        <th>{{ 'Availability Minutes'|t }}</th>
        {# <th>{{ 'Other'|t }}</th> TODO: fix "Other" page #}
        {% endif %}
      </tr>
    </thead>
    <tbody id="table_body">
    </tbody>
  </table>
</div>

<br><br>

<div class="d-flex justify-content-center">
  <button style="display: none; margin-left: 5%;" id="delete_cache_btn" type="button" class="btn btn-danger">{{ 'Delete the offline version of Allerta-VVF from this device.'|t }}</button>
</div>
<div class="d-flex justify-content-center">
  <div style="display: none" id="cache_empty_msg" class="alert alert-danger" role="alert">
    <p>{{ 'You have cleared the cache; the table will be loaded when the device is connected to the Internet.'|t }}</p>
  </div>
</div>

<script>
allertaJS.main.loadTable({tablePage: "list", useCustomTableEngine: "default", callback: () => {
  console.log("Callback executed");
  document.querySelector("#list").style.display = 'block';
  document.querySelector("#delete_cache_btn").style.display = 'block';
  document.querySelector("#cache_empty_msg").style.display = 'none';
  allertaJS.main.loadListListCallback();
}});
document.addEventListener("DOMContentLoaded", async () => {
  if(await caches.has("tables-1")){
    document.querySelector("#list").style.display = 'block';
    document.querySelector("#delete_cache_btn").style.display = 'block';
  } else {
    document.querySelector("#cache_empty_msg").style.display = 'block';
  }
});

document.querySelector("#delete_cache_btn").addEventListener("click", async () => {
  await caches.delete("tables-1");
  location.reload();
});
</script>
{% endblock %}