{% include 'header.html' %}

<link rel="stylesheet" href="{{ url_for('static', filename='css/compare.css') }}">

<script src="{{ url_for('static', filename='js/Compare/CompareRowsHelpers.js') }}"></script>
<script src="{{ url_for('static', filename='js/Compare/CompareRowClick.js') }}"></script>
<script src="{{ url_for('static', filename='js/Compare/CompareCore.js') }}"></script>

{# Globals:
  - `CompareCore` (from `bw_matchbox/assets/js/compare-core.js`)
#}

<div class="container compare">
  {% include 'navigation.html' %}
  <span class="modal-wrapper">
    <div class="modal" id="number-editor">
      <div class="modal-content">
        <span class="close">&times;</span>
        <span id="modal-content-wrapper">Number Editor</span>
      </div>
    </div>
  </span>

  <div class="row">
    <div class="four columns">
      <h4>Location: {% if source_node.location == target_node.location %}Same{% else %}{{ source_node.location }} | {{ target_node.location }}{% endif %}</h4>
    </div>
    <div class="three columns">
      <h4>Unit: {% if source_node.unit == target_node.unit %}Same{% else %}{{ source_node.unit }} | {{ target_node.unit }}{% endif %}</h4>
    </div>
    <div class="five columns">
      <button class="button-primary" id="save-mapping-button">{% if proxy and proxy != "None" %}Create Proxy</button> <button class="button-primary" id="one-to-one">1-to-1 Proxy</button>{% else %}Save{% endif %}</button>
    </div>
  </div>
  <div class="row compare-tables">
    <div class="column one-half">
      <h3>{{ source_node.name }}</h3>
      <table class="compare-table" id="source-table" width="100%">
      </table>
    </div>
    <div class="column one-half">
      <h3>{{ target_node.name }} <span onclick="CompareCore.replaceWithTarget(this)"><a><i class="fa-solid fa-arrow-up"></i></a></span></h3>
      <table class="compare-table" id="target-table" width="100%">
      </table>
    </div>
  </div>
</div>

<script>

  /* // Enable debug mode...
   * const useDebug = true;
   */

  /* // Common types (ts-like):
   *
   * Data record item (for `source_data` and `target_data` tables):
   *
   * interface TDataRecord {
   *   amount: number; // Eg: 7.135225509515751e-9
   *   amount_display: string; // Eg: '7.1e-09'
   *   input_id: number; // Eg: 633
   *   location: string; // Eg: 'United States'
   *   name: string; // Eg: 'Clothing; at manufacturer'
   *   row_id: string; // "0" (auto increment primary key; initilizes dynamically on the client from the first iteration)
   *   unit: string; // Eg: ''
   *   url: string; // Eg: '/process/633'
   *   collapsed: boolean; // true
   *   collapsed-group: string; // "Collapsed-XXX-YYYYYY" -- unique key to locate corresponding pair.
   * }
   */

  // Global variables for compare tables feature (via global variable `sharedData`)...
  const sharedData = {
    // TODO: Separate data by shared and local.
    source_data: {{ source_data_json|safe }}, // TDataRecord[]
    target_data: {{ target_data_json|safe }}, // TDataRecord[]
    target_node: {{ target_json|safe}},
    source_id: {{ source_node.id }},
    target_id: {{ target_node.id }},
    target_name: '{{ target_node.name|safe }}',
    source_node_unit: '{{source_node.unit}}',
    source_node_location: '{{source_node.location}}',
  };

  /* // DEBUG: Crop data table to easier debugging...
   * if (useDebug) {
   *   sharedData.source_data.length = 2;
   *   sharedData.target_data.length = 2;
   * }
   */

  /* // DEBUG: Emulate pre-collapsed elements data...
   * if (useDebug) {
   *   // Link first columns...
   *   const collapsedGroupId = 'Collapsed-0-abcdef'
   *   sharedData.source_data[0].collapsed = true
   *   sharedData.source_data[0]['collapsed-group'] = collapsedGroupId;
   *   sharedData.target_data[0].collapsed = true
   *   sharedData.target_data[0]['collapsed-group'] = collapsedGroupId;
   *   console.log('DEBUG: Emulate pre-collapsed elements data', {
   *     source_data: sharedData.source_data,
   *     target_data: sharedData.target_data,
   *   });
   *   debugger;
   * }
   */

  CompareCore.initCompare(sharedData);

</script>
{% include 'footer.html' %}