></button>
        </div>
        <div class="unverified sync-state">
          <div class="syncIllustrationIssue"></div>
          <p
            class="instructions"
            data-l10n-id="synced-tabs-sidebar-unverified"
          ></p>
          <button
            class="button sync-prefs"
            data-l10n-id="synced-tabs-sidebar-open-settings"
          ></button>
        </div>
        <div class="singleDeviceInfo sync-state">
          <div class="syncIllustrationIssue"></div>
          <p
            class="instructions"
            data-l10n-id="synced-tabs-sidebar-noclients-subtitle"
          ></p>
          <button
            class="button connect-device"
            data-l10n-id="synced-tabs-sidebar-connect-another-device"
          ></button>
        </div>
        <div class="tabs-disabled sync-state">
          <div class="syncIllustrationIssue"></div>
          <p
            class="instructions"
            data-l10n-id="synced-tabs-sidebar-tabsnotsyncing"
          ></p>
          <button
            class="button sync-prefs"
            data-l10n-id="synced-tabs-sidebar-open-settings"
          ></button>
        </div>
      </div>
    </template>

    <div class="content-container">
      <!-- the non-scrollable header -->
      <div class="content-header">
        <div class="sidebar-search-container tabs-container sync-state">
          <moz-input-search
            class="tabsFilter"
            tabindex="1"
            data-l10n-id="synced-tabs-sidebar-search"
            data-l10n-attrs="placeholder"
          />
        </div>
      </div>
      <!-- the scrollable content area where our templates are inserted -->
      <div
        id="template-container"
        class="content-scrollable"
        tabindex="-1"
      ></div>
    </div>
  </body>
</html>
PK