import{html as t,css as e,LitElement as o}from"../../../lit/index.js";import{store as r}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 n}from"../../../mobx/dist/mobx.esm.js";import"./course-intro-header.js";import"./course-intro-lesson-plans.js";export class CourseIntro extends o{static get tag(){return"course-intro"}static get styles(){return[e`
        :host {
          display: flex;
          flex-direction: column;
        }
        course-intro-footer {
          display: flex;
          justify-content: space-between;
          background: #000;
          padding: var(--ddd-spacing-6);
          min-height: 300px;
          align-items: center;
        }
      `]}static get properties(){return{color:{type:String}}}constructor(){super(),this.color="",i((()=>{const t=n(r.manifest);t&&t.metadata&&t.metadata.theme&&t.metadata.theme.variables&&(this.color=t.metadata.theme.variables.hexCode)}))}render(){return t`
      <course-intro-header part="course-intro-header">
        <div slot="header-left">
          <slot name="header-left"></slot>
        </div>
        <div slot="outline-title">
          <slot name="outline-title"></slot>
        </div>
      </course-intro-header>
      <course-intro-lesson-plans
        part="course-intro-lesson-plans"
      ></course-intro-lesson-plans>
      <course-intro-footer
        part="course-intro-footer"
        style="border-top: 3px solid ${this.color};"
      >
        <div slot="footer-left">
          <slot name="footer-left"></slot>
        </div>
        <div slot="footer-right">
          <slot name="footer-right"></slot>
        </div>
      </course-intro-footer>
    `}}customElements.define(CourseIntro.tag,CourseIntro);