'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-bb72bde3.js');
require('./common-a086c7ac.js');
const DateTime = require('./DateTime-36af50a9.js');
require('./IntersectionHelper-16aa1ea1.js');
const Heading = require('./Heading-f7728cfd.js');
const Paragraph = require('./Paragraph-9df20a65.js');
const ResponsiveContainer = require('./ResponsiveContainer-6a3dfdfc.js');
const ThemeProvider = require('./ThemeProvider-26877e1d.js');
require('./_commonjsHelpers-2e75ad90.js');
const PrismicResponsiveImage = require('./PrismicResponsiveImage-acfbf477.js');
require('./slugify-28491f0b.js');
const prismic = require('./prismic-b998d186.js');

const resourceWebinarCss = ".sc-resource-webinar-h{display:block}.past.sc-resource-webinar-h .heading.sc-resource-webinar{text-align:center;margin-block-start:89px}.past.sc-resource-webinar-h .heading.sc-resource-webinar .meta.sc-resource-webinar{margin-block-end:var(--space-5)}.past.sc-resource-webinar-h .heading.sc-resource-webinar .ui-heading-1.sc-resource-webinar{margin-block-end:var(--space-5);color:#010610}.past.sc-resource-webinar-h .heading.sc-resource-webinar .hosts.sc-resource-webinar{display:flex;flex-direction:column;align-items:center;margin-block-end:var(--space-9)}.past.sc-resource-webinar-h .heading.sc-resource-webinar .hosts.sc-resource-webinar .host.sc-resource-webinar{display:flex}.past.sc-resource-webinar-h .heading.sc-resource-webinar .hosts.sc-resource-webinar .host.sc-resource-webinar+.host.sc-resource-webinar{margin-block-start:var(--space-3)}.past.sc-resource-webinar-h .heading.sc-resource-webinar .hosts.sc-resource-webinar .host.sc-resource-webinar .avatar.sc-resource-webinar{border-radius:var(--radius-4);margin-inline-end:11px;width:28px;height:28px}.past.sc-resource-webinar-h .heading.sc-resource-webinar .hosts.sc-resource-webinar .host.sc-resource-webinar .description.sc-resource-webinar{color:#73849A}.past.sc-resource-webinar-h .video.sc-resource-webinar{position:relative;display:flex;align-items:center;justify-content:center;margin-block-end:var(--space-11)}.past.sc-resource-webinar-h .video.blured.sc-resource-webinar wistia-video.sc-resource-webinar{filter:blur(16px)}.past.sc-resource-webinar-h .video.sc-resource-webinar .overlay-form.sc-resource-webinar{border-radius:var(--radius-2);text-align:center;position:absolute;z-index:1000;background:white;padding:48px}.past.sc-resource-webinar-h .video.sc-resource-webinar .overlay-form.sc-resource-webinar .heading-group.sc-resource-webinar .ui-heading.sc-resource-webinar{margin-block-end:var(--space-3)}.past.sc-resource-webinar-h .article.sc-resource-webinar{margin-block-end:var(--space-11);max-width:672px;margin-inline-start:auto;margin-inline-end:auto}.future.sc-resource-webinar-h .landing-image.sc-resource-webinar{background:var(--c-lavender-70);width:100%;height:100%;position:absolute;z-index:-1;object-fit:cover}.future.sc-resource-webinar-h .heading-group.sc-resource-webinar{padding-block-start:var(--space-11);padding-block-end:var(--space-11);position:relative;min-height:512px;display:flex;align-items:center}.future.sc-resource-webinar-h .heading-group.sc-resource-webinar .ui-heading-1.sc-resource-webinar{max-width:704px;color:white}.future.sc-resource-webinar-h .heading-group.sc-resource-webinar .when.sc-resource-webinar{margin-block-start:var(--space-5);color:white}.future.sc-resource-webinar-h .heading-group.sc-resource-webinar .meta.sc-resource-webinar{margin-block-end:var(--space-5)}.future.sc-resource-webinar-h .heading-group.sc-resource-webinar .meta.sc-resource-webinar .type.sc-resource-webinar{color:white}.future.sc-resource-webinar-h .heading-group.sc-resource-webinar .register-button.sc-resource-webinar{background:white;color:#5061F2;margin-block-start:64px}.future.sc-resource-webinar-h .wrapper.sc-resource-webinar{display:flex;margin-block-start:var(--space-11);margin-block-end:var(--space-11)}.future.sc-resource-webinar-h .wrapper.sc-resource-webinar>*.sc-resource-webinar{flex-grow:1}.future.sc-resource-webinar-h .wrapper.sc-resource-webinar .article.sc-resource-webinar{max-width:576px}.future.sc-resource-webinar-h .wrapper.sc-resource-webinar .article.sc-resource-webinar .register-button.sc-resource-webinar{margin-block-start:var(--space-6);background:#3880FF;color:white}@media screen and (max-width: 1023px){.future.sc-resource-webinar-h .wrapper.sc-resource-webinar{flex-direction:column}.future.sc-resource-webinar-h .wrapper.sc-resource-webinar .hosts.sc-resource-webinar{margin-block-start:var(--space-11);margin-inline-start:0}}.future.sc-resource-webinar-h .hosts.sc-resource-webinar{margin-inline-start:var(--space-11)}.future.sc-resource-webinar-h .hosts.sc-resource-webinar .ui-heading.sc-resource-webinar{margin-block-end:40px}.future.sc-resource-webinar-h .hosts.sc-resource-webinar resource-author-item.sc-resource-webinar+resource-author-item.sc-resource-webinar{margin-block-start:var(--space-3)}.future.sc-resource-webinar-h resource-meta.sc-resource-webinar{--tag-color:rgba(255, 255, 255, .8)}.meta.sc-resource-webinar{display:inline-flex}.meta.sc-resource-webinar .type.sc-resource-webinar{margin-inline-end:17px}.article.sc-resource-webinar .ui-heading-2.sc-resource-webinar{margin-block-end:var(--space-3)}.article.sc-resource-webinar p.sc-resource-webinar,.article.sc-resource-webinar li.sc-resource-webinar{color:#445B78}.article.sc-resource-webinar p.sc-resource-webinar+p.sc-resource-webinar,.article.sc-resource-webinar p.sc-resource-webinar+ul.sc-resource-webinar,.article.sc-resource-webinar ul.sc-resource-webinar+p.sc-resource-webinar,.article.sc-resource-webinar ul.sc-resource-webinar+ul.sc-resource-webinar{margin-block-start:var(--space-5)}.article.sc-resource-webinar ul.sc-resource-webinar{margin-inline-start:38px}.article.sc-resource-webinar li.sc-resource-webinar{position:relative}.article.sc-resource-webinar li.sc-resource-webinar+li.sc-resource-webinar{margin-block-start:var(--space-5)}.article.sc-resource-webinar li.sc-resource-webinar::before{left:-38px;top:4px;position:absolute;content:\"\";background:var(--checkmark-path);height:20px;width:20px}.register-button.sc-resource-webinar{padding:16px 20px;font-weight:bold;text-transform:uppercase;font-size:16px;line-height:19px;letter-spacing:0.1em;border-radius:8px}site-modal.sc-resource-webinar .title.sc-resource-webinar{text-align:center}site-modal.sc-resource-webinar .title.sc-resource-webinar .ui-heading.sc-resource-webinar{margin-block-end:var(--space-3)}";

