{% load i18n sizeformat %}

<div class="detail">

  <h4>{% trans "Info" %}</h4>
    <hr class="header_rule">
    <dl class="dl-horizontal">
      <dt>{% trans "Name" %}</dt>
      <dd>{{ board.name }}</dd>
      <dt>{% trans "Status" %}</dt>
      <dd>{{ board.status }}</dd>
      <dt>{% trans "Type" %}</dt>
      <dd>{{ board.type }}</dd>
      <dt>{% trans "ID" %}</dt>
      <dd>{{ board.uuid }}</dd>
      <dt>{% trans "MAC" %}</dt>
      <dd>{{ board.mac_addr }}</dd>
      <dt>{% trans "LR version" %}</dt>
      <dd>{{ board.lr_version }}</dd>
      <dt>{% trans "Code" %}</dt>
      <dd>{{ board.code }}</dd>
      <dt>{% trans "Creation data" %}</dt>
      <dd>{{ board.created_at }}</dd>
      <dt>{% trans "Location" %}</dt>
      <dd>Latitude: {{ coordinates.latitude }}</dd>
      <dd>Longitude: {{ coordinates.longitude }}</dd>
      <dd>Altitude: {{ coordinates.altitude }}</dd>
      <dt>{% trans "Mobile" %}</dt>
      <dd>{{ board.mobile }}</dd>
      <dt>{% trans "Extra" %}</dt>
      <dd>{{ board.extra }}</dd>
      <dt>{% trans "Fleet Name" %}</dt>
      <dd>{{ board.fleet_name }}</dd>
      <dt>{% trans "Fleet ID" %}</dt>
      <dd>{{ board.fleet }}</dd>
    </dl>

  <h4>{% trans "Ports" %}</h4>
    <hr class="header_rule">
    <dl class="dl-horizontal">
      {% if ports %}
          {% for port in ports %}
              <dt>{{ port.VIF_name }}</dt>
              <dd>{{ port.ip }}</dd>
          {% endfor %}
      {% else %}
          <dd>--</dd>
      {% endif %}
    </dl>

  <h4>{% trans "Services" %}</h4>
    <hr class="header_rule">
    <dl class="dl-horizontal">
      {% if services %}
        {% for service in services %}
            <!--<dt>{{ service.name }} [{{ service.protocol }}] {{ service.port }}</dt>-->
            <!--<dd>{{ service.public_port }}</dd>-->
            <dt>{{ service.name }}</dt>
            <dd>[{{ service.protocol }}] L: {{ service.port }}; P: {{ service.public_port }}</dd>
        {% endfor %}
      {% else %}
        <dd>--</dd>
      {% endif %}
    </dl>

  <h4>{% trans "Web Services" %}</h4>
    <hr class="header_rule">
    <dl class="dl-horizontal">
      {% if webservices %}
        {% for ws in webservices %}
            <dt>{{ ws.name }} [{{ ws.port }}]</dt>
            <dd>{{ ws.uuid }}</dd>
        {% endfor %}
      {% else %}
        <dd>--</dd>
      {% endif %}
    </dl>

  <h4>{% trans "Plugins" %}</h4>
    <hr class="header_rule">
    <dl class="dl-horizontal">
      {% if plugins %}
          {% for plugin in plugins %}
              <dt>{{ plugin.name }}</dt>
              <dd>{{ plugin.id }}</dd>
          {% endfor %}
      {% else %}
          <dd>--</dd>
      {% endif %}
    </dl>
</div>

<!--<div id="mapdiv" style="min-height:300px; margin-bottom: 10px;" data-coordinates='[{"latitude": "{{ coordinates.latitude }}", "longitude": "{{ coordinates.longitude }}", "altitude": "{{ coordinates.altitude }}"}]'>-->
<!--
<div id="mapdiv" style="min-height:300px; margin-bottom: 10px;">
	<script>
		$(document).ready(function(){
			/*
			coordinates = JSON.parse(document.getElementById("mapdiv").getAttribute("data-coordinates"));
			lat = coordinates[0]["latitude"];
			lon = coordinates[0]["longitude"];
			alt = coordinates[0]["altitude"];
			*/
			var lat = "{{ coordinates.latitude }}";
			var lon = "{{ coordinates.longitude }}";
			var alt = "{{ coordinates.altitude }}";
			var label = "{{ board.name }}";
			var status = "{{ board.status }}";
			var updated = "{{ board.updated_at }}";

			var array_coord = {"coordinates" : [{"lat": lat, "lon": lon, "alt": alt, "updated": updated, "label": label, "status": status}]}

			render_map("mapdiv", array_coord);
		});
	</script>
</div>
-->