{% extends "base.html" %}

{% block extrahead %}
<script src="{{ url_for('static', filename="jit/jit-yc.js") }}"></script>
<script src="{{ url_for('static', filename="js/hypertree.js") }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename="css/hypertree.css") }}" type="text/css" media="screen, projection">
{% endblock %}

{% block body %}
<h1>{{ data.name }}</h1>

<div class="span-12">
    <ul>
        <li>Categories: {{ data.categories }}</li>
        <li>Unit: {{ data.unit }}</li>
        {% if data.location %}<li>Location: {{ data.location }}</li>{% endif %}
        {% if ref_prod %}<li>Production amount: {{ ref_prod }}</li>{% endif %}
        {% if lca %}<li>Preferred LCIA method: {{ preferred_lcia }}</li>
        <li>LCA score: {{ single_score }}</li>{% endif %}
    </ul>
</div>

<div class="span-12 last">
    <a href="{{ edit_url }}"><button>View raw JSON data</button></a>
</div>

<div class="clear">
    <h2>Supply chain</h2>
    <div id="hypertree-jit"></div>
</div>
<div class="clear">

    <h2>Biosphere flows</h2>
    <div id="biosphere-table"></div>

    <h2>Technosphere flows</h2>
    <div id="technosphere-table"></div>
</div>

<script type="text/javascript">
var bio_columns = [{
    name: "name",
    label: "Name",
    cell: "string",
    editable: false
}, {
    name: "amount",
    label: "Amount",
    cell: Backgrid.NumberCell.extend({decimals: 12}),
    editable: false
}, {
    name: "unit",
    label: "Unit",
    cell: "string",
    editable: false
}, {
    name: "categories",
    label: "Categories",
    cell: "string",
    editable: false
}];

{% if lca %}
var tech_columns = [{
    name: "name",
    label: "Name",
    cell: "string",
    editable: false
}, {
    name: "amount",
    label: "Amount",
    cell: Backgrid.NumberCell.extend({decimals: 12}),
    editable: false
}, {
    name: "score",
    label: "LCA score",
    cell: Backgrid.NumberCell.extend({decimals: 8}),
    editable: false
}, {
    name: "unit",
    label: "Unit",
    cell: "string",
    editable: false
}, {
    name: "categories",
    label: "Categories",
    cell: "string",
    editable: false
}, {
    name: "location",
    label: "Location",
    cell: "string",
    editable: false
}];
{% else %}
var tech_columns = [{
    name: "name",
    label: "Name",
    cell: "string",
    editable: false
}, {
    name: "amount",
    label: "Amount",
    cell: Backgrid.NumberCell.extend({decimals: 12}),
    editable: false
}, {
    name: "unit",
    label: "Unit",
    cell: "string",
    editable: false
}, {
    name: "categories",
    label: "Categories",
    cell: "string",
    editable: false
}, {
    name: "location",
    label: "Location",
    cell: "string",
    editable: false
}];
{% endif %}

var bio_data = {{ biosphere|safe }};
var tech_data = {{ technosphere|safe }};

var bgt_callback = function (model) {
    window.location = model.attributes.url;
};

BackgridTable(bio_data, bio_columns, "#biosphere-table", ['name'], "Filter by name", 50, bgt_callback);

BackgridTable(tech_data, tech_columns, "#technosphere-table", ['name'], "Filter by name", 50, bgt_callback);

var sc_data = {{ sc_data|safe }};

DynamicHypertreeSupplyChain(sc_data, "hypertree-jit");

</script>
{% endblock %}