const ResourceWebinar = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.PastWebinar = () => {
      const { OverlayForm } = this;
      const data = this.prismicData;
      const videoId = data.doc.data.wistia_id;
      const pastGate = this.state.hubspotGatedPassed;
      return (index.h(ResponsiveContainer.ResponsiveContainer, null, index.h(ThemeProvider.ThemeProvider, { type: "editorial" }, index.h("section", { class: "heading" }, index.h("div", { class: "meta" }, index.h(Heading.Heading, { level: 6, class: "type" }, "Webinar"), index.h("resource-meta", { tags: data.tags, class: "tags" })), index.h(Heading.Heading, { level: 1 }, data.title), index.h("div", { class: "hosts" }, this.hosts.map(host => (index.h("div", { class: "host" }, index.h(PrismicResponsiveImage.PrismicResponsiveImage, { class: "avatar", image: host.avatar }), index.h(Paragraph.Paragraph, { class: "description | .ui-theme--base" }, host.name, ', ', host.title)))))), index.h("section", { class: `video ${!pastGate ? 'blured' : ''}` }, !this.state.hubspotGatedPassed
        ? index.h(OverlayForm, { data: data }) : '', videoId
        ? index.h("wistia-video", { videoId: videoId }) : ''), index.h("section", { class: "article" }, index.h(PrismicResponsiveImage.PrismicRichText, { richText: data.doc.data.description, leading: "prose" })))));
    };
    this.FutureWebinar = () => {
      const { RegisterButton } = this;
      const data = this.prismicData;
      const date = new Date(data.doc.data.when);
      const image = data.doc.data.landing_image;
      return (index.h(ThemeProvider.ThemeProvider, { type: "editorial" }, index.h("section", { class: "heading-group" }, image.url
        ? index.h(PrismicResponsiveImage.PrismicResponsiveImage, { class: "landing-image", image: image })
        : index.h("div", { class: "landing-image" }), index.h(ResponsiveContainer.ResponsiveContainer, null, index.h("div", { class: "heading" }, index.h("div", { class: "meta" }, index.h(Heading.Heading, { level: 6, class: "type" }, "Webinar"), index.h("resource-meta", { tags: data.tags, class: "tags" })), index.h(Heading.Heading, { level: 1 }, data.title), index.h(Heading.Heading, { class: "when", level: 4 }, "Begins:", ' ', index.h(DateTime.DateTime, { date: date, format: { weekday: 'long', month: 'long', day: 'numeric' } }), ' @ ', index.h(DateTime.DateTime, { date: date, format: { hour: 'numeric', timeZoneName: 'short', timeZone: 'America/Chicago' } })), index.h(RegisterButton, null)))), index.h(ResponsiveContainer.ResponsiveContainer, null, index.h("section", { class: "wrapper" }, index.h("div", { class: "article" }, index.h(PrismicResponsiveImage.PrismicRichText, { richText: data.doc.data.description, leading: "prose" }), index.h(RegisterButton, null)), index.h("div", { class: "hosts" }, index.h(Heading.Heading, { level: 5 }, "Your speakers:"), this.hosts.map(host => (index.h("resource-author-item", { author: host }))))))));
    };
    this.RegisterButton = () => (index.h("button", { class: "register-button", onClick: () => {
        this.state.showHubspotForm = true;
      } }, "Register Now"));
    this.OverlayForm = () => {
      const data = this.prismicData;
      const formId = data.doc.data.hubspot_form_id;
      return (index.h(ThemeProvider.ThemeProvider, { class: "overlay-form", type: "base" }, index.h("div", { class: "heading-group" }, index.h(Heading.Heading, { level: 3 }, "Stream ", data.title), index.h(Paragraph.Paragraph, null, "You're just a few clicks away from our free Webinar")), index.h("hubspot-form", { ajax: true, formId: formId, onFormSubmitted: () => {
          this.state.hubspotGatedPassed = true;
        } })));
    };
  }
  componentWillLoad() {
    this.state.hubspotGatedPassed = false;
    this.hasHappened = new Date(this.prismicData.doc.data.when) < new Date();
    this.hosts = prismic.getAuthorsForPrismicDoc(this.prismicData.doc);
  }
  render() {
    const { PastWebinar, FutureWebinar } = this;
    const formId = this.prismicData.doc.data.hubspot_form_id;
    return (index.h(index.Host, { style: {
        '--checkmark-path': `url("${index.getAssetPath('assets/checkmark-circle.png')}")`
      }, class: {
        'past': this.hasHappened,
        'future': !this.hasHappened
      } }, this.hasHappened
      ? index.h(PastWebinar, null)
      : [index.h(FutureWebinar, null),
        index.h("site-modal", { open: this.state.showHubspotForm, modalClose: () => (this.state.showHubspotForm = false) }, index.h("div", { class: "title" }, index.h(Heading.Heading, null, "Register for ", this.prismicData.title), index.h(Paragraph.Paragraph, null, "Enter your information below to join the Webinar list")), index.h("hubspot-form", { formId: formId, ajax: false, onFormSubmitted: () => {
            this.state.hubspotGatedPassed = true;
          } }))]));
  }
  static get assetsDirs() { return ["assets"]; }
};
ResourceWebinar.style = resourceWebinarCss;

exports.resource_webinar = ResourceWebinar;
