/**
 * Copyright 2023
 * @license , see License.md for full text.
 */
import{html as t,css as e}from"../../../lit/index.js";import{HAXCMSLitElementTheme as i}from"../../haxcms-elements/lib/core/HAXCMSLitElementTheme.js";import{HAXCMSRememberRoute as s}from"../../haxcms-elements/lib/core/utils/HAXCMSRememberRoute.js";import{HAXCMSThemeParts as o}from"../../haxcms-elements/lib/core/utils/HAXCMSThemeParts.js";import{store as r}from"../../haxcms-elements/lib/core/haxcms-site-store.js";import"../../haxcms-elements/lib/ui-components/navigation/site-menu.js";import"../../haxcms-elements/lib/ui-components/active-item/site-active-title.js";import"../../haxcms-elements/lib/ui-components/navigation/site-menu-button.js";import"../../scroll-button/scroll-button.js";import{autorun as n,toJS as l}from"../../../mobx/dist/mobx.esm.js";const a=new URL("./assets/SKATER.gif",import.meta.url).href;class TerribleBestThemes extends(s(o(i))){constructor(){super(),this.__disposer=[],n((t=>{this.activeManifestIndex=l(r.activeManifestIndex),this.__disposer.push(t)})),globalThis.document.body.style.backgroundColor="#e6fbff"}static get styles(){let t=[];return super.styles&&(t=super.styles),[t,e`
        :host {
          display: block;
        }
        table {
          padding: 25px 10vw;
        }
        site-menu {
          --site-menu-active-color: navy;
          --site-menu-item-active-item-color: white;
          --map-menu-item-a-active-color: navy;
          --map-menu-item-a-active-background-color: white;
        }
        scroll-button {
          position: fixed;
          bottom: 0;
          --simple-icon-height: 100px;
          --simple-icon-width: 100px;
          right: 16px;
          color: navy;
          --scroll-button-color: navy;
          --scroll-button-background-color: white;
          --scroll-button-tooltip-background-color: white;
          --scroll-button-tooltip-color: navy;
        }
      `]}render(){return t`
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
          <tr valign="top">
            <td style="background-image:url('${a}')">
              <img src="${a}" width="68" height="72" border="0" alt="" />
            </td>
            <td align="center">
              <main id="contentcontainer">
                <site-active-title></site-active-title>
                <section id="slot">
                  <slot></slot>
                </section>
              </main>
            </td>
            <td style="background-image:url('${a}')">
              <img src="${a}" width="68" height="72" border="0" alt="" />
            </td>
          </tr>
          <tr>
            <td style="background-image:url('${a}')"></td>
            <td align="center">
              <site-menu-button
                type="prev"
                position="right"
                class="navigation"
              ></site-menu-button>
              <site-menu-button
                type="next"
                position="left"
                class="navigation"
              ></site-menu-button>
              <site-menu></site-menu>
            </td>
            <td style="background-image:url('${a}')"></td>
          </tr>
        </tbody>
      </table>
      <scroll-button></scroll-button>
    `}static get tag(){return"terrible-best-themes"}firstUpdated(t){super.firstUpdated&&super.firstUpdated(t)}disconnectedCallback(){for(var t in this.__disposer)this.__disposer[t].dispose();super.disconnectedCallback()}}customElements.define(TerribleBestThemes.tag,TerribleBestThemes);export{TerribleBestThemes};