<commit_before><!-- Replacement for <catalog-element> to be compatible with analyzer -->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">

<link rel="import" href="iron-doc-element.html">
<link rel="import" href="iron-doc-namespace.html">
<link rel="import" href="iron-doc-mixin.html">

<link rel="import" href="catalog-styles.html">
<link rel="import" href="catalog-element-readme.html">
<link rel="import" href="collection-card.html">
<link rel="import" href="github-info.html">
<link rel="import" href="page-loading-behavior.html">
<link rel="import" href="lazy-block.html">

<dom-module id="catalog-element">
  <template>
    <style include="catalog-styles"></style>
    <style>
      .title {
        align-items: flex-end;
        margin-bottom: 8px;
      }

      .sidebar {
        order: 0;
        margin: 0 40px 0 0;
      }

      h1.page-title {
        margin-bottom: 0;
      }

      #github-action-group > * {
        display: flex;
        align-items: center;
        padding: 16px;
        font-weight: 600;
        cursor: pointer;
      }

      #github-action-group > *:hover {
        background: hsl(0, 0%, 98%);
      }

      #github-action-group svg {
        width: 24px;
        height: 24px;
        margin-right: 12px;
      }

      #github-view-button svg {
        fill: hsl(0, 0%, 20%);
      }

      #star-button {
        line-height: 1em;
      }

      #star-button svg {
        stroke: hsl(0, 0%, 45%);
        fill: transparent;
        cursor: pointer;
        transition: fill 150ms, stroke 50ms;
      }

      #star-button:hover svg, #star-button[starred] svg {
        fill: #f3b70b;
        stroke: #f3b70b;
      }

      #star-button > div:after {
        content: 'Requires authentication';
        display: block;
        font-weight: normal;
        color: var(--theme-blue-grey);
        font-size: 14px;
      }

      #version-select, .version-sha {
        margin-left: 8px;
        margin-bottom: 1px;
        font-size: 24px;
        line-height: 33px;
        display: inline-block;
        max-width: 200px;
        text-overflow: ellipsis;
        overflow: hidden;
        color: hsl(0, 0%, 45%);
        word-wrap: normal;
        border: none;
        background: transparent;
        font-family: 'Source Sans Pro', sans-serif;
      }

      #version-select:not([latest]) {
        color: hsl(355, 65%, 54%);
      }

      #version-select:not([latest]) option {
        color: var(--theme-black);
      }

      #version-select option[latest] {
        color: hsl(95, 38%, 37%);
      }

      #repo-desc {
        font-size: 24px;
        line-height: 24px;
        margin: 0;
      }

      /* Repo info */
      #info-dependencies {
        line-height: 32px;
      }

      #info-dependencies .owner {
        display: none;
      }

      /* Sidebar */
      .body > .sidebar > * {
        margin-bottom: 24px;
      }

      #sidebar-spinner {
        position: absolute;
        margin: 14px 0 0 20px;
        z-index: 10;
      }

      .sidebar-nav a span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 185px;
      }

      .sidebar-nav[collapse] .element-demos {
        overflow: hidden;
        display: none;
      }

      .sidebar-nav[collapse] a[active] + .element-demos {
        display: block;
      }

      .sidebar-nav a span {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .sidebar-nav a.demo-link {
        text-transform: capitalize;
      }

      .sidebar-nav a.demo-link span:empty:before {
        content: 'Demo';
      }

      .sidebar-nav a.demo-link:after, .sidebar-nav a.api-link:after, .sidebar-nav a.page-link:after {
        content: 'demo';
        text-transform: uppercase;
        font-weight: normal;
        float: right;
        color: var(--theme-blue-grey);
        font-size: 12px;
      }

      .sidebar-nav a.api-link:after {
        content: 'api';
      }

      .sidebar-nav a.page-link:after {
        content: 'doc';
      }

      collection-card {
        display: block;
      }

      collection-card:not(first-of-type) {
        margin-top: 16px;
      }

      #report-link {
        margin-top: 24px;
      }

      /* Demo frame */

      #demo-dialog {
        width: calc(100vw - 100px);
        height: calc(100vh - 100px);
        margin: 0;
        padding: 0;
      }

      #demo-frame {
        width: 100%;
        height: 100%;
        border: none;
        margin: 0;
        padding: 0;
      }

      #demo-spinner {
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 1000;
        width: 60px;
        height: 60px;
        margin-left: -30px;
        margin-top: -30px;
        --paper-spinner-stroke-width: 4px;
      }

      #close-dialog {
        width: 40px;
        height: 40px;
        position: absolute;
        left: -16px;
        top: -16px;
        background: white;
        border: 1px solid #ededed;
        border-radius: 50%;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
                  0 1px 5px 0 rgba(0, 0, 0, 0.12),
                  0 3px 1px -2px rgba(0, 0, 0, 0.2);
      }

      #close-dialog svg {
        height: 20px;
        width: 20px;
        color: hsl(0, 0%, 40%);
      }

      @media (max-width: 500px) {
        .title {
          margin-left: 16px;
          display: flex;
        }

        .sidebar {
          margin: 0 16px;
        }

        h1.page-title {
          margin-left: 0;
          margin-bottom: -4px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          max-width: calc(100% - 120px);
        }

        #demo-dialog {
          position: absolute;
          top: 70px;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          height: calc(100vh - 70px);
        }

        .sidebar-nav a {
          border: 0;
          background: inherit;
        }

        #close-dialog {
          left: calc(50% - 25px);
          top: -60px;
          width: 50px;
          height: 50px;
        }

        #demo-frame {
          margin-bottom: -4px; /* This seems to prevent the page from scrolling an extra 4px */
        }
      }

      /* Doc styles */
      :host {
        --paper-font-code1: {
          font-family: var(--monospace-font);
          font-weight: 600;
        };
        --paper-font-code2: {
          font-family: var(--monospace-font);
          font-weight: 600;
        };
      }
    </style>

    <app-location route="{{routeLocation}}"></app-location>

    <iron-ajax
      id="metaAjax"
      loading="{{_metaLoading}}"
      url="[[baseUrls.api]]/api/meta/[[owner]]/[[repo]][[versionRoute]]"
      handle-as="json"
      last-response="{{data}}"
      on-response="_metaResponse"
      on-error="_metaError"></iron-ajax>

    <iron-ajax
      id="docsAjax"
      loading="{{_docsLoading}}"
      url="[[baseUrls.api]]/api/docs/[[owner]]/[[repo]][[versionRoute]]?use_analyzer_data"
      handle-as="json"
      last-response="{{docs}}"
      on-error="_docsError"
      on-response="_docsResponse"></iron-ajax>

    <iron-ajax
      id="collectionsAjax"
      url="[[baseUrls.api]]/api/collections/[[owner]]/[[repo]][[versionRoute]]"
      handle-as="json"
      last-response="{{collections}}"></iron-ajax>

    <iron-ajax
      id="pageAjax"
      loading="{{_customPageLoading}}"
      url="[[baseUrls.api]]/api/page/[[owner]]/[[repo]]/[[data.version]]/[[pagePath]]"
      handle-as="text"
      last-response="{{_customPage}}"></iron-ajax>

    <lazy-block id="block"></lazy-block>

    <div id="container" hidden$="[[_hideMainContent]]">

      <div class="title mobile-only">
        <h1 class="page-title">[[repo]]</h1>
        <div class="version-sha">[[data.version]]</div>
      </div>
      <h2 class="page-subtitle mobile-only">[[data.description]] <a title="Home page link" href="[[data.homepage]]" hidden$="[[_redundantLink(data.homepage)]]">[[data.homepage]]</a></h2>

      <div class="body">
        <!-- Repository contents sidebar -->
        <div class="sidebar">
          <github-info data="[[data]]" class="box"></github-info>

          <spinner-lite id="sidebar-spinner"></spinner-lite>

          <div class="sidebar-nav box loader" role="navigation" collapse$="[[_shouldCollapseNav(bundledElements)]]" loading$="[[!docs]]">
            <a href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]">Overview</a>

            <template is="dom-repeat" items="[[_bowerDemos]]" as="demo">
              <a class="demo-link sub-item" rel="nofollow" href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]/demo/[[demo.url]]" on-click="_demoClicked"><span>[[demo.description]]</span></a>
            </template>

            <template is="dom-repeat" items="[[dupedDemos]]" as="demo">
              <a class="demo-link sub-item" rel="nofollow" href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]/demo/[[demo.url]]" on-click="_demoClicked"><span>[[demo.description]]</span></a>
            </template>

            <template is="dom-repeat" items="[[_customPages]]" as="page">
              <a class="page-link" href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]/page/[[page.url]]"><span>[[page.description]]</span></a>
            </template>

            <template is="dom-repeat" items="[[docs.analysis.namespaces]]" as="namespace">
              <a class="api-link" href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]/namespaces/[[namespace.name]]"><span>[[namespace.name]]</span></a>
            </template>

            <template is="dom-repeat" items="[[bundledElements]]" as="element">
              <a class="api-link" href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]/elements/[[element.tagname]]"><span>&lt;[[element.tagname]]&gt;</span></a>

              <div class="element-demos" role="navigation" aria-label$="[[element.tagname]] demos">
                <template is="dom-repeat" items="[[element.demos]]" as="demo">
                  <a class="demo-link sub-item" rel="nofollow" href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]/demo/[[demo.url]]" on-click="_demoClicked"><span>[[demo.description]]</span></a>
                </template>
              </div>
            </template>

            <template is="dom-repeat" items="[[bundledBehaviors]]" as="behavior">
              <a class="api-link" href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]/mixins/[[behavior.name]]"><span>[[behavior.name]]</span></a>

              <div class="element-demos">
                <template is="dom-repeat" items="[[behavior.demos]]" as="demo">
                  <a class="demo-link sub-item" rel="nofollow" href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]/demo/[[demo.url]]" on-click="_demoClicked"><span>[[demo.description]]</span></a>
                </template>
              </div>
            </template>
          </div>

          <div id="github-action-group" class="box">
            <a id="github-view-button" href="https://github.com/[[owner]]/[[repo]]" target="_blank">
              <svg viewBox="0 0 100 100"><use xlink:href="/sprite.octicons.svg#mark-github"></use></svg>
              <div>View on GitHub</div>
            </a>
            <a id="star-button" on-click="_authenticateStar" title="Star this repository" starred$="[[_repoStarred]]">
              <svg viewBox="0 0 100 100">
                <use xlink:href="/sprite.octicons.svg#star"></use>
              </svg>
              <div><div>Star on GitHub</div></div>
            </a>
          </div>

          <div class="loader" loading$="[[!docs]]" hidden$="[[!collections.count]]">
            <template is="dom-if" if="[[collections.count]]">
              <h1>In [[collections.count]] collection[[_s(collections.count)]]</h1>

              <div class="horizontal-scroll">
                <template is="dom-repeat" items="[[collections.results]]">
                  <collection-card class="box" data="[[item]]"></collection-card>
                </template>
              </div>
            </template>
          </div>

          <div class="loader" loading$="[[!docs]]">
            <template is="dom-if" if="[[_dependencies(data)]]">
              <div id="info-dependencies" class="desktop-only">
                <h1>Dependencies</h1>
                <template is="dom-repeat" items="[[_dependencies(data)]]">
                  <div class="dependency">
                    <a href="/element/[[item.owner]]/[[item.repo]]">
                      <span class="owner">[[item.owner]]/</span><span class="repo">[[item.repo]]</span>
                    </a>
                    <span>[[item.version]]</span>
                  </div>
                </template>
              </div>
            </template>
          </div>
        </div>

        <!-- Main content pane -->
        <div id="main-content" class="main-content">
          <div class="title desktop-only">
            <h1 class="page-title">[[repo]]</h1>
            <template is="dom-if" if="[[!_contains(data.versions, data.version)]]">
              <div class="version-sha">[[data.version]]</div>
            </template>
            <template is="dom-if" if="[[_contains(data.versions, data.version)]]">
              <select id="version-select" on-change="_versionChanged" latest$="[[_equal(data.version, data.default_version)]]">
                <template is="dom-repeat" items="[[_reverse(data.versions)]]">
                  <option selected$="[[_equal(item, data.version)]]" latest$="[[_equal(item, data.default_version)]]">[[item]]</option>
                </template>
              </select>
            </template>
          </div>
          <h2 class="page-subtitle desktop-only">[[data.description]] <a title="Home page link" href="[[data.homepage]]" hidden$="[[_redundantLink(data.homepage)]]">[[data.homepage]]</a></h2>

          <h1 hidden="[[subElement]]">[[_pageTitle(_customPages, pagePath)]]</h1>
          <template is="dom-if" if="[[data]]">
            <catalog-element-readme editing="[[_shouldShowEditor(queryParams, route.prefix)]]" data="[[data]]" docs-pending="[[!docs]]" readme="[[data.readme]]" base-urls="[[baseUrls]]" hidden="[[_or(subElement, pagePath)]]"></catalog-element-readme>
          </template>
          <template is="dom-if" if="[[pagePath]]">
            <catalog-element-readme editing="[[_shouldShowEditor(queryParams, route.prefix)]]" data="[[data]]" docs-pending="[[!docs]]" readme="[[_customPage]]" base-urls="[[baseUrls]]" class="loader" loading="_customPageLoading"></catalog-element-readme>
          </template>

          <div hidden="[[!subElement]]">
            <template is="dom-if" if="[[_equal(_descriptorType,'namespaces')]]" restamp="true">
              <iron-doc-namespace
                  base-href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]"
                  descriptor="[[_descriptor]]"
                  root-namespace="[[rootNamespace]]">
              </iron-doc-namespace>
            </template>
            <template is="dom-if" if="[[_equal(_descriptorType,'elements')]]" restamp="true"><commit_msg>Fix custom pages on analyzer pages (#971)<commit_after><!-- Replacement for <catalog-element> to be compatible with analyzer -->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">

<link rel="import" href="iron-doc-element.html">
<link rel="import" href="iron-doc-namespace.html">
<link rel="import" href="iron-doc-mixin.html">

<link rel="import" href="catalog-styles.html">
<link rel="import" href="catalog-element-readme.html">
<link rel="import" href="collection-card.html">
<link rel="import" href="github-info.html">
<link rel="import" href="page-loading-behavior.html">
<link rel="import" href="lazy-block.html">

<dom-module id="catalog-element">
  <template>
    <style include="catalog-styles"></style>
    <style>
      .title {
        align-items: flex-end;
        margin-bottom: 8px;
      }

      .sidebar {
        order: 0;
        margin: 0 40px 0 0;
      }

      h1.page-title {
        margin-bottom: 0;
      }

      #github-action-group > * {
        display: flex;
        align-items: center;
        padding: 16px;
        font-weight: 600;
        cursor: pointer;
      }

      #github-action-group > *:hover {
        background: hsl(0, 0%, 98%);
      }

      #github-action-group svg {
        width: 24px;
        height: 24px;
        margin-right: 12px;
      }

      #github-view-button svg {
        fill: hsl(0, 0%, 20%);
      }

      #star-button {
        line-height: 1em;
      }

      #star-button svg {
        stroke: hsl(0, 0%, 45%);
        fill: transparent;
        cursor: pointer;
        transition: fill 150ms, stroke 50ms;
      }

      #star-button:hover svg, #star-button[starred] svg {
        fill: #f3b70b;
        stroke: #f3b70b;
      }

      #star-button > div:after {
        content: 'Requires authentication';
        display: block;
        font-weight: normal;
        color: var(--theme-blue-grey);
        font-size: 14px;
      }

      #version-select, .version-sha {
        margin-left: 8px;
        margin-bottom: 1px;
        font-size: 24px;
        line-height: 33px;
        display: inline-block;
        max-width: 200px;
        text-overflow: ellipsis;
        overflow: hidden;
        color: hsl(0, 0%, 45%);
        word-wrap: normal;
        border: none;
        background: transparent;
        font-family: 'Source Sans Pro', sans-serif;
      }

      #version-select:not([latest]) {
        color: hsl(355, 65%, 54%);
      }

      #version-select:not([latest]) option {
        color: var(--theme-black);
      }

      #version-select option[latest] {
        color: hsl(95, 38%, 37%);
      }

      #repo-desc {
        font-size: 24px;
        line-height: 24px;
        margin: 0;
      }

      /* Repo info */
      #info-dependencies {
        line-height: 32px;
      }

      #info-dependencies .owner {
        display: none;
      }

      /* Sidebar */
      .body > .sidebar > * {
        margin-bottom: 24px;
      }

      #sidebar-spinner {
        position: absolute;
        margin: 14px 0 0 20px;
        z-index: 10;
      }

      .sidebar-nav a span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 185px;
      }

      .sidebar-nav[collapse] .element-demos {
        overflow: hidden;
        display: none;
      }

      .sidebar-nav[collapse] a[active] + .element-demos {
        display: block;
      }

      .sidebar-nav a span {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .sidebar-nav a.demo-link {
        text-transform: capitalize;
      }

      .sidebar-nav a.demo-link span:empty:before {
        content: 'Demo';
      }

      .sidebar-nav a.demo-link:after, .sidebar-nav a.api-link:after, .sidebar-nav a.page-link:after {
        content: 'demo';
        text-transform: uppercase;
        font-weight: normal;
        float: right;
        color: var(--theme-blue-grey);
        font-size: 12px;
      }

      .sidebar-nav a.api-link:after {
        content: 'api';
      }

      .sidebar-nav a.page-link:after {
        content: 'doc';
      }

      collection-card {
        display: block;
      }

      collection-card:not(first-of-type) {
        margin-top: 16px;
      }

      #report-link {
        margin-top: 24px;
      }

      /* Demo frame */

      #demo-dialog {
        width: calc(100vw - 100px);
        height: calc(100vh - 100px);
        margin: 0;
        padding: 0;
      }

      #demo-frame {
        width: 100%;
        height: 100%;
        border: none;
        margin: 0;
        padding: 0;
      }

      #demo-spinner {
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 1000;
        width: 60px;
        height: 60px;
        margin-left: -30px;
        margin-top: -30px;
        --paper-spinner-stroke-width: 4px;
      }

      #close-dialog {
        width: 40px;
        height: 40px;
        position: absolute;
        left: -16px;
        top: -16px;
        background: white;
        border: 1px solid #ededed;
        border-radius: 50%;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
                  0 1px 5px 0 rgba(0, 0, 0, 0.12),
                  0 3px 1px -2px rgba(0, 0, 0, 0.2);
      }

      #close-dialog svg {
        height: 20px;
        width: 20px;
        color: hsl(0, 0%, 40%);
      }

      @media (max-width: 500px) {
        .title {
          margin-left: 16px;
          display: flex;
        }

        .sidebar {
          margin: 0 16px;
        }

        h1.page-title {
          margin-left: 0;
          margin-bottom: -4px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          max-width: calc(100% - 120px);
        }

        #demo-dialog {
          position: absolute;
          top: 70px;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          height: calc(100vh - 70px);
        }

        .sidebar-nav a {
          border: 0;
          background: inherit;
        }

        #close-dialog {
          left: calc(50% - 25px);
          top: -60px;
          width: 50px;
          height: 50px;
        }

        #demo-frame {
          margin-bottom: -4px; /* This seems to prevent the page from scrolling an extra 4px */
        }
      }

      /* Doc styles */
      :host {
        --paper-font-code1: {
          font-family: var(--monospace-font);
          font-weight: 600;
        };
        --paper-font-code2: {
          font-family: var(--monospace-font);
          font-weight: 600;
        };
      }
    </style>

    <app-location route="{{routeLocation}}"></app-location>

    <iron-ajax
      id="metaAjax"
      loading="{{_metaLoading}}"
      url="[[baseUrls.api]]/api/meta/[[owner]]/[[repo]][[versionRoute]]"
      handle-as="json"
      last-response="{{data}}"
      on-response="_metaResponse"
      on-error="_metaError"></iron-ajax>

    <iron-ajax
      id="docsAjax"
      loading="{{_docsLoading}}"
      url="[[baseUrls.api]]/api/docs/[[owner]]/[[repo]][[versionRoute]]?use_analyzer_data"
      handle-as="json"
      last-response="{{docs}}"
      on-error="_docsError"
      on-response="_docsResponse"></iron-ajax>

    <iron-ajax
      id="collectionsAjax"
      url="[[baseUrls.api]]/api/collections/[[owner]]/[[repo]][[versionRoute]]"
      handle-as="json"
      last-response="{{collections}}"></iron-ajax>

    <iron-ajax
      id="pageAjax"
      loading="{{_customPageLoading}}"
      url="[[baseUrls.api]]/api/page/[[owner]]/[[repo]]/[[data.version]]/[[pagePath]]"
      handle-as="text"
      last-response="{{_customPage}}"></iron-ajax>

    <lazy-block id="block"></lazy-block>

    <div id="container" hidden$="[[_hideMainContent]]">

      <div class="title mobile-only">
        <h1 class="page-title">[[repo]]</h1>
        <div class="version-sha">[[data.version]]</div>
      </div>
      <h2 class="page-subtitle mobile-only">[[data.description]] <a title="Home page link" href="[[data.homepage]]" hidden$="[[_redundantLink(data.homepage)]]">[[data.homepage]]</a></h2>

      <div class="body">
        <!-- Repository contents sidebar -->
        <div class="sidebar">
          <github-info data="[[data]]" class="box"></github-info>

          <spinner-lite id="sidebar-spinner"></spinner-lite>

          <div class="sidebar-nav box loader" role="navigation" collapse$="[[_shouldCollapseNav(bundledElements)]]" loading$="[[!docs]]">
            <a href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]">Overview</a>

            <template is="dom-repeat" items="[[_bowerDemos]]" as="demo">
              <a class="demo-link sub-item" rel="nofollow" href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]/demo/[[demo.url]]" on-click="_demoClicked"><span>[[demo.description]]</span></a>
            </template>

            <template is="dom-repeat" items="[[dupedDemos]]" as="demo">
              <a class="demo-link sub-item" rel="nofollow" href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]/demo/[[demo.url]]" on-click="_demoClicked"><span>[[demo.description]]</span></a>
            </template>

            <template is="dom-repeat" items="[[_customPages]]" as="page">
              <a class="page-link" href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]/page/[[page.url]]"><span>[[page.description]]</span></a>
            </template>

            <template is="dom-repeat" items="[[docs.analysis.namespaces]]" as="namespace">
              <a class="api-link" href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]/namespaces/[[namespace.name]]"><span>[[namespace.name]]</span></a>
            </template>

            <template is="dom-repeat" items="[[bundledElements]]" as="element">
              <a class="api-link" href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]/elements/[[element.tagname]]"><span>&lt;[[element.tagname]]&gt;</span></a>

              <div class="element-demos" role="navigation" aria-label$="[[element.tagname]] demos">
                <template is="dom-repeat" items="[[element.demos]]" as="demo">
                  <a class="demo-link sub-item" rel="nofollow" href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]/demo/[[demo.url]]" on-click="_demoClicked"><span>[[demo.description]]</span></a>
                </template>
              </div>
            </template>

            <template is="dom-repeat" items="[[bundledBehaviors]]" as="behavior">
              <a class="api-link" href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]/mixins/[[behavior.name]]"><span>[[behavior.name]]</span></a>

              <div class="element-demos">
                <template is="dom-repeat" items="[[behavior.demos]]" as="demo">
                  <a class="demo-link sub-item" rel="nofollow" href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]/demo/[[demo.url]]" on-click="_demoClicked"><span>[[demo.description]]</span></a>
                </template>
              </div>
            </template>
          </div>

          <div id="github-action-group" class="box">
            <a id="github-view-button" href="https://github.com/[[owner]]/[[repo]]" target="_blank">
              <svg viewBox="0 0 100 100"><use xlink:href="/sprite.octicons.svg#mark-github"></use></svg>
              <div>View on GitHub</div>
            </a>
            <a id="star-button" on-click="_authenticateStar" title="Star this repository" starred$="[[_repoStarred]]">
              <svg viewBox="0 0 100 100">
                <use xlink:href="/sprite.octicons.svg#star"></use>
              </svg>
              <div><div>Star on GitHub</div></div>
            </a>
          </div>

          <div class="loader" loading$="[[!docs]]" hidden$="[[!collections.count]]">
            <template is="dom-if" if="[[collections.count]]">
              <h1>In [[collections.count]] collection[[_s(collections.count)]]</h1>

              <div class="horizontal-scroll">
                <template is="dom-repeat" items="[[collections.results]]">
                  <collection-card class="box" data="[[item]]"></collection-card>
                </template>
              </div>
            </template>
          </div>

          <div class="loader" loading$="[[!docs]]">
            <template is="dom-if" if="[[_dependencies(data)]]">
              <div id="info-dependencies" class="desktop-only">
                <h1>Dependencies</h1>
                <template is="dom-repeat" items="[[_dependencies(data)]]">
                  <div class="dependency">
                    <a href="/element/[[item.owner]]/[[item.repo]]">
                      <span class="owner">[[item.owner]]/</span><span class="repo">[[item.repo]]</span>
                    </a>
                    <span>[[item.version]]</span>
                  </div>
                </template>
              </div>
            </template>
          </div>
        </div>

        <!-- Main content pane -->
        <div id="main-content" class="main-content">
          <div class="title desktop-only">
            <h1 class="page-title">[[repo]]</h1>
            <template is="dom-if" if="[[!_contains(data.versions, data.version)]]">
              <div class="version-sha">[[data.version]]</div>
            </template>
            <template is="dom-if" if="[[_contains(data.versions, data.version)]]">
              <select id="version-select" on-change="_versionChanged" latest$="[[_equal(data.version, data.default_version)]]">
                <template is="dom-repeat" items="[[_reverse(data.versions)]]">
                  <option selected$="[[_equal(item, data.version)]]" latest$="[[_equal(item, data.default_version)]]">[[item]]</option>
                </template>
              </select>
            </template>
          </div>
          <h2 class="page-subtitle desktop-only">[[data.description]] <a title="Home page link" href="[[data.homepage]]" hidden$="[[_redundantLink(data.homepage)]]">[[data.homepage]]</a></h2>

          <h1 hidden="[[subElement]]">[[_pageTitle(_customPages, pagePath)]]</h1>
          <catalog-element-readme editing="[[_shouldShowEditor(queryParams, route.prefix)]]" data="[[data]]" docs-pending="[[!docs]]" readme="[[data.readme]]" base-urls="[[baseUrls]]" hidden="[[_or(subElement, pagePath)]]"></catalog-element-readme>
          <template is="dom-if" if="[[pagePath]]">
            <catalog-element-readme data="[[data]]" docs-pending="[[!docs]]" readme="[[_customPage]]" base-urls="[[baseUrls]]" class="loader" loading="[[_customPageLoading]]"></catalog-element-readme>
          </template>

          <div hidden="[[!subElement]]">
            <template is="dom-if" if="[[_equal(_descriptorType,'namespaces')]]" restamp="true">
              <iron-doc-namespace
                  base-href="[[route.prefix]]/[[owner]]/[[repo]][[versionRoute]]"
                  descriptor="[[_descriptor]]"
                  root-namespace="[[rootNamespace]]">
              </iron-doc-namespace>
            </template>
            <template is="dom-if" if="[[_equal(_descriptorType,'elements')]]" restamp="true">
{'fraction_non_alphanumeric': 0.18482039397450753, 'fraction_numerical': 0.017542165572293034, 'mean_word_length': 2.073095944609298, 'pattern_counts': {'":': 0, '<': 397, '<?xml version=': 0, '>': 407, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6527129', 'n_tokens_mistral': 10351, 'n_tokens_neox': 9615, 'n_words': 1653}