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

{% block title %}{{_("TSUN Proxy - Connections")}}{% endblock title %}
{% block menu1_class %}w3-blue{% endblock %}
{% block headline %}<i class="fa fa-network-wired"></i>  {{_('Proxy Connection Overview')}}{% endblock headline %}

{% block content %}
  <div class="w3-row-padding w3-margin-bottom">
    <div class="w3-quarter">
      <div class="w3-card-4">
      <div class="w3-container w3-indigo w3-padding-16">
        <div class="w3-left"><i class="fa fa-upload w3-xxxlarge fa-rotate-180"></i></div>
        <div id = "server-cnt" class="w3-right">
          <h3>-</h3>
        </div>
        <div class="w3-clear"></div>
        <h4>{{_('Server Mode')}}</h4>
        <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Established from device to proxy')}}</div>
      </div>
      </div>
    </div>
    <div class="w3-quarter">
      <div class="w3-card-4">
      <div class="w3-container w3-purple w3-padding-16">
        <div class="w3-left"><i class="fa fa-download w3-xxxlarge fa-rotate-180"></i></div>
        <div id = "client-cnt" class="w3-right">
          <h3>-</h3>
        </div>
        <div class="w3-clear"></div>
        <h4>{{_('Client Mode')}}</h4>
        <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Established from proxy to device')}}</div>
      </div>
      </div>
    </div>
    <div class="w3-quarter">
      <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-cloud w3-xxxlarge"></i></div>
        <div id = "proxy-cnt" class="w3-right">
          <h3>-</h3>
        </div>
        <div class="w3-clear"></div>
        <h4>{{_('Proxy Mode')}}</h4>
        <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Forwarding data to cloud')}}</div>
      </div>
      </div>
    </div>
    <div class="w3-quarter">
      <div class="w3-card-4">
      <div class="w3-container w3-teal w3-padding-16">
        <div class="w3-left"><i class="fa fa-cloud-arrow-up-alt w3-xxxlarge"></i></div>
        <div id = "emulation-cnt" class="w3-right">
          <h3>-</h3>
        </div>
        <div class="w3-clear"></div>
        <h4>{{_('Emu Mode')}}</h4>
        <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Emulation sends data to cloud')}}</div>
      </div>
      </div>
    </div>
  </div>

  <div id="notes-list"></div>
  <div id="conn-table"></div>
{% endblock content%}

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