{% extends "layouts/base.html" %}
{% load predictor %}
{% load crispy_forms_tags %}

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

{% block stylesheets %}
{# wizard.form.media #}
{% endblock %}

{% block content %}
<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">CSi 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>


<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ wizard.management_form }}

<div class="row align-right" style="height: 500px;">
  <!-- Left: progress indicator -->
  <div class="col-md-4  align-items-stretch">
    <div class="card bg-white-100 border-1 rounded-0 shadow">
      <!-- <div class="card-header">
        <h3 class="mb-0">Upload</h3>
      </div> -->
      <div class="card-body">
        <ul class="list-group list-group-flush list-group-numbered">
          {% for n in wizard.steps.all %}
          {% if wizard.steps.current == n %}
            <button name="wizard_goto_step" value="{{ n }}" class="list-group-item list-group-item-action active">{{ n.title }}</button>
          {% else %}
            <button name="wizard_goto_step" value="{{ n }}" class="list-group-item list-group-item-action ">{{ n.title }}</button>
          {% endif %}
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>

  <!-- Right: form for this step -->
  <div class="col-md-8  align-items-stretch">
    <div class="card h-100 bg-white-100 border-1 rounded-0 shadow">
      <div class="card-body d-flex flex-column">

          <!-- <button id="render" type="button" class="btn btn-outline-primary">Render Map</button> -->
          {% if wizard.steps.current == "confirm" %}
          <iframe
              id="map"
              width="100%"
              height="400"
              data-srcdoc="{{ rndrdoc|safe }}"
              >
          </iframe>
          {% endif %}

        <!-- Form -->
        {# form.as_p #}
        {% crispy form %}
      </div>
      <div class="card-footer mb-0 p-1">
        <div class="btn-group rounded-1" role="group" aria-label="Basic example">
          {% if wizard.steps.prev %}
          <button name="wizard_goto_step"
                  value="{{ wizard.steps.prev }}"
                  class="btn btn-outline-primary mb-0">
              Back
          </button>
          {% endif %}
          <button type="submit" class="btn btn-outline-primary mb-0">
          {{ wizard.steps.next|yesno:"Next,Submit" }}
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
  </form>
{% endblock %}


{% block javascripts %}
<script>
  const button = document.getElementById('render');
  const map = document.getElementById('map');
  document.addEventListener('DOMContentLoaded', function () {
    const blob = new Blob([map.dataset.srcdoc], { type: 'text/html' });
    map.src = window.URL.createObjectURL(blob);
  });
</script>
{% endblock javascripts %}