{% 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>

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

<div class="modal-wrapper">
  <div class="modal" id="modal-number-editor">
    <div class="modal-splash"></div>
    <div class="modal-window">
      <div class="modal-header">
        <h3 class="modal-title">Modal title</h3>
        <div class="close">&times;</div>
      </div>
      <div class="modal-content non-padded non-scrollable">
        <div id="modal-content-wrapper">
          Sample content
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container compare">
  {% include 'navigation.html' %}
  <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>
  modules.require('CompareCore', (CompareCore) => {
    /* // Enable debug mode...
     * const useDebug = true;
     * // TODO: Expose it to global scope?
     */

    // Global variables for compare tables feature (via global variable `sharedData`)...
    const sharedData = {
      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;
     * }
     */

    // Export to global scope (to access from generated html code handlers).
    window.CompareCore = CompareCore;

    // Start core module...
    CompareCore.start(sharedData);
  });
</script>
{% include 'footer.html' %}