{% extends 'base.html' %}

{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  crossorigin=""></script>
<script>
  $(function () {
    $("#tabs").tabs();
  });
</script>
{% endblock %}

{% block header %}
<h1>{% block title %}Vehicle Status for {{vehicle.nickname.value}}{% endblock %}</h1>
{% endblock %}

{% block content %}
<div>
  <div style="display: flex; margin-top: 5px;">
    <div style="flex: 0 0 250px;">
      <img src="{{ url_for('status.vehicleStatusOrImg', vin=vehicle.vin.value) }}" class="status" />
    </div>

    {% if 'parkingPosition' in vehicle.statuses and vehicle.statuses['parkingPosition'].enabled and
    vehicle.statuses['parkingPosition'].carCapturedTimestamp.enabled %}
    <div style="flex: 1;" id="mapid"></div>

    <script>
      var parkingPosition = L.latLng({{ vehicle.statuses['parkingPosition'].latitude.value }}, {{ vehicle.statuses['parkingPosition'].longitude.value }});
      var map = L.map('mapid').setView(parkingPosition, 10);
      setTimeout(function () { map.flyToBounds([parkingPosition], { animate: true, duration: 1.0 }); }, 300);


      const parkingTime = new Date('{{vehicle.statuses['parkingPosition'].carCapturedTimestamp.value.isoformat()}}');

      var vehicleIcon = L.icon({
        iconUrl: '{{ url_for("status.vehicleImg", vin=vehicle.vin.value) }}',
        iconSize: [77, 43],
        iconAnchor: [37, 22],
        popupAnchor: [0, -10],
        tooltipAnchor: [37, 0],
      });

      const osm = new L.TileLayer(
        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', maxZoom: 19 }
      );

      const hybrid = new L.TileLayer(
        "http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}",
        { maxZoom: 20, subdomains: ["mt0", "mt1", "mt2", "mt3"] }
      );

      new L.Control.Layers({ OSM: osm, Hybrid: hybrid }).addTo(map);
      map.addLayer(osm);


      L.marker([{{ vehicle.statuses['parkingPosition'].latitude.value }}, {{ vehicle.statuses['parkingPosition'].longitude.value }}], { icon: vehicleIcon }).addTo(map)
        .bindTooltip('Parking position from ' + parkingTime.toLocaleDateString() + ' ' + parkingTime.toLocaleTimeString())

    </script>
    {% endif %}
  </div>
  <hr>
  <div id="tabs">
    <ul>
      <li><a href="#tabs-status">Status</a></li>
      <li><a href="#tabs-capabilities">Capabilities</a></li>
    </ul>
    <div id="tabs-status">
      {% if 'rangeStatus' in vehicle.statuses and vehicle.statuses['rangeStatus'].enabled and
      vehicle.statuses['rangeStatus'].carCapturedTimestamp.enabled %}
      <p>
      <h2>Range Status (From {{vehicle.statuses['rangeStatus'].carCapturedTimestamp.value.isoformat()}})</h2>
      <ul>
        {% if vehicle.statuses['rangeStatus'].carType.enabled %}
        <li> Car type: {{vehicle.statuses['rangeStatus'].carType.value.value}}</li>
        {% endif %}
        {% if vehicle.statuses['rangeStatus'].totalRange_km.enabled %}
        <li> Total Range: {{vehicle.statuses['rangeStatus'].totalRange_km.value}}km</li>
        {% endif %}
        {% if vehicle.statuses['rangeStatus'].primaryEngine.enabled %}
        <li> Primary engine: {{vehicle.statuses['rangeStatus'].primaryEngine}}</li>
        {% endif %}
        {% if vehicle.statuses['rangeStatus'].secondaryEngine.enabled %}
        <li> Secondary engine: {{vehicle.statuses['rangeStatus'].secondaryEngine}}</li>
        {% endif %}
      </ul>
      </p>
      {% endif %}

      {% if 'batteryStatus' in vehicle.statuses and vehicle.statuses['batteryStatus'].enabled and
      vehicle.statuses['batteryStatus'].carCapturedTimestamp.enabled %}
      <p>
      <h2>Battery Status (From {{vehicle.statuses['batteryStatus'].carCapturedTimestamp.value.isoformat()}})</h2>
      <ul>
        {% if vehicle.statuses['batteryStatus'].currentSOC_pct.enabled %}
        <li> Current SoC: {{vehicle.statuses['batteryStatus'].currentSOC_pct.value}}%</li>
        {% endif %}
        {% if vehicle.statuses['batteryStatus'].cruisingRangeElectric_km.enabled %}
        <li> Cruising Range Electric: {{vehicle.statuses['batteryStatus'].cruisingRangeElectric_km.value}}km</li>
        {% endif %}
      </ul>
      </p>
      {% endif %}

      {% if 'chargingStatus' in vehicle.statuses and vehicle.statuses['chargingStatus'].enabled and
      vehicle.statuses['chargingStatus'].carCapturedTimestamp.enabled %}
      <p>
      <h2>Charging Status (From {{vehicle.statuses['chargingStatus'].carCapturedTimestamp.value.isoformat()}})</h2>
      <ul>
        {% if vehicle.statuses['chargingStatus'].remainingChargingTimeToComplete_min.enabled and
        vehicle.statuses['chargingStatus'].remainingChargingTimeToComplete_min.value > 0 %}
        <li> Charging time to complete:
          {{vehicle.statuses['chargingStatus'].remainingChargingTimeToComplete_min.value}}min</li>
        {% endif %}
        {% if vehicle.statuses['chargingStatus'].chargingState.enabled %}
        <li> Charging State: {{vehicle.statuses['chargingStatus'].chargingState.value.value}}</li>
        {% endif %}
        {% if vehicle.statuses['chargingStatus'].chargeMode.enabled %}
        <li> Charge Mode: {{vehicle.statuses['chargingStatus'].chargeMode.value.value}}</li>
        {% endif %}
        {% if vehicle.statuses['chargingStatus'].chargePower_kW.enabled and
        vehicle.statuses['chargingStatus'].chargePower_kW.value > 0 %}
        <li> Charge Power: {{vehicle.statuses['chargingStatus'].chargePower_kW.value}}kW</li>
        {% endif %}
        {% if vehicle.statuses['chargingStatus'].chargeRate_kmph.enabled and
        vehicle.statuses['chargingStatus'].chargeRate_kmph.value > 0 %}
        <li> Charge Rate: {{vehicle.statuses['chargingStatus'].chargeRate_kmph.value}}km/h</li>
        {% endif %}
      </ul>
      </p>
      {% endif %}

      {% if 'chargingSettings' in vehicle.statuses and vehicle.statuses['chargingSettings'].enabled and
      vehicle.statuses['chargingSettings'].carCapturedTimestamp.enabled %}
      <p>
      <h2>Charging Settings (From {{vehicle.statuses['chargingSettings'].carCapturedTimestamp.value.isoformat()}})</h2>
      <ul>
        {% if vehicle.statuses['chargingSettings'].maxChargeCurrentAC.enabled %}
        <li> Max charge current AC: {{vehicle.statuses['chargingSettings'].maxChargeCurrentAC.value.value}}</li>
        {% endif %}
        {% if vehicle.statuses['chargingSettings'].autoUnlockPlugWhenCharged.enabled %}
        <li> Auto unlock plug when charged:
          {{vehicle.statuses['chargingSettings'].autoUnlockPlugWhenCharged.value.value}}</li>
        {% endif %}
        {% if vehicle.statuses['chargingSettings'].targetSOC_pct.enabled %}
        <li> Target SoC: {{vehicle.statuses['chargingSettings'].targetSOC_pct.value}}%</li>
        {% endif %}
      </ul>
      </p>
      {% endif %}

      {% if 'plugStatus' in vehicle.statuses and vehicle.statuses['plugStatus'].enabled and
      vehicle.statuses['plugStatus'].carCapturedTimestamp.enabled %}
      <p>
      <h2>Plug Status (From {{vehicle.statuses['plugStatus'].carCapturedTimestamp.value.isoformat()}})</h2>
      <ul>
        {% if vehicle.statuses['plugStatus'].plugConnectionState.enabled %}
        <li> Plug Connection State: {{vehicle.statuses['plugStatus'].plugConnectionState.value.value}}</li>
        {% endif %}
        {% if vehicle.statuses['plugStatus'].plugLockState.enabled %}
        <li> Plug Lock State: {{vehicle.statuses['plugStatus'].plugLockState.value.value}}</li>
        {% endif %}
      </ul>
      </p>
      {% endif %}

      {% if 'climatisationStatus' in vehicle.statuses and vehicle.statuses['climatisationStatus'].enabled and
      vehicle.statuses['climatisationStatus'].carCapturedTimestamp.enabled %}
      <p>
      <h2>Climatization Status (From {{vehicle.statuses['climatisationStatus'].carCapturedTimestamp.value.isoformat()}})
      </h2>
      <ul>
        {% if vehicle.statuses['climatisationStatus'].climatisationState.enabled %}
        <li> Climatization State: {{vehicle.statuses['climatisationStatus'].climatisationState.value.value}}</li>
        {% endif %}
        {% if vehicle.statuses['climatisationStatus'].remainingClimatisationTime_min.enabled and
        vehicle.statuses['climatisationStatus'].climatisationState.value.value != 'off'%}
        <li> Remaining climatization time:
          {{vehicle.statuses['climatisationStatus'].remainingClimatisationTime_min.value}}min</li>
        {% endif %}
      </ul>
      </p>
      {% endif %}

      {% if 'climatisationSettings' in vehicle.statuses and vehicle.statuses['climatisationSettings'].enabled and
      vehicle.statuses['climatisationSettings'].carCapturedTimestamp.enabled %}
      <p>
      <h2>Climatization Status (From
        {{vehicle.statuses['climatisationSettings'].carCapturedTimestamp.value.isoformat()}})</h2>
      <ul>
        {% if vehicle.statuses['climatisationSettings'].targetTemperature_C.enabled %}
        <li> Target temperature: {{vehicle.statuses['climatisationSettings'].targetTemperature_C.value}}°C</li>
        {% endif %}
        {% if vehicle.statuses['climatisationSettings'].climatisationWithoutExternalPower.enabled %}
        <li> Climatization without external power:
          {{vehicle.statuses['climatisationSettings'].climatisationWithoutExternalPower.value}}</li>
        {% endif %}
        {% if vehicle.statuses['climatisationSettings'].climatizationAtUnlock.enabled %}
        <li> Climatization at unlock: {{vehicle.statuses['climatisationSettings'].climatizationAtUnlock.value}}</li>
        {% endif %}
        {% if vehicle.statuses['climatisationSettings'].windowHeatingEnabled.enabled %}
        <li> Window heating: {{vehicle.statuses['climatisationSettings'].windowHeatingEnabled.value}}</li>
        {% endif %}
        {% if vehicle.statuses['climatisationSettings'].zoneFrontLeftEnabled.enabled %}
        <li> Zone front left: {{vehicle.statuses['climatisationSettings'].zoneFrontLeftEnabled.value}}</li>
        {% endif %}
        {% if vehicle.statuses['climatisationSettings'].zoneFrontRightEnabled.enabled %}
        <li> Zone front right: {{vehicle.statuses['climatisationSettings'].zoneFrontRightEnabled.value}}</li>
        {% endif %}
        {% if vehicle.statuses['climatisationSettings'].zoneRearLeftEnabled.enabled %}
        <li> Zone rear left: {{vehicle.statuses['climatisationSettings'].zoneRearLeftEnabled.value}}</li>
        {% endif %}
        {% if vehicle.statuses['climatisationSettings'].zoneRearRightEnabled.enabled %}
        <li> Zone rear right: {{vehicle.statuses['climatisationSettings'].zoneRearRightEnabled.value}}</li>
        {% endif %}

      </ul>
      </p>
      {% endif %}

      {% if 'windowHeatingStatus' in vehicle.statuses and vehicle.statuses['windowHeatingStatus'].enabled and
      vehicle.statuses['windowHeatingStatus'].carCapturedTimestamp.enabled %}
      <p>
      <h2>Window heating Status (From
        {{vehicle.statuses['windowHeatingStatus'].carCapturedTimestamp.value.isoformat()}})</h2>
      <ul>
        {% if vehicle.statuses['windowHeatingStatus'].windows.enabled %}
        {% for windowName, window in vehicle.statuses['windowHeatingStatus'].windows.items() %}
        <li> {{window}}</li>
        {% endfor %}
        {% endif %}
      </ul>
      </p>
      {% endif %}

      {% if 'climatisationTimer' in vehicle.statuses and vehicle.statuses['climatisationTimer'].enabled and
      vehicle.statuses['climatisationTimer'].carCapturedTimestamp.enabled %}
      <p>
      <h2>Climatization Timer (From {{vehicle.statuses['climatisationTimer'].carCapturedTimestamp.value.isoformat()}})
      </h2>
      <ul>
        {% if vehicle.statuses['climatisationTimer'].timeInCar.enabled %}
        <li> Time in car: {{vehicle.statuses['climatisationTimer'].timeInCar.value.isoformat()}}</li>
        {% endif %}
        {% if vehicle.statuses['climatisationTimer'].timers.enabled %}
        <li>Timers:
          <ul>
            {% for timerName, timer in vehicle.statuses['climatisationTimer'].timers.items() %}
            <li> {{timer}}</li>
            {% endfor %}
          </ul>
        </li>
        {% endif %}
      </ul>
      </p>
      {% endif %}

      {% if 'lvBatteryStatus' in vehicle.statuses and vehicle.statuses['lvBatteryStatus'].enabled %}
      <p>
      <h2>12V battery status</h2>
      <ul>
        {% if vehicle.statuses['lvBatteryStatus'].batterySupport.enabled %}
        <li> Battery support: {{vehicle.statuses['lvBatteryStatus'].batterySupport.value.value}}</li>
        {% endif %}
      </ul>
      </p>
      {% endif %}

      {% if 'accessStatus' in vehicle.statuses and vehicle.statuses['accessStatus'].enabled and
      vehicle.statuses['accessStatus'].carCapturedTimestamp.enabled %}
      <p>
      <h2>Access Status (From {{vehicle.statuses['accessStatus'].carCapturedTimestamp.value.isoformat()}})</h2>
      <ul>
        {% if vehicle.statuses['accessStatus'].overallStatus.enabled %}
        <li> Overall Status: {{vehicle.statuses['accessStatus'].overallStatus.value.value}}</li>
        {% endif %}
        <table>
          <tr>
            {% if vehicle.statuses['accessStatus'].doors.enabled %}
            <th>Doors</th>
            {% endif %}
            {% if vehicle.statuses['accessStatus'].windows.enabled %}
            <th>Windows</th>
            {% endif %}
          </tr>
          <tr>
            <td>
              {% if vehicle.statuses['accessStatus'].doors.enabled %}
              <ul>
                {% for doorName, door in vehicle.statuses['accessStatus'].doors.items() %}
                <li> {{door}}</li>
                {% endfor %}
              </ul>
              {% endif %}
            </td>
            <td>
              {% if vehicle.statuses['accessStatus'].windows.enabled %}
              <ul>
                {% for windowName, window in vehicle.statuses['accessStatus'].windows.items() %}
                <li> {{window}}</li>
                {% endfor %}
              </ul>
              {% endif %}
            </td>
          </tr>
        </table>
      </ul>
      </p>
      {% endif %}

      {% if 'parkingPosition' in vehicle.statuses and vehicle.statuses['parkingPosition'].enabled and
      vehicle.statuses['parkingPosition'].carCapturedTimestamp.enabled %}
      <p>
      <h2>Parking position (From {{vehicle.statuses['parkingPosition'].carCapturedTimestamp.value.isoformat()}})</h2>
      <ul>
        {% if vehicle.statuses['parkingPosition'].error.enabled %}
        <li> Error: {{vehicle.statuses['parkingPosition'].error}}</li>
        {% endif %}
        {% if vehicle.statuses['parkingPosition'].latitude.enabled %}
        <li> Latitude: {{vehicle.statuses['parkingPosition'].latitude.value}}</li>
        {% endif %}
        {% if vehicle.statuses['parkingPosition'].longitude.enabled %}
        <li> Longitude: {{vehicle.statuses['parkingPosition'].longitude.value}}</li>
        {% endif %}
      </ul>
      </p>
      {% endif %}
    </div>
    {% if vehicle.capabilities.enabled %}
    <div id="tabs-capabilities">
      <p>
      <h2>Vehicle capabilities</h2>
      <ul>
        {% for capabilityName, capability in vehicle.capabilities.items() %}
        <li> {{capability}}</li>
        {% endfor %}
      </ul>
      </p>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}