{% extends "admin/base_site_nav.html" %}
{% load i18n %}

{% block title %}{%trans 'Forecast editor'|capfirst %}{% endblock %}

{% block extrahead %}{{block.super}}
<script type="text/javascript" src="{{STATIC_URL}}js/d3.min.js"></script>
{% if debug_js %}
<script type="module" src="http://localhost:5173/static/src/main.js"></script>
<script type="module" src="http://localhost:5173/static/@vite/client"></script>
{% else %}
<script type="module" src="{{STATIC_URL}}forecast/main.js"></script>
{% endif %}
<style>

#forecasttable thead th {
  background-color: #aaa;
  height: 22px;
  border: 1px solid #bbb;
  border-top: 0;
  border-bottom: 0;
}

#forecasttable tbody tr {
  height: 21px;
}

#forecasttable tbody tr td{
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 3px;
  padding-left: 3px;
  width: 79px;
  border: 1px solid #bbb;
  border-top: 0;
  border-bottom: 0;
}

#forecasttable tbody tr td input {
  width: 75px;
  text-align: center;
  font-size: 11px;
}

#forecasttabletags tbody tr {
  height: 21px;
}

#forecasttabletags tbody tr td{
  padding-top: 0px;
  padding-bottom: 0px;
}

tbody tr td {
  border-top: none !important;
}

#forecasttable input[type='number'] {
    -moz-appearance:textfield;
}

.evtitemrow, .evtcustrow, .evtlocatrow {
  padding-left: 15px;
  padding-bottom: 3px;
}

.numbervaluesfirst {
  overflow: hidden;
  float: right;
  padding-right: 10px;
  padding-left: 10px;
  white-space: nowrap;
}

.numbervaluesmiddle {
  min-width: 70px;
  overflow: hidden;
  float: right;
  padding-right: 10px;
  white-space: nowrap;
}

.numbervalues {
  min-width: 70px;
  overflow: hidden;
  float: right;
  padding-right: 10px;
  white-space: nowrap;
}

.numbervalueslast {
  min-width: 70px;
  overflow: hidden;
  float: right;
  padding-right: 10px;
  white-space: nowrap;
}

.evtitemrow .fa, .evtcustrow .fa, .evtlocatrow .fa {
  float: left;
}

.fa-warning.text-danger {
  color: #8a6d3b !important;
}

</style>
{% endblock %}

{% block extracontainer %}style="overflow-x: hidden;"{% endblock %}

{% block content %}
<script>
var language="{{LANGUAGE_CODE}}";
var preferences={% if preferences %}
  {{preferences|json}}
{% else %}
  {'measure': 'forecasttotal',
   'sequence': 'ILC',
   'showtab': 'forecast',
   'height': 240
  }{% endif %};
var currentbucket="{{currentbucket}}";
var bucketsperyear={{bucketsperyear|safe}};
var currentdate="{{currentdate}}";
var version='{% version_short %}';
var measures = {{measures|safe}};

var service_url = {% if proxied %}'/svc/{{request.database}}/'{% else %}document.location.protocol + "//{{port}}/"{% endif %};
var service_token = '{{token}}';

$(function() {
  $("#horizonbucketsul li a").click(function(){
    $("#horizonbuckets1").html($(this).text() + '  <span class="caret"></span>');
    $("#horizonbuckets").val($(this).prop('name'));
  });

  $("#horizonunitul li a").click(function(){
    $("#horizonunit1").html($(this).text() + '  <span class="caret"></span>');
    $("#horizonunit").val($(this).prop('name'));
  });
});

</script>
<div id="app"></div>
<div id="popup" class="modal fade in" role="dialog" style="z-index: 10000;">
</div>
{% endblock %}
{% block footer %}

{% endblock %}
{% block modal %}{% include "admin/subtemplate_timebuckets.html" %}{% endblock %}