<nav class="workspace-nav">
  <section>
    <div class="workspace-nav__heading">
      <h2>Tables</h2>
      <form
        action="{{ navigator.get_root_path() -}}
        /w/{{ workspace.id.simple() -}}
        /add-table"
        method="post"
      >
        <!-- FIXME: CSRF -->
        <button class="workspace-nav__aux-button" type="submit">+</button>
      </form>
    </div>
    <menu class="workspace-nav__menu">
      {%- for rel in relations %}
      <li>
        <collapsible-menu
          class="workspace-nav__menu-item"
          expanded="
          {%- if let Some(NavLocation::Rel(rel_oid, _)) = current -%}
          {%- if rel_oid.to_owned() == rel.oid -%}
          true
          {%- endif -%}
          {%- endif -%}
          "
        >
          <div class="workspace-nav__heading" slot="summary">
            <h3>{{ rel.name }}</h3>
            <a
              href="{{ navigator.get_root_path() -}}
              /w/{{ workspace.id.simple() -}}
              /r/{{ rel.oid.0 -}}
              /settings/"
              class="workspace-nav__aux-button"
              role="button"
            >
              Settings
            </a>
          </div>
          <menu class="workspace-nav__menu" slot="content">
            <li class="workspace-nav__menu-item">
              <collapsible-menu class="workspace-nav__collapsible-menu">
                <div slot="summary" class="workspace-nav__heading">
                  <h4>Portals</h4>
                  <form
                    action="{{ navigator.get_root_path() -}}
                    /w/{{ workspace.id.simple() -}}
                    /r/{{ rel.oid.0 -}}
                    /add-portal"
                    method="post"
                  >
                    <!-- FIXME: CSRF -->
                    <button class="workspace-nav__aux-button" type="submit">+</button>
                  </form>
                </div>
                <menu slot="content" class="workspace-nav__menu">
                  {% for portal in rel.portals %}
                  <li class="workspace-nav__menu-item">
                    <div class="workspace-nav__menu-leaf
                    {%- if current == Some(NavLocation::Rel(rel.oid.to_owned(), Some(RelLocation::Portal(portal.id.to_owned())))) -%}
                    {# preserve space #} workspace-nav__menu-leaf--current
                    {%- endif -%}
                    ">
                      <a
                        href="
                        {{- navigator.get_root_path() -}}
                        /w/{{ workspace.id.simple() -}}
                        /r/{{ rel.oid.0 -}}
                        /p/{{ portal.id.simple() -}}
                        "
                        class="workspace-nav__menu-link
                        "
                      >
                        {{ portal.name }}
                      </a>
                      <a
                        href="{{ navigator.get_root_path() -}}
                        /w/{{ workspace.id.simple() -}}
                        /r/{{ rel.oid.0 -}}
                        /p/{{ portal.id.simple() -}}
                        /form/"
                        class="workspace-nav__aux-button"
                        role="button"
                      >
                        Form
                      </a>
                    </div>
                  </li>
                  {% endfor %}
                </menu>
              </collapsible-menu>
            </li>
          </menu>
        </collapsible-menu>
      </li>
      {% endfor -%}
    </menu>
  </section>
  <script type="module" src="{{ navigator.get_root_path() }}/js_dist/collapsible-menu.webc.mjs"></script>
</nav>

