{% include 'header.html' %}


{% if not internal_error %}

{% if is_plot_page %}
<div class="alert alert-primary"> <!-- alternatives: alert-info, alert-primary, alert-secondary -->
  Do you need help with interpreting the plots?
  See <a href="https://docs.px4.io/en/log/flight_review.html" target="_blank" class="alert-link">here</a>.
</div>
{% endif %}

{{ title_html }}
{{ hardfault_html }}
{{ info_table_html }}
{{ corrupt_log_html }}
{{ error_labels_html }}

{% if has_position_data %}

<!-- Leaflet map plot -->
<div id="mapid"></div>

<script>
var pos_datas = {{ pos_datas }}; // list of [lat, lon] coordinates
var pos_flight_modes = {{ pos_flight_modes }}; // list of [color, index of pos_datas]
var waypoint_bounds = [];

var mymap = L.map('mapid').setView([pos_datas[0][0], pos_datas[0][1]],15);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox.satellite',
    accessToken: '{{ mapbox_api_access_token }}'
}).addTo(mymap);

for(var j=0; j<pos_flight_modes.length - 1; j++) {
  var offset = -1;
  if(pos_flight_modes[j][1] == 0)
    offset = 0;
  var waypoint_polyline = pos_datas.slice(pos_flight_modes[j][1] + offset, pos_flight_modes[j+1][1]);
  var cur_flight_color = pos_flight_modes[j][0];
  var polyline = L.polyline(waypoint_polyline, {color: cur_flight_color}).addTo(mymap);
  Array.prototype.push.apply(waypoint_bounds, waypoint_polyline);
}

mymap.fitBounds(pos_datas);

</script>

{% endif %}

{% if is_plot_page %}

<div id="loading-plots"><p><big><br/>Loading Plots...</big><br/></p></div>
{% endif %}

{{ plot_div|indent(8) }}

{{ additional_info }}

{% endif %} {# internal_error #}


{% include 'footer.html' %}

</body>
</html>