{% extends 'base.html.j2' %}

{% block title %}{{_("TSUN Proxy - MQTT Status")}}{% endblock title %}
{% block menu2_class %}w3-blue{% endblock %}
{% block headline %}<i class="fa fa-database"></i>  {{_('MQTT Overview')}}{% endblock headline %}
{% block content %}
  <div class="w3-row-padding w3-margin-bottom">
    <div class="w3-third">
      <div class="w3-card-4">
      <div class="w3-container w3-indigo w3-padding-16">
        <div class="w3-left"><i class="fa fa-business-time w3-xxxlarge"></i></div>
        <div id = "mqtt-ctime" class="w3-right">
          <h3>-</h3>
        </div>
        <div class="w3-clear"></div>
        <h4>{{_('Connection Time')}}</h4>
        <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Time at which the connection was established')}}</div>
      </div>
      </div>
    </div>
    <div class="w3-third">
      <div class="w3-card-4">
      <div class="w3-container w3-purple w3-padding-16">
        <div class="w3-left"><i class="fa fa-angle-double-right w3-xxxlarge"></i></div>
        <div id = "mqtt-tx" class="w3-right">
          <h3>-</h3>
        </div>
        <div class="w3-clear"></div>
        <h4>{{_('Published Topics')}}</h4>
        <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Number of published topics')}}</div>
      </div>
      </div>
    </div>
    <div class="w3-third">
      <div class="w3-card-4">
      <div class="w3-container w3-orange w3-text-white w3-padding-16">
        <div class="w3-left"><i class="fa fa-angle-double-left w3-xxxlarge"></i></div>
        <div id = "mqtt-rx" class="w3-right">
          <h3>-</h3>
        </div>
        <div class="w3-clear"></div>
        <h4>{{_('Received Topics')}}</h4>
        <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Number of topics received')}}</div>
      </div>
      </div>
    </div>
  </div>
  <div id="notes-list"></div>
  <div id="mqtt-table"></div>
{% endblock content%}

{% block footer %}{% endblock footer %}