{# TEMPLATE VAR SETTINGS #}
{%- set url_root = pathto('', 1) %}
{%- if url_root == '#' %}{% set url_root = '' %}{% endif %}
{%- if not embedded and docstitle %}
  {%- set titlesuffix = " &mdash; "|safe + docstitle|e %}
{%- else %}
  {%- set titlesuffix = "" %}
{%- endif %}
{%- set lang_attr = 'en' if language == None else (language | replace('_', '-')) %}
{%- set sphinx_writer = 'writer-html5' if html5_doctype else 'writer-html4' %}

<!DOCTYPE html>
<html class="{{ sphinx_writer }}" lang="{{ lang_attr }}" >
<head>
  <meta charset="utf-8">
  {{ metatags }}
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  {% block htmltitle %}
  <title>{{ title|striptags|e }}{{ titlesuffix }}</title>
  {% endblock %}

  {# CSS #}
  <link rel="icon" type="image/png" sizes="32x32" href="{{ pathto('_static/img/favicon_32x32_v2.png', 1) }}"/>
  <link rel="icon" type="image/png" sizes="16x16" href="{{ pathto('_static/img/favicon_16x16_v2.png', 1) }}"/>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{{ pathto('_static/' + style, 1) }}" type="text/css" />
  <link rel="stylesheet" href="{{ pathto('_static/pygments.css', 1) }}" type="text/css" />
  {%- for css in css_files %}
    {%- if css|attr("rel") %}
  <link rel="{{ css.rel }}" href="{{ pathto(css.filename, 1) }}" type="text/css"{% if css.title is not none %} title="{{ css.title }}"{% endif %} />
    {%- else %}
  <link rel="stylesheet" href="{{ pathto(css, 1) }}" type="text/css" />
    {%- endif %}
  {%- endfor %}

  {%- for cssfile in extra_css_files %}
    <link rel="stylesheet" href="{{ pathto(cssfile, 1) }}" type="text/css" />
  {%- endfor %}

  {# FAVICON #}
  {% if favicon %}
    <link rel="shortcut icon" href="{{ pathto('_static/' + favicon, 1) }}"/>
  {% endif %}
  {# CANONICAL URL #}
  {% if theme_canonical_url %}
    <link rel="canonical" href="{{ theme_canonical_url }}{{ pagename }}.html"/>
  {% endif %}

  {# JAVASCRIPTS #}
  {%- block scripts %}
  <!--[if lt IE 9]>
    <script src="{{ pathto('_static/js/html5shiv.min.js', 1) }}"></script>
  <![endif]-->
  {%- if not embedded %}
  {# XXX Sphinx 1.8.0 made this an external js-file, quick fix until we refactor the template to inherert more blocks directly from sphinx #}
    {% if sphinx_version >= "1.8.0" %}
      <script type="text/javascript" id="documentation_options" data-url_root="{{ pathto('', 1) }}" src="{{ pathto('_static/documentation_options.js', 1) }}"></script>
      {%- for scriptfile in script_files %}
        {{ js_tag(scriptfile) }}
      {%- endfor %}
    {% else %}
      <script type="text/javascript">
          var DOCUMENTATION_OPTIONS = {
              URL_ROOT:'{{ url_root }}',
              VERSION:'{{ release|e }}',
              LANGUAGE:'{{ language }}',
              COLLAPSE_INDEX:false,
              FILE_SUFFIX:'{{ '' if no_search_suffix else file_suffix }}',
              HAS_SOURCE:  {{ has_source|lower }},
              SOURCELINK_SUFFIX: '{{ sourcelink_suffix }}'
          };
      </script>
      {%- for scriptfile in script_files %}
        <script type="text/javascript" src="{{ pathto(scriptfile, 1) }}"></script>
      {%- endfor %}
    {% endif %}
    <script type="text/javascript" src="{{ pathto('_static/js/theme.js', 1) }}"></script>

    {# OPENSEARCH #}
    {%- if use_opensearch %}
    <link rel="search" type="application/opensearchdescription+xml"
          title="{% trans docstitle=docstitle|e %}Search within {{ docstitle }}{% endtrans %}"
          href="{{ pathto('_static/opensearch.xml', 1) }}"/>
    {%- endif %}
  {%- endif %}
  {%- endblock %}

  {%- block linktags %}
    {%- if hasdoc('about') %}
    <link rel="author" title="{{ _('About these documents') }}" href="{{ pathto('about') }}" />
    {%- endif %}
    {%- if hasdoc('genindex') %}
    <link rel="index" title="{{ _('Index') }}" href="{{ pathto('genindex') }}" />
    {%- endif %}
    {%- if hasdoc('search') %}
    <link rel="search" title="{{ _('Search') }}" href="{{ pathto('search') }}" />
    {%- endif %}
    {%- if hasdoc('copyright') %}
    <link rel="copyright" title="{{ _('Copyright') }}" href="{{ pathto('copyright') }}" />
    {%- endif %}
    {%- if next %}
    <link rel="next" title="{{ next.title|striptags|e }}" href="{{ next.link|e }}" />
    {%- endif %}
    {%- if prev %}
    <link rel="prev" title="{{ prev.title|striptags|e }}" href="{{ prev.link|e }}" />
    {%- endif %}
  {%- endblock %}
  {%- block extrahead %} {% endblock %}
</head>

<body class="wy-body-for-nav">

  <div style="height: 100vh; overflow: hidden;">
    {% block extrabody %} {% endblock %}
    <!-- top 56px for navbar height -->
    <div class="navbar-cxg">
        <div style="padding: 0 16px; display: flex; height: inherit; align-items: center; justify-content: space-between;">
            <span style="display:flex; gap: 32px; align-items: center;">
                <a href="https://cellxgene.cziscience.com/">
                  <img src="{{ pathto('_static/img/cellxgene-discover-logo.svg', 1) }}" />
                </a>
                <span class="navbar-cxg-nav-wrapper">
                  <span class="navbar-cxg-section">
                    <span class="navbar-cxg-nav-section-title">Application</span>
                    <span class="navbar-cxg-nav-item-container">
                      <span class="navbar-cxg-link">
                          <a class="navbar-cxg-anchor" href="https://cellxgene.cziscience.com/collections">Collections</a>
                      </span>
                      <span class="navbar-cxg-link">
                          <a class="navbar-cxg-anchor" href="https://cellxgene.cziscience.com/datasets">Datasets</a>
                      </span>
                      <span class="navbar-cxg-link">
                          <a class="navbar-cxg-anchor" href="https://cellxgene.cziscience.com/gene-expression">Gene Expression</a>
                      </span>
                      <span class="navbar-cxg-link">
                        <a class="navbar-cxg-anchor" href="https://cellxgene.cziscience.com/cellguide">Cell Guide</a>
                      </span>
                      <span class="navbar-cxg-link">
                        <a class="navbar-cxg-anchor" href="https://cellxgene.cziscience.com/differential-expression">Differential Expression</a>
                        <div style="height: 16px!important; display: flex;">
                          <span class="beta">NEW</span>
                        </div>
                      </span>
                    </span>
                  </span>
                  <hr class="navbar-divider"/>
                  <span class="navbar-cxg-section">
                    <span class="navbar-cxg-nav-section-title">Census</span>
                    <span class="navbar-cxg-nav-item-container">
                      <span class="navbar-cxg-link active-link">
                        <a class="navbar-cxg-anchor" href="/cellxgene-census/index.html">API</a>
                      </span>
                      <span class="navbar-cxg-link">
                        <a class="navbar-cxg-anchor" href="https://cellxgene.cziscience.com/census-models">Models</a>
                      </span>
                    </span>
                  </span>
                </span>
            </span>

            <span class="navbar-cxg-link">
              <a class="navbar-cxg-anchor" href="https://cellxgene.cziscience.com/docs">Help & Documentation</a>
            </span>
        </div>
    </div>
    <div style="width: 100%; height: 100%; overflow: auto; padding-top: 56px;">
        {# SIDE NAV, TOGGLES ON MOBILE #}
        <!-- top 56px for navbar height -->
        <nav data-toggle="wy-nav-shift" class="wy-nav-side" style="top: 56px;" >
        <div class="wy-side-scroll">
            <div class="wy-side-nav-search" {% if theme_style_nav_header_background %} style="background: {{theme_style_nav_header_background}}" {% endif %}>
            {% block sidebartitle %}

            {% if logo and theme_logo_only %}
                <a href="{{ theme_logo_url or pathto(master_doc) }}">
            {% else %}
                <a href="{{ theme_logo_url or pathto(master_doc) }}" class="icon icon-home"> {{ project }}
            {% endif %}

            {% if logo %}
                {# Not strictly valid HTML, but it's the only way to display/scale
                it properly, without weird scripting or heaps of work
                #}
                <img src="{{ pathto('_static/' + logo, 1) }}" class="logo" alt="{{ _('Logo') }}"/>
            {% endif %}
            </a>

            {% if theme_display_version %}
                {%- set nav_version = version %}
                {% if READTHEDOCS and current_version %}
                {%- set nav_version = current_version %}
                {% endif %}
                {% if nav_version %}
                <div class="version">
                    {{ nav_version }}
                </div>
                {% endif %}
            {% endif %}

            {% include "searchbox.html" %}

            {% endblock %}
            </div>

            {% block navigation %}
            <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
            {% block menu %}
                {#
                The singlehtml builder doesn't handle this toctree call when the
                toctree is empty. Skip building this for now.
                #}
                {% if 'singlehtml' not in builder %}
                {% set global_toc = toctree(maxdepth=theme_navigation_depth|int,
                                            collapse=theme_collapse_navigation|tobool,
                                            includehidden=theme_includehidden|tobool,
                                            titles_only=theme_titles_only|tobool) %}
                {% endif %}
                {% if global_toc %}
                {{ global_toc }}
                {% else %}
                <!-- Local TOC -->
                <div class="local-toc">{{ toc }}</div>
                {% endif %}
            {% endblock %}
            </div>
            {% endblock %}
        </div>
        </nav>

        <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">

        {# MOBILE NAV, TRIGGLES SIDE NAV ON TOGGLE #}
        <nav class="wy-nav-top" aria-label="top navigation">
            {% block mobile_nav %}
            <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
            <a href="{{ pathto(master_doc) }}">{{ project }}</a>
            {% endblock %}
        </nav>


        <div class="wy-nav-content">
        {%- block content %}
            {% if theme_style_external_links|tobool %}
            <div class="rst-content style-external-links">
            {% else %}
            <div class="rst-content">
            {% endif %}
            {% include "breadcrumbs.html" %}
            <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
            {%- block document %}
            <div itemprop="articleBody">
                {% block body %}{% endblock %}
            </div>
            {% if self.comments()|trim %}
            <div class="articleComments">
                {% block comments %}{% endblock %}
            </div>
            {% endif%}
            </div>
            {%- endblock %}
            {% include "footer.html" %}
            </div>
        {%- endblock %}
        </div>

        </section>

    </div>
    <!-- Newsletter Banner -->
    <div role="banner" id="newsletter-banner">
      <span id="newsletter-subscribe-button" role="button">Subscribe</span>&nbsp;to our newsletter to receive updates about new features.
      <div id="newsletter-banner-close-button" role="button">X</div>
    </div>
    <!-- Newsletter Modal -->
    <dialog id="newsletter-modal">
      <div id="newsletter-header">
        <img id="newsletter-logo" src="{{ pathto('_static/img/cellxGene-newsletter-logo.svg', 1) }}" />
        <div id="newsletter-close-button" role="button">X</div>
      </div>
      <div id="newsletter-content">
        <div id="newsletter-callout">Join Our Newsletter</div>
        <div id="newsletter-description">Get a quarterly email with the latest CELLxGENE features and data.</div>
        <!-- HubSpot Form target -->
        <div id="newsletter-form-container"></div>
      </div>

      <div id="newsletter-footnote">Unsubscribe at any time.</div>
    </dialog>
    
  {% include "versions.html" %}

    <script>
    // (thuang): 30 days
    const NEWSLETTER_BANNER_DISMISSED_TTL_MS = 30 * 24 * 60 * 60 * 1000;
    const NEWSLETTER_BANNER_DISMISSED_KEY = "newsletterBannerDismissed"

    var script = document.createElement('script');
    script.src = 'https://js.hsforms.net/forms/v2.js';
    script.defer = true;
    document.head.appendChild(script);

    // Run the code once the script is loaded
    script.onload = async function() {
      await hbspt.forms.create({
        region: "na1",
        portalId: "7272273",
        formId: "eb65b811-0451-414d-8304-7b9b6f468ce5",
        target: '#newsletter-form-container',
        onFormReady() {
          // get element by type "email"
          const emailInput = document.querySelector('#email-eb65b811-0451-414d-8304-7b9b6f468ce5');
          emailInput.setAttribute('placeholder', 'Enter email address');

          // remove the label element for emailInput
          const emailLabel = document.querySelector('#label-email-eb65b811-0451-414d-8304-7b9b6f468ce5');
          emailLabel.remove();
        },
        submitText: 'Subscribe',
      });
    };

    checkNewsletterBanner();

    document.querySelector('#newsletter-banner-close-button').addEventListener('click', () => {
      document.querySelector('#newsletter-banner').remove();
      localStorage.setItem(NEWSLETTER_BANNER_DISMISSED_KEY, Date.now());
    });

    const modal = document.querySelector('#newsletter-modal');

    document.querySelector('#newsletter-subscribe-button').addEventListener('click', () => {
      modal.showModal();
    });

    document.querySelector('#newsletter-close-button').addEventListener('click', () => {
      modal.close();
    });

    function checkNewsletterBanner() {
      /**
       * (thuang): Use LocalStorage to store dismissed state for 30 days
       * NOTE: Currently Census doc page doesn't share the same domain as the main site,
       * so dismissing the banner on the main site won't dismiss it on the Census doc page.
       * And vice versa.
       */
      const newsletterBannerDismissed = localStorage.getItem('newsletterBannerDismissed');

      if (newsletterBannerDismissed) {
        return;
      }

      if (newsletterBannerDismissed && Date.now() - newsletterBannerDismissed > NEWSLETTER_BANNER_DISMISSED_TTL_MS) {
        localStorage.removeItem(NEWSLETTER_BANNER_DISMISSED_KEY);
      }

      const newsletterBanner = document.querySelector('#newsletter-banner');

      if (!newsletterBannerDismissed) {
        newsletterBanner.style.display = 'flex';
      }
    }
  </script>
  {# Do not conflict with RTD insertion of analytics script #}
  {% if not READTHEDOCS %}
    {% if theme_analytics_id %}
    <!-- Theme Analytics -->
    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', '{{ theme_analytics_id }}', 'auto');
    ga('send', 'pageview');
    </script>
    <!-- HubSpot doNotTrack -->
    <script>
      var _hsq = ( window._hsq = window._hsq || []) ;
      _hsq.push(["doNotTrack"]);
    </script>
    {% endif %}
  {% endif %}

  {%- block footer %} {% endblock %}

</body>
</html>
