{% include 'header.html' %}
<div class="container">
  {% include 'navigation.html' %}
  <div class="row">
    <div class="column">
      <h1>{{ ds.name }}
        {% if ds.database == source %}
          {% if not ds.matched %}<button onclick="markMatched(this)" style="vertical-align: middle" class="button-primary" id="manual-match">No match needed</button>
          {% if same_name_count %}<button onclick="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.no_match_needed %}<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 %}

      </ul>
      <h2>Technosphere Inputs</h2>
      <table width="100%">
        <tr>
          <th>Amount</th>
          <th>Name</th>
          <th>Location</th>
          <th>Unit</th>
          {% if show_matching %}
            <th>Matched</th>
            <th>Action</th>
          {% endif %}
        </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>
          {% if show_matching %}
            <td>{% if row.matched %}<i class="fa-solid fa-check"></i>{% else %}<i class="fa-solid fa-circle-xmark"></i>{% endif %}</td>
            <td>
              {% if row.matched %}
                <div class="tooltip">
                    <a class="button button-primary" href="{{ url_for('compare', source=row.input.id, target=row.match.id)}}">Compare</a>
                    <div class="left">
                        <p>{{ row.match.name }}</p>
                        <p>{{ row.match.unit }}</p>
                        <p>{{ row.match.location }}</p>
                    </div>
                </div>
              {%  else %}
                <a class="button button-primary" target="_blank" href="{{ url_for('match', source=row.input.id) }}">Match</a>
              {% endif %}
            </td>
          {% endif %}
        </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>
    </div>
  </div>
</div>

<script type="text/javascript">
function markMatched (button) {
  fetch("{{ url_for('add_attribute', id=ds.id, attr='no_match_needed', value='1')|safe }}");
  var url = "{{ url_for('add_attribute', id=ds.id, attr='matched', value='1')|safe }}";
  fetch(url).then((response) => {
    if (!response.ok) {
        throw new Error(`HTTP error ${response.status}`);
    };
    button.innerText = "Matched";
    button.classList.remove("button-primary");
    document.getElementById('match-button').style.display = 'none';
    document.getElementById('manual-multi-match').style.display = 'none';
    {% if multimatch %}document.getElementById('manual-multi-match').style.display = 'none';{% endif %}
  });
};

{% if same_name_count %}
function markAllMatched (button) {
  var url = "{{ url_for('multi_match', id=ds.id)|safe }}";
  fetch(url).then((response) => {
    if (!response.ok) {
        throw new Error(`HTTP error ${response.status}`);
    };
    button.innerText = "Matched";
    button.classList.remove("button-primary");
    document.getElementById('manual-match').style.display = 'none';
    document.getElementById('match-button').style.display = 'none';
  });
};
{% endif %}
</script>
{% include 'footer.html' %}
