{% include 'header.html' %}

<div id="allocate-layout" class="allocate-layout">
  <div id="allocate-header" class="allocate-header">
    {% include 'navigation.html' %}
    <div class="common-page-header">
      <h3 class="title">
        {{ ds.name }}
        {# // It's possible to use header toolbar.
        <div class="tools">
          <div class="tools-wrapper">
            <a id="test-button" class="tools-button theme-primary" title="Test button">Test Button</a>
            <a class="tools-icon theme-primary" title="Test icon"><i class="fa-solid fa-copy"></i></a>
          </div>
        </div>
        #}
      </h3>
    </div>
    <div class="info-tableau">
      {# TODO: Show some info/statistics for alocate-mode?
      <div id="statistics-info-allocate" class="statistics-info">
      </div>
      #}
      <div id="statistics-info-select" class="statistics-info info-select">
        <span class="statistics-info-item">
          <label>Productions:</label>
          <span id="production-count">0</span>
        </span>
        <span class="statistics-info-item">
          <label>Technosphere inputs:</label>
          <span id="technosphere-count">0</span>
        </span>
        <span class="statistics-info-item">
          <label>Biosphere inputs:</label>
          <span id="biosphere-count">0</span>
        </span>
        <span class="statistics-info-item">
          <label>Groups:</label>
          <span id="groups-count">0</span>
        </span>
      </div>
      <div id="no-groups" class="info info-select no-groups-info"><i class="fa fa-circle-info"></i> Create some groups to start dragging the inputs.</div>
      <div id="no-groups" class="info info-select has-groups-info"><i class="fa fa-circle-info"></i>
        <span class="no-moved-inputs">Select inputs in 'Technosphere' and 'Biosphere' tables to drag them to the group.</span>
        <span class="has-moved-inputs">All inputs from 'Technosphere' and 'Biosphere' tables must be added to a group.</span>
      </div>
      <div id="no-groups" class="info info-allocate"><i class="fa fa-circle-info"></i>
        <span class="default">Distribute groups by production.</span>
      </div>
      <div id="error" class="error">Sample error text</div>
      <div id="loader-splash" class="loader-splash bg-white full-cover"><div class="loader-spinner"></div></div>
    </div>
  </div>
  <div id="allocate-mode-layout" class="allocate-root-layout allocate-mode-layout common-hidden">
    <div id="allocate-mode-column" class="allocate-layout-column allocate-mode-column">
      <div id="allocate-mode-toolbar" class="allocate-layout-toolbar allocate-mode-toolbar">
        {# Allocate mode toolbar #}
        <a
          action-id="confirmAllocate"
          title="Save entered fractions"
          class="toolbar-action toolbar-button theme-success"
        >
          <i class="fa fa-check"></i>
          Save fractions
        </a>
        <a
          action-id="backFromAllocate"
          title="Return to inputs distribution"
          class="toolbar-action toolbar-button theme-primary"
        >
          <i class="fa fa-check"></i>
          Back to inputs
        </a>
      </div>
      <div id="allocate-mode-content" class="allocate-layout-content allocate-mode-content">
        <h3>Allocate groups</h3>
        <div id="allocate-mode-content-scroller" class="allocate-mode-content-scroller">
          <div id="allocate-mode-content-container" class="allocate-mode-content-container">
            {# allocate-mode-layout content placeholder #}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="allocate-columns-layout" class="allocate-root-layout allocate-columns-layout common-hidden">
    <div id="allocate-groups-column" class="allocate-layout-column allocate-groups-column">
      <div id="allocate-groups-toolbar" class="allocate-layout-toolbar allocate-groups-toolbar">
        {# Groups toolbar #}
        <a
          action-id="addNewGroup"
          title="Create group"
          class="toolbar-action toolbar-icon theme-primary"
        >
          <i class="fa fa-plus"></i>
        </a>
        <a
          action-id="expandAllGroups"
          title="Collapse/expand all groups"
          class="toolbar-action toolbar-icon theme-primary disabled"
        >
          <i class="fa fa-expand"></i>
        </a>
        <a
          action-id="startAllocate"
          title="Confirm created groups"
          class="toolbar-action toolbar-button theme-success disabled"
        >
          <i class="fa fa-check"></i>
          Allocate
        </a>
      </div>
      <div id="allocate-groups-content" class="allocate-layout-content allocate-groups-content">
        <h3>Groups</h3>
        <p class="info-empty groups-empty">No groups created</p>
        <div id="allocate-groups-list" class="allocate-groups-list">
        </div>
      </div>
    </div>
    <div id="allocate-sources-column" class="allocate-layout-column allocate-sources-column">
      <div id="allocate-sources-toolbar" class="allocate-layout-toolbar allocate-sources-toolbar">
        <a
          action-id="selectAllInputs"
          title="Select/deselect all inputs"
          class="toolbar-action toolbar-icon theme-primary"
        >
          <i class="fa fa-asterisk"></i>
        </a>
      </div>
      <div id="allocate-groups-content" class="allocate-layout-content allocate-groups-content">

        <div class="info-inputs-section production-inputs">
          <h3>Production</h3>
          <p class="info-empty production-empty">No production exchanges</p>
          <table class="fixed-table fixed-table-inactive inputs-table inputs-table-production" data-type="production" width="100%">
            <thead>
              <tr>
                <th class="cell-amount"><div>Amount</div></th>
                <th class="cell-name"><div>Name</div></th>
                <th class="cell-location"><div>Location</div></th>
                <th class="cell-unit"><div>Unit</div></th>
              </tr>
            </thead>
            <tbody id="production-inputs">
            </tbody>
          </table>
        </div>

        <div class="info-inputs-section technosphere-inputs">
          <h3>Technosphere Inputs</h3>
          <p class="info-empty technosphere-empty">No technosphere exchanges</p>
          <table class="fixed-table inputs-table inputs-table-active inputs-table-technosphere" data-type="technosphere" width="100%">
            <thead>
              <tr>
                <th class="cell-amount"><div>Amount</div></th>
                <th class="cell-name"><div>Name</div></th>
                <th class="cell-location"><div>Location</div></th>
                <th class="cell-unit"><div>Unit</div></th>
              </tr>
            </thead>
            <tbody id="technosphere-inputs">
              {#
              Row data:
              {
                amount: 0.06008158208572887
                id: 199
                input: {name: 'Clay-Williams', unit: 'kilogram', location: 'GLO', product: 'LLC', categories: 'Unknown'}
                output: {name: 'Smith LLC', unit: 'kilogram', location: 'GLO', product: 'Inc', categories: 'Unknown'}
                type: "technosphere"
              }
              Render example:
              ```
              <tr>
                <td><div>{{row.amount}}</div></td>
                <td><div><a href="{{ url_for('process_detail', id=row.id) }}">{{row.input.name}}</a></div></td>
                <td><div>{{row.input.location}}</div></td>
                <td><div>{{row.input.unit}}</div></td>
              </tr>
              ```
              #}
            </tbody>
          </table>
        </div>

        <div class="info-inputs-section biosphere-inputs">
          <h3>Biosphere Inputs</h3>
          <p class="info-empty biosphere-empty">No biosphere exchanges</p>
          <table class="fixed-table inputs-table inputs-table-active inputs-table-biosphere" data-type="biosphere" width="100%">
            <thead>
              <tr>
                <th class="cell-amount"><div>Amount</div></th>
                <th class="cell-name"><div>Name</div></th>
                <th class="cell-location"><div>Categories</div></th>
                <th class="cell-unit"><div>Unit</div></th>
              </tr>
            </thead>
            <tbody id="biosphere-inputs">
            </tbody>
          </table>
        </div>

      </div>
    </div>
  </div>
</div>

{# TODO: It's possible to dynamically load all required styles using `CommonHelpers.addCssStyle` method. #}
<link rel="stylesheet" href="{{ url_for('static', filename='css/allocate-page.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/allocate-page-toolbar.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/allocate-page-inputs-table.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/allocate-page-groups.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/allocate-page-allocate-mode.css') }}">

<!-- Start page scripts -->
<script type="module">

  // @ts-check

  // Core module
  import { AllocatePage } from '/assets/modules/pages/AllocatePage/AllocatePage.js';

  const rootNode = document.getElementById('allocate-layout');

  // Global variables...
  const sharedParams = {
    // Current configuration parameters...
    processId: {{ id }},
    rootNode,
    currentRole: '{{ config.role }}',
    currentUser: '{{ config.user }}',
    // Data...
    production: {{ production_json|safe }},
    technosphere: {{ technosphere_json|safe }},
    biosphere: {{ biosphere_json|safe }},
  };

  // Export to global scope (to access from generated html code handlers).
  window.allocatePage = new AllocatePage(sharedParams);

</script>

{% include 'footer.html' %}