{% include 'header.html' %}

<div id="process-detail-layout" class="panels-layout process-detail-layout">

  <div id="process-detail-panel" class="panels-layout-side
           panels-layout-container panels-layout-vertical panels-layout-right
           process-detail-panel hidden">
    <div id="panels-layout-tabs" class="panels-layout-tabs panels-layout-container">
      <a
        id="comments"
        class="panels-layout-tab active"
        onClick="window.processDetailPage.callbacks.switchSidePanelTab(this)"
      >
        <i class="fa fa-comments"></i> Comments
      </a>
      <a
        id="scores"
        class="panels-layout-tab"
        onClick="window.processDetailPage.callbacks.switchSidePanelTab(this)"
      >
        <i class="fa fa-table-list"></i> Scores
      </a>
    </div>
    {% include 'thread-comments-panel.html' %}
    {% include 'scores-list-panel.html' %}
    {#
    <div id="thread-scores-panel panels-layout-tab-content" data-panels-layout-tab-content-id="scores">
      scores
    </div>
    #}
  </div>

  <div id="process-detail" class="panels-layout-main panels-layout-container process-detail{{ ' waitlist' if ds.get('waitlist') }}">
    <div class="panels-layout-actions">
      <a
        id="toggle-side-panel-button"
        class="panels-layout-actions-button layout-actions-button turnaround"
        title="Toggle side panel"
        onClick="window.processDetailPage.callbacks.toggleCommentsPanel(this)"
      >
        <i class="fa fa-angles-left"></i>
        {#
        <i class="fa fa-comments icon-default"></i>
        <i class="fa fa-times icon-active"></i>
        #}
      </a>
    </div>

    <div class="panels-layout-content panels-layout-full panels-layout-scrollable">
      <div class="container">

        {% include 'navigation.html' %}

        <div class="row">
          <div class="column">

            <div class="common-page-header">
              <h3 class="title">
                {{ ds.name }}
                <div class="tools">
                  <div class="tools-wrapper">
                    {% if ds.database == source and config.role == 'editors'  %}
                      <a id="mark-waitlist" class="tools-button {{ ' theme-primary' if not ds.get('waitlist') }}" onClick="window.processDetailPage.callbacks.markWaitlist(this)">{{ 'Waitlisted' if ds.waitlist else 'Waitlist' }}</a>
                      {% if not ds.matched %}
                        <a id="manual-match" class="tools-button theme-primary" onClick="window.processDetailPage.callbacks.markMatched(this)">No match needed</a>
                        {% if same_name_count %}
                          <a id="manual-multi-match" class="tools-button theme-primary" onClick="window.processDetailPage.callbacks.markAllMatched(this)">Mark all matched</a>
                        {% endif %}
                        <a id="match-button" class="tools-button theme-primary" href="{{ url_for('match', source=ds.id)}}">Match</a>
                      {% else %}
                        <a id="match-button" class="tools-button disabled">{% if ds.match_type == "1" %}No match needed{% else %}Matched{% endif %}</a>
                      {% endif %}
                    {% endif %}
                    {% if ds.matched and not is_proxy and config.role == 'editors' %}
                      <a class="tools-button theme-danger" href="{{ url_for('remove_match', id=ds.id)}}">{% if ds.proxy_id %}Remove match and delete proxy{% else %}Remove match{% endif %}</a>
                    {% endif %}
                    {% if is_proxy and config.role == 'editors' %}
                      <a class="tools-button theme-danger" href="{{ url_for('remove_match', id=ds.id)}}">Delete proxy and remove match</a>
                    {% endif %}
                  </div>
                </div>
              </h3>
            </div>

            <ul class="details-list">
                <li><label>Database:</label> {{ ds.database }}</li>
                <li><label>Location:</label> {{ ds.location }}</li>
                <li><label>Unit:</label> {{ ds.unit }}</li>
                <li><label>ID:</label> {{ ds.id }}</li>
                <li><label>Production amount:</label> {{ ds['production amount'] }}</li>
                <li><label>Reference product:</label> {{ ds['reference product'] }}</li>
                <li><label>Authors:</label> {{ authors }}</li>
                <li><label>Comment:</label> {{ds.comment }}</li>
                {% if same_name_count %}
                    <li><label>Datasets with same name:</label> {{ same_name_count }}: {% for obj in same_name %}<a href="{{ url_for('process_detail', id=obj.id) }}" {% if obj.data.matched %}class="exact"{% endif %}>{% if obj.data.matched %}<i class="fa-solid fa-check"></i> {% endif %}{{obj.location}}</a> {% endfor %}</li>
                {% endif %}
                {% if proxy_node %}
                    <li><label>Proxy:</label> <a href="{{ url_for('process_detail', id=proxy_node.id) }}">{{ proxy_node }}</a></li>
                {% endif %}
                {% if reference_node %}
                    <li><label>Proxy for:</label> <a href="{{ url_for('process_detail', id=reference_node.id) }}">{{ reference_node }}</a></li>
                {% endif %}
                {% if match_type %}
                    <li><label>Match type:</label> {{ match_type }}</li>
                {% endif %}
            </ul>

            <div class="info-tableau">
              <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>

            <h3>Technosphere Inputs</h3>

            {% if not technosphere|length %}
              <p>No technosphere exchanges</p>
            {% else %}
              <table class="fixed-table" 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>
                    <th class="cell-matched"><div>Matched</div></th>
                  </tr>
                </thead>
                <tbody>
                  {% for row in technosphere %}
                  <tr>
                    <td><div>{{row.amount}}</div></td>
                    <td><div><a href="{{ url_for('process_detail', id=row.input.id) }}">{{row.input.name}}</a></div></td>
                    <td><div>{{row.input.location}}</div></td>
                    <td><div>{{row.input.unit}}</div></td>
                    <td><div>{% if row.input.matched %}<i class="fa-solid fa-check"></i>{% else %}<i class="fa-solid fa-circle-xmark"></i>{% endif %}</div></td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            {% endif %}

            <h2>Biosphere Inputs</h2>

            {% if not biosphere|length %}
              <p>No biosphere exchanges</p>
            {% elif biosphere|length > 50 %}
              {# Don't show if more than 50? #}
              <p>{{ biosphere|length }} biosphere exchanges</p>
            {% else %}
              <table class="fixed-table" width="100%">
                <thead>
                  <tr>
                    <th class="cell-amount"><div>Amount</div></th>
                    <th class="cell-name"><div>Name</div></th>
                    <th class="cell-categories"><div>Categories</div></th>
                    <th class="cell-unit"><div>Unit</div></th>
                  </tr>
                </thead>
                <tbody>
                  {% for exc in biosphere %}
                    <tr>
                      <td><div>{{ exc.amount }}</div></td>
                      <td><div>{{ exc.input.name }}</div></td>
                      <td><div>{{ exc.input.categories|join("|") }}</div></td>
                      <td><div>{{ exc.input.unit }}</div></td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            {% endif %}

            <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 %}
              {# NOTE: Are we showing only first 50 records? Is it provided by server? #}
              <table class="fixed-table" 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>
                  {% for exc in consumers %}
                    <tr>
                      <td><div>{{ exc.amount }}</div></td>
                      <td><div><a href="{{ url_for('process_detail', id=exc.output.id) }}">{{ exc.output.name }}</a></div></td>
                      <td><div>{{ exc.output.location }}</div></td>
                      <td><div>{{ exc.output.unit }}</div></td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            {% endif %}

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

</div>

{# NOTE: All reusable modules and all related stuff like css are dynamically connecting as ES6 modules, inside the code #}

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

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

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

  // Global variables for compare tables feature (via global variable `sharedParams`)...
  const sharedParams = {
    addAttributeUrl: "{{ url_for('add_attribute', id=ds.id)|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?
    // Waitlist record status...
    isWaitlist: {{ 'true' if ds.waitlist else 'false' }},
    currentRole: '{{ config.role }}',
    currentUser: '{{ config.user }}',
    currentProcess: {{ ds.id }},
    currentProcessName: '{{ ds.name }}', // TODO: To escape with `|replace("'", "\\'")`?
  };

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

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