{% include 'header.html' %}

{# Common dependencies... #}

{# Modal windows are used #}
{% include 'common-modal.html' %}

{# Module-specific dependencies... #}

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

<script src="{{ url_for('static', filename='js/ProcessDetail/ProcessDetail.js') }}"></script>

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

<div class="process-detail container">
  {% include 'navigation.html' %}
  <div class="row">
    <div class="column">
      <h1>{{ ds.name }}
        {% if ds.database == source %}
          <button onClick="ProcessDetail.markWaitlist(this)" style="vertical-align: middle" class="button-primary" id="mark-waitlist">Waitlist</button>
          {% if not ds.matched %}<button onClick="ProcessDetail.markMatched(this)" style="vertical-align: middle" class="button-primary" id="manual-match">No match needed</button>
          {% if same_name_count %}<button onClick="ProcessDetail.markAllMatched(this)" style="vertical-align: middle" class="button-primary" id="manual-multi-match">Mark all matched</button>{% endif %}
          <a style="vertical-align: middle" id="match-button" class="button button-primary" href="{{ url_for('match', source=ds.id)}}">Match</a>{% elif ds.match_type == "1" %}<button id="match-button" style="vertical-align: middle">No match needed</button>{% else %}<button id="match-button" style="vertical-align: middle">Matched</button>{% endif %}
        {% endif %}
      </h1>
      <ul>
          <li>Database: {{ ds.database }}</li>
          <li>Location: {{ ds.location }}</li>
          <li>Unit: {{ ds.unit }}</li>
          <li>ID: {{ ds.id }}</li>
          <li>Production amount: {{ ds['production amount'] }}</li>
          <li>Reference product: {{ ds['reference product'] }}</li>
          <li>Authors: {{ authors }}</li>
          <li>Comment: {{ds.comment }}</li>
          {% if same_name_count %}
              <li>Datasets with same name: {{ same_name_count }}: {% for obj in same_name %}<a href="{{ url_for('process_detail', id=obj.id) }}">{% if obj.data.matched %}<i class="fa-solid fa-check"></i> {% endif %}{{obj.location}}</a> {% endfor %}</li>
          {% endif %}
          {% if proxy_node %}
              <li>Proxy: <a href="{{ url_for('process_detail', id=proxy_node.id) }}">{{ proxy_node }}</a></li>
          {% endif %}
          {% if reference_node %}
              <li>Proxy for: <a href="{{ url_for('process_detail', id=reference_node.id) }}">{{ reference_node }}</a></li>
          {% endif %}
          {% if match_type %}
              <li>Match type: {{ match_type }}</li>
          {% endif %}

      </ul>
      <h2>Technosphere Inputs</h2>
      <table width="100%">
        <tr>
          <th>Amount</th>
          <th>Name</th>
          <th>Location</th>
          <th>Unit</th>
          <th>Matched</th>
        </tr>
        {% for row in technosphere %}
        <tr>
          <td>{{row.amount}}</td>
          <td><a href="{{ url_for('process_detail', id=row.input.id) }}">{{row.input.name}}</a></td>
          <td>{{row.input.location}}</td>
          <td>{{row.input.unit}}</td>
          <td>{% if row.matched %}<i class="fa-solid fa-check"></i>{% else %}<i class="fa-solid fa-circle-xmark"></i>{% endif %}</td>
        </tr>
        {% endfor %}
      </table>
      <h2>Biosphere Inputs</h2>
      {% if biosphere|length > 50 or not biosphere|length %}
      <p>{{ biosphere|length }} biosphere exchanges</p>
      {% else %}
      <table width="100%">
        <tr>
          <th>Amount</th>
          <th>Name</th>
          <th>Categories</th>
          <th>Unit</th>
        </tr>
        {% for exc in biosphere %}
          <tr>
            <td>{{ exc.amount }}</td>
            <td>{{ exc.input.name }}</td>
            <td>{{ exc.input.categories|join("|") }}</td>
            <td>{{ exc.input.unit }}</td>
          </tr>
        {% endfor %}
      {% endif %}
      </table>
      <h2>Consuming processes ({{ total_consumers }})</h2>
      {% if not total_consumers %}
      <p>No consuming processes</p>
      {% elif total_consumers > 50 %}
      <p>Showing 50 of {{ total_consumers }}</p>
      {% endif %}
      {% if total_consumers %}
      <table width="100%">
        <tr>
          <th>Amount</th>
          <th>Name</th>
          <th>Location</th>
          <th>Unit</th>
        </tr>
        {% for exc in consumers %}
          <tr>
            <td>{{ exc.amount }}</td>
            <td><a href="{{ url_for('process_detail', id=exc.output.id) }}">{{ exc.output.name }}</a></td>
            <td>{{ exc.output.location }}</td>
            <td>{{ exc.output.unit }}</td>
          </tr>
        {% endfor %}
      {% endif %}
      </table>
    </div>
  </div>
</div>

<script type="text/javascript">
modules.require('ProcessDetail', function requireProcessDetail(ProcessDetail) {
  // Global variables for compare tables feature (via global variable `sharedData`)...
  const sharedData = {
    addAttributeUrl: "{{ url_for('add_attribute', id=ds.id)|safe }}",
    // markWaitlistUrl: "{{ url_for('add_attribute', id=ds.id, attr='waitlist', value='1')|safe }}",
    markMatchTypeUrl: "{{ url_for('add_attribute', id=ds.id, attr='match_type', value='1')|safe }}",
    markMatchedUrl: "{{ url_for('add_attribute', id=ds.id, attr='matched', value='1')|safe }}",
    markAllMatchedUrl: "{{ url_for('multi_match', id=ds.id)|safe }}",
    multimatch: "{{ multimatch or '' }}", // TODO: What type of variable is here? Is it string or boolean?
  };
  console.log('[process_detail:requireProcessDetail]', {
    sharedData,
  });

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

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