{% extends "layouts/base.html" %}

{% block title %} {{ asset.calid }} | Upload {% endblock %} 

{% block stylesheets %}
{% endblock stylesheets %}

{% block content %}
<div class="print">
  <div class="col-10 mb-4 d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
    <div class="d-block mb-4 mb-md-0">
        <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
          <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
            <li class="breadcrumb-item">
              <a href="{% url 'dashboard' %}">
                <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
              </a>
            </li>
            <li class="breadcrumb-item text-dark" aria-current="page"><a href="{% url 'asset_table' %}">Inventory</a></li>
            <li class="breadcrumb-item"><a href="{% url 'asset_profile' calid=asset.calid %}"><code>{{ asset.calid }}</code></a></li>
            <li class="breadcrumb-item"><a href="/inventory/{{ asset.calid }}/predictors/">Predictors</a></li>
            <li class="breadcrumb-item active">Upload</li>
          </ol>
        </nav>
        <h1 class="h4"><samp>{{ asset.id }}</samp> / {{ asset.calid }} Predictor Upload</h1>
    </div>
    <div class="btn-toolbar mb-2 mb-md-0">
      <a role="button" 
         href="/inventory/{{ asset.calid }}/predictors/"
         class="btn btn-sm btn-outline-primary d-inline-flex align-items-center mx-1">
            Predictors
      </a>
      <a role="button" 
         href="{% url 'asset_sensors' calid=asset.calid %}"
         class="btn btn-sm btn-outline-primary d-inline-flex align-items-center mx-1">
            Sensors
      </a>
    </div>
  </div>
  

    <div class="row">
        <iframe
        id="map"
        width="100%"
        height="400"
        >
        </iframe>
    </div>
</div>
{% endblock content %}

{% block javascripts %}
{% if navigator %}
<script>
  
{% include "prediction/veux/navigator.js" %}

const VIEWER = new VeuxNavigator(`/inventory/{{asset.calid}}/predictors/{{predictor.id}}/`,
                              document.querySelector('#tab-link-container'),
                              document.getElementById('tab-content-container'));

function handleMemberSelection(elem) {
    VIEWER.select(elem);
}

document.addEventListener('DOMContentLoaded', function () {
    VIEWER.initTabs('tab1', '.tab-link');
});
</script>
{% endif %}

<script>
  const button = document.getElementById('render');
  const form = document.querySelector('form');
  const map = document.getElementById('map');
  button.addEventListener('click', function(event) {
    event.preventDefault();
    fetch('/inventory/{{ asset.calid }}/predictors/create/map/', {
      method: 'POST',
      body: new FormData(form)
    }).then(response => response.text())
      .then(data => {
        const blob = new Blob([data], { type: 'text/html' });
        const url = window.URL.createObjectURL(blob);
        map.src = url;
      })
      .catch(error => {
        console.error('Error fetching map:', error);
      });
  });
</script>
{% endblock javascripts %}