import{html as t,css as e}from"../../../lit/index.js";import{SimpleColors as i}from"../../simple-colors/simple-colors.js";import{store as s}from"../../haxcms-elements/lib/core/haxcms-site-store.js";import{varExists as o}from"../../utils/utils.js";import{autorun as n,toJS as a}from"../../../mobx/dist/mobx.esm.js";import"../../../@polymer/polymer/lib/elements/custom-style.js";class SimpleBlogFooter extends i{static get styles(){return[super.styles,e`
        :host {
          display: block;
          width: 100%;
          position: relative;
          overflow: hidden;
          opacity: 1;
          transition: 0.2s opacity linear;
        }
        :host([edit-mode]) {
          pointer-events: none;
          opacity: 0.2;
        }
        :host *[hidden] {
          display: none;
        }
        .background-closer-image {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          text-indent: -9999px;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
          opacity: 0.4;
          transition: all 0.6s linear;
        }
        .background-closer-image-wrap {
          position: absolute;
          background-color: rgba(0, 0, 0, 0.9);
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          text-indent: -9999px;
          transition: all 0.6s linear;
          opacity: 1;
        }
        :host([active]) .background-closer-image {
          opacity: 0.8;
        }
        :host([active]) .background-closer-image-wrap {
          background-color: rgba(0, 0, 0, 0.2);
        }
        .inner {
          width: 100%;
          position: relative;
          z-index: 99;
          max-width: 640px;
          padding: 32px 0;
          text-align: center;
          margin: 0 auto;
        }
        .blog-title {
          margin: 0;
          padding: 0 0 10px;
          font-size: 50px;
          text-align: center;
          font-weight: 700;
          letter-spacing: -2px;
          outline: 0;
          line-height: 50px;
          word-break: break-word;
          color: white;
          text-shadow:
            0 1px 16px rgba(0, 0, 0, 0.5),
            0 0 1px rgba(0, 0, 0, 0.5);
        }
        .blog-description {
          margin: 0 0 50px;
          padding: 0 32px;
          font-size: 18px;
          line-height: 1.5;
          color: white;
          text-align: center;
          font-weight: 400;
          text-shadow:
            0 1px 16px rgba(0, 0, 0, 0.5),
            0 0 1px rgba(0, 0, 0, 0.5);
        }
        button,
        site-menu-button:not([disabled]) {
          display: block;
          text-align: center;
          letter-spacing: -0.32px;
          font-size: 15px;
          font-weight: 400;
          font-style: normal;
          text-decoration: none;
          cursor: pointer;
          height: 44px;
          background-color: var(--haxcms-color, red);
          color: black;
          box-sizing: border-box;
          border-radius: none;
          line-height: 44px;
          margin: 16px 0;
          padding: 0;
        }
        button:focus,
        button:active,
        button:hover,
        site-menu-button:focus,
        site-menu-button:active,
        site-menu-button:hover {
          outline: 2px solid var(--haxcms-color);
          outline-offset: 8px;
        }
        simple-datetime {
          letter-spacing: -0.32px;
          font-weight: 300;
          font-style: normal;
          font-size: 16px;
          line-height: 1.3;
          color: black;
          display: inline-flex;
        }
      `]}static get tag(){return"simple-blog-footer"}render(){return t`
      <custom-style>
        <style>
          button,
          site-menu-button:not([disabled]) {
            --site-menu-button-button: {
              height: 44px;
              width: 100%;
            };
          }
        </style>
      </custom-style>
      <div class="background-closer-image-wrap">
        <div
          class="background-closer-image"
          style="background-image: url(${o(this.manifest,"metadata.theme.variables.image")?this.manifest.metadata.theme.variables.image:""})"
        ></div>
      </div>
      <div class="inner">
        <site-menu-button type="prev" position="right">
          <simple-datetime
            format="M jS"
            .timestamp="${this.prevChanged}"
            unix
            slot="suffix"
          >
          </simple-datetime>
          <span slot="suffix">${this.prevTitle}</span>
        </site-menu-button>
        <site-menu-button type="next" position="right">
          <simple-datetime
            format="M jS"
            .timestamp="${this.nextChanged}"
            unix
            slot="prefix"
          ></simple-datetime>
          <span slot="prefix">${this.nextTitle}</span>
        </site-menu-button>
        <button raised @click="${this._backButtonTap}">Back to list</button>
        <h2 class="blog-title">
          ${o(this.manifest,"title")?this.manifest.title:""}
        </h2>
        <h3 class="blog-description">
          ${o(this.manifest,"description")?this.manifest.description:""}
        </h3>
      </div>
    `}updated(t){t.forEach(((t,e)=>{"activeManifestIndex"==e&&this._activeManifestIndexChanged(this[e],t)}))}static get properties(){return{...super.properties,activeManifestIndex:{type:Number,attribute:"active-manifest-index"},manifest:{type:Object},editMode:{type:Boolean,reflect:!0,attribute:"edit-mode"},prevChanged:{type:String},nextChanged:{type:String},prevTitle:{type:String},nextTitle:{type:String}}}_activeManifestIndexChanged(t){this.manifest&&(this.manifest.items[t-1]?(this.prevTitle=" - "+this.manifest.items[t-1].title,this.prevChanged=this.manifest.items[t-1].metadata.created):(this.prevTitle="",this.prevChanged=""),this.manifest.items[t+1]?(this.nextTitle=" - "+this.manifest.items[t+1].title,this.nextChanged=this.manifest.items[t+1].metadata.created):(this.nextTitle="",this.nextChanged=""))}constructor(){super(),this.prevTitle="",this.prevChanged="",this.nextTitle="",this.nextChanged="",import("../../haxcms-elements/lib/ui-components/navigation/site-menu-button.js"),import("../../simple-datetime/simple-datetime.js")}connectedCallback(){super.connectedCallback(),this.__disposer=[],n((t=>{if(this.manifest=a(s.routerManifest),o(this.manifest,"title")&&(globalThis.document.title=this.manifest.title),o(this.manifest,"metadata.theme.variables.cssVariable")){let t=this.manifest.metadata.theme.variables.cssVariable.replace("--simple-colors-default-theme-","").split("-");t.pop(),this.accentColor=t.join("-")}this.__disposer.push(t)})),n((t=>{this.activeManifestIndex=a(s.activeManifestIndex),this.__disposer.push(t)})),n((t=>{this.editMode=a(s.editMode),this.__disposer.push(t)}))}disconnectedCallback(){for(var t in this.__disposer)this.__disposer[t].dispose();super.disconnectedCallback()}_backButtonTap(t){globalThis.history.pushState(null,null,s.location.baseUrl),globalThis.dispatchEvent(new PopStateEvent("popstate"))}}customElements.define(SimpleBlogFooter.tag,SimpleBlogFooter);export{SimpleBlogFooter};