<head>
  <link rel='stylesheet' href='/technical-styles/application.css' />
  <script src='/technical-scripts/application-dashboard.js' defer></script>
</head>

<body>
  <section>
    <div class='container-fluid'>
      <div class='row'>
        <div class='col-auto sidebar'>
          <ul class='nav flex-column'>
            <li class='nav-item'>
              <a href='#' class='nav-link' data-section='overview'>
                <i class='bi bi-speedometer2'></i>
                <span class='menu-text'>Overview</span>
              </a>
            </li>
            <li class='nav-item'>
              <a href='#' class='nav-link' data-section='prod-oauth2'>
                <i class='bi bi-key-fill'></i>
                <span class='menu-text'>Production Keys</span>
              </a>
              <ul class='nav flex-column sub-menu'>
                <li>
                  <a href='#' class='nav-link' data-section='prod-oauth2'>
                    <i class='bi bi-lock-fill'></i>
                    <span class='menu-text'>OAuth2</span>
                  </a>
                </li>
                <li>
                  <a href='#' class='nav-link' data-section='prod-apikey'>
                    <i class='bi bi-shield-lock-fill'></i>
                    <span class='menu-text'>API Key</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class='nav-item'>
              <a href='#' class='nav-link' data-section='sandbox-oauth2'>
                <i class='bi bi-key-fill'></i>
                <span class='menu-text'>Sandbox Keys</span>
              </a>
              <ul class='nav flex-column sub-menu'>
                <li>
                  <a href='#' class='nav-link' data-section='sandbox-oauth2'>
                    <i class='bi bi-lock-fill'></i>
                    <span class='menu-text'>OAuth2</span>
                  </a>
                </li>
                <li>
                  <a href='#' class='nav-link' data-section='sandbox-apikey'>
                    <i class='bi bi-shield-lock-fill'></i>
                    <span class='menu-text'>API Key</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class='nav-item'>
              <a href='#' class='nav-link' data-section='subscriptions'>
                <i class='bi bi-card-list'></i>
                <span class='menu-text'>Subscriptions</span>
              </a>
            </li>
          </ul>
        </div>

        <div class='col content'>
          <div id='overview' class='content-section'>
            {{> overview }}
          </div>
          <div id='prod-oauth2' class='content-section d-none'>
            {{> prod-oauth2 }}
          </div>
          <div id='prod-apikey' class='content-section d-none'>
            {{> prod-apikey}}
          </div>
          <div id='sandbox-oauth2' class='content-section d-none'>
            {{> sandbox-oauth2 }}
          </div>
          <div id='sandbox-apikey' class='content-section d-none'>
            {{> sandbox-apikey }}
          </div>
          <div id='subscriptions' class='content-section d-none'>
            {{> subscriptions }}
          </div>
        </div>
      </div>
    </div>
  </section>
</body>