{% from "macros/breadcrumbs.html" import breadcrumbs_macro with context %}
{% from "macros/common_head.html" import common_head_macro with context %}
{% from "macros/header.html" import header_macro with context %}
<html>
  <head>
    <title>Tierkreis visualization: node</title>
      {{ common_head_macro() }}
  </head>
  <body>
    {{ header_macro() }}
    <main>
      {{ breadcrumbs_macro(breadcrumbs) }}

      <script>
        function openOutput(loc, port) {
          /** @type {URL} */
          const url = new URL(window.location.href);
          url.pathname = url.pathname.split("/").slice(0, -1).join("/")
          url.pathname += `/${loc}/outputs/${port}`
          open(url, "_blank")
        }
      </script>
      <h1 style="font-size: 1.75rem; font-weight: 500;">{{ node.type }}</h1>

      <ul>
        <li>
          <span  style="color: var(--neutral-600);
    margin: 0.5rem 0;
    margin-top: 1.25rem;
    display: block;
    font-size: 1.125rem;">Inputs</span>

              <ul>
              {% for k, (loc, port) in inputs.items() %}
              <li>
                <span class="divLink" onclick="openOutput('{{ loc }}', '{{ port }}')">{{ k }}</span>
                ({{ loc }}, {{ port }})
              </li>
              {% endfor %}
          </ul>
        </li>

        <li>
          <span style="color: var(--neutral-600);
    margin: 0.5rem 0;
    margin-top: 1.25rem;
    display: block;
    font-size: 1.125rem;">Outputs</span>
          <ul>
            {% for k, (loc, port) in outputs.items() %}
              <li>
                <span class="divLink" onclick="openOutput('{{ loc }}', '{{ port }}')">{{ k }}</span>
                ({{ loc }}, {{ port }})
              </li>
            {% endfor %}
          </ul>
        </li>
      </ul>
    </main>
  </body>
</html>
