import{html as t,css as e}from"../../../lit/index.js";import{store as n}from"../../haxcms-elements/lib/core/haxcms-site-store.js";import{DDD as s}from"../../d-d-d/d-d-d.js";import{autorun as i,toJS as r}from"../../../mobx/dist/mobx.esm.js";import"./course-intro-lesson-plan.js";class CourseIntroLessonPlans extends s{static get properties(){return{...super.properties,items:{type:Array}}}constructor(){super(),this.items=[],i((()=>{n.routerManifest&&n.routerManifest.items&&this._itemsChanged(r(n.routerManifest.items))}))}_itemsChanged(t){this.items=[],this.items=t.filter((t=>"introduction"!==t.slug&&null===t.parent))}static get styles(){return[e`
        :host {
          display: block;
          background-color: var(
            --course-intro-header--header--background-color,
            #1e1e1e
          );
          padding-bottom: 40px;
          min-height: 60vh;
          font-family: var(--ddd-font-navigation);
          font-weight: var(--ddd-font-weight-light);
        }

        #plans-container {
          background-color: light-dark(white, black);
          margin: 0 auto;
        }

        :host([is-safari]) #plans-container {
          background-color: white;
        }

        @media screen and (min-width: 320px) {
          #plans-container {
            max-width: 400px;
          }
        }

        @media screen and (min-width: 620px) {
          #plans-container {
            max-width: 500px;
          }
        }

        @media screen and (min-width: 920px) {
          #plans-container {
            max-width: 700px;
          }
        }

        @media screen and (min-width: 1220px) {
          #plans-container {
            max-width: 900px;
          }
        }
      `]}render(){return t`
      <div id="plans-container">
        ${this.items.map((e=>t`<course-intro-lesson-plan
              title="${e.title}"
              link=${e.slug}
            ></course-intro-lesson-plan>`))}
      </div>
    `}static get tag(){return"course-intro-lesson-plans"}}customElements.define(CourseIntroLessonPlans.tag,CourseIntroLessonPlans);