import { r as registerInstance, h, H as Host } from './index-b6f10a81.js';
import './_commonjsHelpers-63c253cd.js';
import './moment-6f6ab70c.js';
import { C as CalendarUtils } from './calendar-a511fee1.js';

const atamaStructuredPairOverviewMeetingRowCss = "atama-structured-pair-overview-meeting-row{display:flex;align-items:center;padding:calc(2 * var(--spacing-unit)) calc(4 * var(--spacing-unit)) calc(2 * var(--spacing-unit)) calc(3 * var(--spacing-unit));position:relative}atama-structured-pair-overview-meeting-row:first-child{margin-top:calc(2 * var(--spacing-unit))}atama-structured-pair-overview-meeting-row:last-child{margin-bottom:calc(2 * var(--spacing-unit))}atama-structured-pair-overview-meeting-row .step{display:flex;align-items:center;justify-content:center;margin:0 calc(4 * var(--spacing-unit)) 0 0;height:calc(8 * var(--spacing-unit));width:calc(8 * var(--spacing-unit));flex:0 0 calc(8 * var(--spacing-unit));border-radius:50%;font-weight:bold;color:var(--color-text-secondary);background:var(--color-disabled);cursor:default}atama-structured-pair-overview-meeting-row .step.completed{background:#D2F0E9}atama-structured-pair-overview-meeting-row .step:after,atama-structured-pair-overview-meeting-row .step:before{content:\"\";position:absolute;width:3px;height:calc(50% - (4 * var(--spacing-unit)) + 1px)}atama-structured-pair-overview-meeting-row .step:before{top:0}atama-structured-pair-overview-meeting-row .step:after{bottom:-1px}atama-structured-pair-overview-meeting-row:not(:last-child) .step.next-completed:after{background:#D2F0E9}atama-structured-pair-overview-meeting-row:not(:first-of-type) .step.completed:before{background:#D2F0E9}atama-structured-pair-overview-meeting-row:not(:first-child) .step:before{background:var(--color-disabled)}atama-structured-pair-overview-meeting-row:not(:last-child) .step:after{background:var(--color-disabled)}atama-structured-pair-overview-meeting-row .step img{height:calc(4 * var(--spacing-unit));width:calc(4 * var(--spacing-unit))}atama-structured-pair-overview-meeting-row .session-info-container{display:flex;width:100%;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:var(--corner-radius);overflow:hidden;box-sizing:border-box;}atama-structured-pair-overview-meeting-row .session-info{height:72px;display:flex;align-items:center;box-sizing:border-box;margin-right:calc(4 * var(--spacing-unit));width:200px;flex:0 0 200px}atama-structured-pair-overview-meeting-row .meeting-date{color:#00BD9C;background:#d5f3ec;white-space:nowrap;padding:calc(1 * var(--spacing-unit)) calc(2 * var(--spacing-unit)) calc(1 * var(--spacing-unit)) calc(3 * var(--spacing-unit));}atama-structured-pair-overview-meeting-row .create-meeting-action-container{background:var(--color-background-primary);justify-content:center}atama-structured-pair-overview-meeting-row .session-title{flex:1}";

const checkIconBase64 = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGZpbGw9IiMwMGJkOWMiIGlkPSJzdmdfMSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJtMjEuNjUyLDMuMjExYy0wLjI5MywtMC4yOTUgLTAuNzcsLTAuMjk1IC0xLjA2MSwwbC0xMS4xODEsMTEuMTI5Yy0wLjI5MywwLjI5NyAtMC43NzEsMC4yOTcgLTEuMDYyLDBsLTQuODk5LC00Ljk4OWMtMC4xNDUsLTAuMTQ4IC0wLjMzNSwtMC4yMjEgLTAuNTI2LC0wLjIyMmMtMC4xOTMsLTAuMDAxIC0wLjM4OSwwLjA3MiAtMC41MzYsMC4yMjJsLTIuMTY1LDEuOTQ2Yy0wLjE0NCwwLjE0OCAtMC4yMjIsMC4zMzMgLTAuMjIyLDAuNTI2YzAsMC4xOTQgMC4wNzgsMC4zOTcgMC4yMjMsMC41NDRsNC45NCw1LjE4NGMwLjI5MiwwLjI5NiAwLjc3MSwwLjc3NiAxLjA2MiwxLjA3bDIuMTI0LDIuMTQxYzAuMjkyLDAuMjkzIDAuNzY5LDAuMjkzIDEuMDYyLDBsMTQuMzY2LC0xNC4zNGMwLjI5MywtMC4yOTQgMC4yOTMsLTAuNzc3IDAsLTEuMDcxbC0yLjEyNSwtMi4xNHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgogPC9nPgo8L3N2Zz4=';
const AtamaStructuredPairOverview = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    const { i18n, meeting, meetingConfig, meetingOrder, nextCompleted } = this;
    const completed = !!meeting;
    let meetingInfo;
    if (meeting) {
      const startDate = new Date(meeting.startDate * 1000);
      const endDate = new Date(meeting.endDate * 1000);
      meetingInfo = (h("div", { class: "meeting-date session-info d-flex flex-column justify-content-center" }, h("div", { class: "mb-2" }, CalendarUtils.format(startDate, i18n.dateFormatDay || 'DD MMM'), ",\u00A0", CalendarUtils.format(startDate, i18n.dateFormatTime || 'HH:mm'), " -", CalendarUtils.format(endDate, i18n.dateFormatTime || 'HH:mm')), h("dvn-button", { leaned: true, scale: "small", tint: "secondary", view: "outline", onClick: () => this.onShowMeetingDetail(meeting) }, i18n.goToMeetingPage || 'Go to Session Page')));
    }
    return (h(Host, null, h("div", { class: {
        step: true,
        completed,
        'next-completed': nextCompleted,
      } }, completed ? h("img", { src: checkIconBase64, alt: "completed" }) : meetingOrder), h("div", { class: { 'session-info-container': true, completed } }, meetingInfo ||
      h("div", { class: "create-meeting-action-container session-info" }, this.showCreateMeetingButton
        ? h("dvn-button", { leaned: true, scale: "small", view: "outline", onClick: () => this.onCreateMeeting(meetingConfig) }, i18n.createMeeting || 'Schedule Session')
        : h("div", null, i18n.meetingWillBeCreated || 'Will be scheduled')), h("div", { class: "session-title" }, meetingConfig.name), h("dvn-button", { scale: "small", view: "flat", onClick: () => this.onShowMeetingConfigDetail(meetingConfig) }, i18n.viewDetails || 'View Details'))));
  }
};
AtamaStructuredPairOverview.style = atamaStructuredPairOverviewMeetingRowCss;

export { AtamaStructuredPairOverview as atama_structured_pair_overview_meeting_row };
