{% extends "base.html" %}
{% load i18n %}
{% load staticfiles %}
{% load status_manager %}

{% block extra_assets %}

<style>
[class*="col-"] {
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
}

 /* Tooltip container */
.tooltipp {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltipp .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltipp .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltipp:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

</style>

<link rel="stylesheet" type="text/css" href="/static/rmap/libs/bootstrap-icons-1.10.5/font/bootstrap-icons.min.css" >

{% endblock %}

{% block content %}

<section id="main_content">
  
<h2>{% trans 'User' %}: {{ object.user }}     {% trans 'Station name' %}: {{ object.name }}     {% trans 'Data level:' %} {{ object.mqttrootpath }}</h2>
<a href="{% url 'mystationstatus-list' object.user %}">{%trans "Return to user station list" %}</a>

<div class="table-responsive">
<table class="table">
<tr>
<th> {% trans 'Active' %}         </th>
<th> {% trans 'User' %}          </th>
<th> {% trans 'Lat' %}            </th>
<th> {% trans 'Lon' %}            </th>
<th> {% trans 'Category' %}       </th>
<th> {% trans 'Type' %}           </th>
<th> {% trans 'View on the map' %}</th>
</tr>

<tr>
  <td> 
    {% if object.active %}
      <i class="fa fa-check "></i>
    {% else %}
      <i class="fa fa-times "></i>
    {% endif %}
  </td>
<td> {{ object.user }}   </td>
<td> {{ object.lat }}     </td>
<td> {{ object.lon }}     </td>
<td> {{ object.get_category_display }}</td>
<td> {{ object.get_type_display }}    </td>
<td> <a href="{% url 'stationsonmap' object.user object.slug %}">{{ object.slug }}</a></td>
</tr>
</table>
</div>

<h4>{% trans 'Station status' %}: {{ object.stationmaintstatus.laststatus |default:_('Missing')}} //  {% trans 'Last status update' %}: {{ object.stationmaintstatus.lastupdate|default:_('Missing')}}</h4>
<h4>{% trans 'Firmware version' %}: {{ object.stationmaintstatus.firmwaremajor |default_if_none:_('Missing')}}.{{ object.stationmaintstatus.firmwareminor|default_if_none:_('Missing')}}</h4>

  <p>
    <h3>
      <a href="{% url 'mystationmetadata-detail' object.user object.slug %}">{% trans 'Station details' %} {{ object.user }} {{ object.slug }}</a>      
    </h3>
  </p>

<div class="container-fluid">
  <div class="table-responsive">
    <table class="table">
    <tr>

      <th>{% trans 'Board name' %}</th>
      <th>{% trans 'Firmware version' %}</th>
      <th>{% trans 'Last firmware update' %}</th>
      <th>{% trans 'Last status update' %}</th>
      <th>{% trans 'B1' %}</th>
      <th>{% trans 'B2' %}</th>
      <th>{% trans 'B3' %}</th>
      <th>{% trans 'B4' %}</th>
      <th>{% trans 'B5' %}</th>
      <th>{% trans 'B6' %}</th>
      <th>{% trans 'B7' %}</th>
      <th>{% trans 'B8' %}</th>
      <th>{% trans 'B9' %}</th>
      <th>{% trans 'B10' %}</th>
      <th>{% trans 'B11' %}</th>
      <th>{% trans 'B12' %}</th>
      <th>{% trans 'B13' %}</th>
      <th>{% trans 'B14' %}</th>
      <th>{% trans 'B15' %}</th>
      <th>{% trans 'B16' %}</th>

      <th>{% trans 'V1' %}</th>
      <th>{% trans 'V2' %}</th>
      <th>{% trans 'V3' %}</th>
      <th>{% trans 'V4' %}</th>
      <th>{% trans 'V5' %}</th>

    </tr>
  
    {% for board in object.board_set.all %}
      {% if board.active  %}
    
        <tr>
          <td>{{ board.name }}</td>
          <td>{{ board.boardfirmwaremetadata.swversion|default:_('Missing')}}</td>
          <td>{{ board.boardfirmwaremetadata.swlastupdate|default:_('Missing')}}</td>

          <td>{{ board.boardmaintstatus.lastupdate|date:"Y/m/d" }} {{ board.boardmaintstatus.lastupdate|time:"H:i:s" }}</td>


          <td><div class="tooltipp" {% if board.boardmaintstatus.statusb1  %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusb1 |statusb}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusb_explain.0}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusb2  %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusb2 |statusb}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusb_explain.1}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusb3  %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusb3 |statusb}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusb_explain.2}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusb4  %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusb4 |statusb}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusb_explain.3}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusb5  %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusb5 |statusb}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusb_explain.4}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusb6  %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusb6 |statusb}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusb_explain.5}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusb7  %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusb7 |statusb}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusb_explain.6}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusb8  %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusb8 |statusb}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusb_explain.7}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusb9  %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusb9 |statusb}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusb_explain.8}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusb10 %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusb10|statusb}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusb_explain.9}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusb11 %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusb11|statusb}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusb_explain.10}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusb12 %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusb12|statusb}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusb_explain.11}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusb13 %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusb13|statusb}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusb_explain.12}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusb14 %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusb14|statusb}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusb_explain.13}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusb15 %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusb15|statusb}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusb_explain.14}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusb16 %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusb16|statusb}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusb_explain.15}}</span></div></td>

          <td><div class="tooltipp" {% if board.boardmaintstatus.statusv1 > 0  %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusv1|default_if_none:'-'}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusv_explain.0}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusv2 > 0  %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusv2|default_if_none:'-'}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusv_explain.1}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusv3 > 0  %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusv3|default_if_none:'-'}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusv_explain.2}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusv4 > 0  %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusv4|default_if_none:'-'}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusv_explain.3}}</span></div></td>
          <td><div class="tooltipp" {% if board.boardmaintstatus.statusv5 > 0  %}style="background-color:Tomato;"{% endif %} ><span>{{ board.boardmaintstatus.statusv5|default_if_none:'-'}}</span><span class="tooltiptext">{{board.boardmaintstatus.statusv_explain.4}}</span></div></td>
	  
	</tr>
	  
      {% endif %}
      {% endfor %}
    </table>
  </div>
</div>
</section>

{% endblock %}