{% extends "base.html" %}

{% block content %}
    <br>
    <div class="text-center">
      <p>{{ 'Are you available in case of alert?'|t }}</p>
      <button class="btn btn-lg btn-success " onclick="Activate('{{ user.id }}')">{{ 'Activate'|t }}</button>

      <button class="btn btn-lg btn-danger" style="background-color: red" onclick="Deactivate('{{ user.id }}')">{{ 'Deactivate'|t }}</button>
    </div>
    <br>
    <br>
    <img alt="VVF" src="./resources/images/owner.png" width="150" style="display: block; margin-left: auto; margin-right: auto;">
    <br>
    <br>
    <div id="list"></div>
{% if user.full_viewer == false %}
<script>
$(document).ready(function() {
  $( "#list" ).load("resources/ajax/ajax_list.php?"+Math.random());
  setInterval(function() {
    $( "#list" ).load("resources/ajax/ajax_list.php?"+Math.random());
  }, 10000);
});
</script>
{% elseif user.full_viewer == true %}
<script>
$(document).ready(function() {
  $( "#list" ).load("resources/ajax/ajax_admin_list.php?"+Math.random());
  setInterval(function() {
    $( "#list" ).load("resources/ajax/ajax_admin_list.php?"+Math.random());
  }, 10000);
});
</script>
<style>
  #add {
   outline: none;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   font: bold 12px Arial, Helvetica, sans-serif;
   color: #fff;
   padding: 10px 20px;
   border: solid 1px #0076a3;
   background: #0095cd;
  }

  #href {
   outline: none;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   font: bold 12px Arial, Helvetica, sans-serif;
   color: #fff;
   padding: 10px 20px;
   border: solid 1px #0076a3;
   background: #0095cd;
  }
  </style>
{% endif %}
    <br>
    <br>
{% endblock %}