<nav class="workspace-nav">
  <div class="workspace-nav__heading">
    <h1>
      {% if workspace.display_name.is_empty() %}
      Untitled Workspace
      {% else %}
      {{ workspace.display_name }}
      {% endif %}
    </h1>
    <basic-dropdown button-class="button--secondary button--small" button-aria-label="Workspace Menu">
      <span slot="button-contents"><i class="ti ti-dots-vertical" aria-hidden="true"></i></span>
      <menu slot="popover" class="basic-dropdown__menu">
        <li>
          <a
            href="{{ navigator.get_root_path() }}/w/{{ workspace.id.simple() }}/service-credentials"
            role="button"
          >
            PostgreSQL credentials
          </a>
        </li>
        <li>
          <a
            href="{{ navigator.get_root_path() }}/w/{{ workspace.id.simple() }}/settings"
            role="button"
          >
            Workspace settings
          </a>
        </li>
        <li>
          <a
            href="{{ navigator.get_root_path() }}/"
            role="button"
          >
            All workspaces
          </a>
        </li>
      </menu>
    </basic-dropdown>
  </div>
  <section 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="button button--secondary button--small" type="submit">
          <div class="sr-only">Add table</div>
          <i class="ti ti-database-plus"></i>
        </button>
      </form>
    </div>
    <menu class="workspace-nav__menu">
      {%- for rel in relations %}
      <li>
        <div class="workspace-nav__menu-item">
          <div class="workspace-nav__heading">
            <h3 class="text--data">{{ rel.name }}</h3>
            <basic-dropdown>
              <span slot="button-contents">
                <span class="sr-only">Table menu</span>
                <i class="ti ti-dots-vertical" aria-hidden="true"></i>
              </span>
              <menu slot="popover" class="basic-dropdown__menu">
                <li>
                  <a
                    href="{{ navigator.get_root_path() -}}
                    /w/{{ workspace.id.simple() -}}
                    /r/{{ rel.oid.0 -}}
                    /settings/"
                    role="button"
                  >
                    Table settings
                  </a>
                </li>
              </menu>
            </basic-dropdown>
          </div>
          <menu class="workspace-nav__menu">
            <li class="workspace-nav__menu-item">
              <div 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="button button--secondary button--small"
                    type="submit"
                  >
                    <div class="sr-only">Add portal</div>
                    <i class="ti ti-table-plus"></i>
                  </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 text--data"
                    >
                      {{ portal.name }}
                    </a>
                    <basic-dropdown button-class="button--secondary button--small" button-aria-label="Portal menu">
                      <span slot="button-contents"><i class="ti ti-dots-vertical" aria-hidden="true"></i></span>
                      <menu slot="popover" class="basic-dropdown__menu">
                        <li>
                          <a
                            href="{{ navigator.get_root_path() -}}
                            /w/{{ workspace.id.simple() -}}
                            /r/{{ rel.oid.0 -}}
                            /p/{{ portal.id.simple() -}}
                            /settings/"
                            role="button"
                          >
                            Portal settings
                          </a>
                        </li>
                      </menu>
                    </basic-dropdown>
                  </div>
                </li>
                {% endfor %}
              </menu>
            </li>
          </menu>
        </div>
      </li>
      {% endfor -%}
    </menu>
  </section>
</nav>

