From 790b50fcbd675e3ee0d46a59105f331dce2d7e01 Mon Sep 17 00:00:00 2001
From: Shivangi Singh <shivangi.singh@gspann.com>
Date: Fri, 3 May 2024 16:48:44 +0530
Subject: [PATCH 1/8] individualEventPageComponents

---
 blocks/breadcrumbs/breadcrumbs.css     | 52 ++++++++++++++
 blocks/breadcrumbs/breadcrumbs.js      | 34 ++++++++++
 blocks/event-summary/event-summary.css | 85 +++++++++++++++++++++++
 blocks/event-summary/event-summary.js  | 94 ++++++++++++++++++++++++++
 scripts/scripts.js                     | 17 +++++
 templates/Event/Event.css              | 94 ++++++++++++++++++++++++++
 templates/Event/Event.js               | 13 ++++
 7 files changed, 389 insertions(+)
 create mode 100644 blocks/breadcrumbs/breadcrumbs.css
 create mode 100644 blocks/breadcrumbs/breadcrumbs.js
 create mode 100644 blocks/event-summary/event-summary.css
 create mode 100644 blocks/event-summary/event-summary.js
 create mode 100644 templates/Event/Event.css
 create mode 100644 templates/Event/Event.js

diff --git a/blocks/breadcrumbs/breadcrumbs.css b/blocks/breadcrumbs/breadcrumbs.css
new file mode 100644
index 0000000..e81bfe2
--- /dev/null
+++ b/blocks/breadcrumbs/breadcrumbs.css
@@ -0,0 +1,52 @@
+.breadcrumbs {
+    grid-area: bread;
+    display: inline-block;
+    list-style: none;
+    padding: 0;
+    font-size: 14px;
+    margin-bottom: 50px;
+}
+
+.breadcrumbs ul {
+    padding-top: 0;
+    margin-top: 0;
+}
+
+.breadcrumbs li {
+    display: inline-block;
+    padding: 10px 5px;
+    text-transform: uppercase;
+}
+
+.breadcrumbs li a {
+    color: #202020;
+    text-decoration: none;
+}
+
+.breadcrumbs li:first-child {
+    padding-left: 0;
+}
+
+.breadcrumbs li:last-child {
+    font-weight: 600;
+}
+
+.breadcrumbs li::before {
+    font-family: arial, sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    font-size: 14px;
+    padding-right: 5px;
+}
+
+.breadcrumbs li:first-child::before {
+    content: none;
+}
+
+.breadcrumbs li:not(:last-child)::after {
+    content: ">\00a0";
+    padding: 0 2px 0 7px;
+}
\ No newline at end of file
diff --git a/blocks/breadcrumbs/breadcrumbs.js b/blocks/breadcrumbs/breadcrumbs.js
new file mode 100644
index 0000000..a59160d
--- /dev/null
+++ b/blocks/breadcrumbs/breadcrumbs.js
@@ -0,0 +1,34 @@
+import { getMetadata } from '../../scripts/aem.js';
+
+/**
+ *
+ * @param {HTMLElement} $block The main element
+ */
+export default function decorate($block) {
+  const title = getMetadata('og:title');
+  const $ul = document.createElement('ul');
+  $block.append($ul);
+  const trail = [{
+    text: 'Home',
+    link: '/',
+  }, {
+    text: 'Events',
+    link: '/about-us/events-calendar',
+  }, {
+    text: title,
+  }];
+  while (trail.length) {
+    const step = trail.shift();
+    const $li = document.createElement('li');
+    $ul.append($li);
+    let $wrap = $li;
+    if (step.link) {
+      $wrap = document.createElement('a');
+      $wrap.href = step.link;
+      $li.append($wrap);
+    }
+    const $span = document.createElement('span');
+    $wrap.append($span);
+    $span.textContent = step.text;
+  }
+}
diff --git a/blocks/event-summary/event-summary.css b/blocks/event-summary/event-summary.css
new file mode 100644
index 0000000..2e067d0
--- /dev/null
+++ b/blocks/event-summary/event-summary.css
@@ -0,0 +1,85 @@
+.event-summary {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+
+.event-details {
+  flex: 1;
+  max-width: calc(50% -20px);
+  margin: 0 10px 10px 10px;
+}
+
+ul.keyword-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+ul.keyword-list li:not(:last-of-type)::after {
+  content: '|';
+  display: inline-block;
+  margin-left: 10px;
+}
+
+ul.keyword-list li {
+  display: inline-block;
+  margin-right: 10px;
+  position: relative;
+  font-size: 18px;
+  vertical-align: middle;
+}
+
+ul li {
+  padding: 0 0 0 0 !important;
+}
+
+.event-date {
+  font-size: 14px;
+  padding-top: 0 !important;
+}
+
+.event-subtitle {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 12px;
+  color: var(--primary-color);
+}
+
+.event-keywords {
+  font-size: 18px;
+}
+
+.image-container {
+  flex: 1;
+  max-width: 50%;
+  margin-right: 30px;
+  overflow: hidden;
+  position: relative;
+}
+
+.image-container img {
+  width: 100%;
+  height: 100%;
+
+}
+
+@media only screen and (max-width: 768px) {
+  .image-container, 
+  .event-details {
+    flex: 1 0 100%;
+    max-width: 100%;
+  }
+
+  .event-details {
+    margin-top: 20px;
+  }
+}
+
+@media only screen and (min-width: 1024px) {
+  .event-details {
+    order: 1;
+  }
+}
+
+
diff --git a/blocks/event-summary/event-summary.js b/blocks/event-summary/event-summary.js
new file mode 100644
index 0000000..e2b22bd
--- /dev/null
+++ b/blocks/event-summary/event-summary.js
@@ -0,0 +1,94 @@
+import { getMetadata, createOptimizedPicture } from '../../scripts/aem.js';
+import {
+  div, h1, a, li, p, ul,
+  strong,
+} from '../../scripts/dom-builder.js';
+
+export default async function decorate(block) {
+  const startDatestr = getMetadata('startdate');
+  const endDatestr = getMetadata('enddate');
+  const eventTime = getMetadata('eventtime');
+  const startDateParts = startDatestr.split(/-|\//);
+  const endDateParts = endDatestr.split(/-|\//);
+  const startDate = new Date(startDateParts[2], startDateParts[0] - 1, startDateParts[1]);
+  const endDate = new Date(endDateParts[2], endDateParts[0] - 1, endDateParts[1]);
+  const formattedStartDate = startDate.toLocaleDateString('en-Us', { month: 'short', day: '2-digit', year: 'numeric' });
+  const formattedEndDate = endDate.toLocaleDateString('en-Us', { month: 'short', day: '2-digit', year: 'numeric' });
+  let date;
+  if (formattedEndDate !== formattedStartDate) {
+    date = `${formattedStartDate.split(',')[0]} - ${formattedEndDate}`;
+  } else { date = `${formattedEndDate}`; }
+
+  const image = getMetadata('og:image');
+  const description = getMetadata('og:description');
+  const registerButton = getMetadata('register-button');
+  const title = getMetadata('og:title');
+  const type = getMetadata('type');
+  const region = getMetadata('region');
+  const address = getMetadata('address');
+
+  const outerBlock = document.querySelector('.section');
+  outerBlock.classList.add('outer');
+
+  // Create elements
+  const imageContainer = div(
+    { class: 'image-container' },
+    createOptimizedPicture(image, title),
+  );
+
+  const eventDate = (eventTime !== '' ? p(
+    { class: 'event-date' },
+    `${date} ${eventTime}`,
+  ) : p({ class: 'event-date' }, date));
+  const eventSubtitle = h1({ class: 'event-subtitle' }, title);
+  const keywordList = ul(
+    { class: 'keyword-list' },
+    li({ class: 'item type' }, type),
+    li({ class: 'item address' }, address !== region ? address : region),
+    (address !== region ? li({ class: 'item region' }, region) : ''),
+  );
+  let registerButtonLink;
+  const eventDescription = p(description);
+  if (type === 'Conference') {
+    registerButtonLink = a({ href: registerButton, title }, 'Visit the Event Website');
+  } else {
+    registerButtonLink = a({ href: registerButton, title }, 'Register Today');
+  }
+  const registerButtonContainer = p({ class: 'button-container find-out-more' }, strong(registerButtonLink));
+
+  // Append elements to block
+  block.appendChild(imageContainer);
+  block.appendChild(div({ class: 'event-details' }, eventDate, eventSubtitle, div({ class: 'event-keywords' }, keywordList), div({ class: 'event-description' }, eventDescription, registerButtonContainer)));
+
+  // Add event listener to the 'Register Today' button
+  registerButtonLink.addEventListener('click', (event) => {
+    event.preventDefault();
+
+    const popupMessageBox = div({ class: 'popup-message' });
+    const message = document.createElement('p');
+    message.textContent = 'You are now moving to an external website.';
+
+    const proceedBtn = document.createElement('button');
+    proceedBtn.classList.add('proceed');
+    proceedBtn.textContent = 'Proceed';
+
+    const cancelBtn = document.createElement('button');
+    cancelBtn.classList.add('cancel');
+    cancelBtn.textContent = 'Cancel';
+
+    popupMessageBox.appendChild(message);
+    popupMessageBox.appendChild(proceedBtn);
+    popupMessageBox.appendChild(cancelBtn);
+    block.appendChild(popupMessageBox);
+
+    proceedBtn.addEventListener('click', () => {
+      const ahref = registerButtonLink.getAttribute('href');
+      window.open(ahref, '_blank');
+      popupMessageBox.style.display = 'none';
+    });
+
+    cancelBtn.addEventListener('click', () => {
+      popupMessageBox.style.display = 'none';
+    });
+  });
+}
diff --git a/scripts/scripts.js b/scripts/scripts.js
index dfd04c7..9ef8361 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -37,6 +37,7 @@ const TEMPLATE_LIST = [
   'news',
   'anniversary',
   'landing-page',
+  'event',
 ];
 
 const CATEGORY_LIST = [
@@ -339,6 +340,22 @@ function correctUTMFlow() {
   }
 }
 
+export function formatDateRange(startDate, endDate) {
+  const options = {month: 'short', day : 'numeric', year: 'numeric'};
+  const formattedStartDate = new Date(Number(startDate) * 1000).toLocaleDateString('en-us', options);
+  const formattedEndDate = new Date(Number(endDate) * 1000).toLocaleDateString('en-us', options);
+  const startYear = new Date(formattedStartDate).getFullYear();
+  const endYear = new Date(formattedEndDate).getFullYear();
+  const differentYear = startYear !== endYear;
+  let dateRangeString;
+  if(differentYear) {
+    dateRangeString = formattedStartDate + ' - ' + formattedEndDate;
+  } else {
+    dateRangeString = (formattedStartDate).split(',')[0] + ' - ' + formattedEndDate;
+  }
+  return dateRangeString;
+}
+
 async function loadPage() {
   await loadEager(document);
   await loadLazy(document);
diff --git a/templates/Event/Event.css b/templates/Event/Event.css
new file mode 100644
index 0000000..8c45ce7
--- /dev/null
+++ b/templates/Event/Event.css
@@ -0,0 +1,94 @@
+main .section {
+  padding-top: 50px;
+  padding-bottom: 50px;
+  text-align: left;
+  margin-top: 50px;
+  margin-bottom: 50px;
+}
+
+.outer {
+  width: 1050px;
+  margin: auto;
+}
+
+.event main .section > div,
+.event main .section div + .default-content-wrapper {
+  padding-top: 0 !important;
+}
+
+.event main .section .default-content-wrapper {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+.event .event-title {
+  font-size: 30px;
+  padding-bottom: 30px;
+  border-bottom: 2px solid #ccc;
+  margin-bottom: 30px;
+}
+
+.event .find-out-more {
+  padding: 30px 0;
+  margin-right: 8px;
+}
+
+.event main .event-container p:last-of-type {
+  padding-bottom: 100px;
+}
+
+
+main .section > div {
+  margin: 0 auto;
+  padding: 0 15px;
+}
+
+.popup-message {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  padding: 20px;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  z-index: 9999;
+  text-align: left;
+}
+
+.popup-message p{
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.popup-message .proceed{
+  float: left;
+}
+
+.popup-message .cancel{
+  float: right;
+}
+
+.button-container a {
+  background-color: var(--primary-color) !important;
+  padding: 10px !important;
+  text-decoration: none !important;
+  border: 1px solid var(--primary-color) !important;
+  font-size: 20px !important;
+  color: #fff !important;
+  font-weight: bold !important;
+}
+
+.button-container a :hover {
+  background-color: #fff !important;
+  text-decoration: none !important;
+  color: var(--primary-color) !important;
+}
+
+@media (max-width: 1024px) {
+  .outer {
+      padding-left: 20px!important;
+      padding-right: 20px!important;
+      width: auto
+  }
+}
\ No newline at end of file
diff --git a/templates/Event/Event.js b/templates/Event/Event.js
new file mode 100644
index 0000000..30d551e
--- /dev/null
+++ b/templates/Event/Event.js
@@ -0,0 +1,13 @@
+async function renderDetails(insertAfterElement) {
+  const summaryWrapper = document.querySelector('event-summary-wrapper');
+  if (summaryWrapper) {
+    const summary = document.querySelector('event-summary');
+    insertAfterElement.parentNode.insertBefore(summary, insertAfterElement.nextSibling);
+  }
+}
+
+export default async function buildAutoBlocks() {
+  const title = document.getElementById('event-details');
+  if (title) title.classList.add('event-title');
+  renderDetails(title);
+}

From b450c2166bfa3bc9a207269d6d791cec2657fdb1 Mon Sep 17 00:00:00 2001
From: Shivangi Singh <shivangi.singh@gspann.com>
Date: Fri, 3 May 2024 16:55:27 +0530
Subject: [PATCH 2/8] templateChanges

---
 blocks/breadcrumbs/breadcrumbs.js     |  2 +-
 blocks/event-summary/event-summary.js | 14 ++++----------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/blocks/breadcrumbs/breadcrumbs.js b/blocks/breadcrumbs/breadcrumbs.js
index a59160d..d77dbe7 100644
--- a/blocks/breadcrumbs/breadcrumbs.js
+++ b/blocks/breadcrumbs/breadcrumbs.js
@@ -13,7 +13,7 @@ export default function decorate($block) {
     link: '/',
   }, {
     text: 'Events',
-    link: '/about-us/events-calendar',
+    link: '/about-us/events',
   }, {
     text: title,
   }];
diff --git a/blocks/event-summary/event-summary.js b/blocks/event-summary/event-summary.js
index e2b22bd..896ee73 100644
--- a/blocks/event-summary/event-summary.js
+++ b/blocks/event-summary/event-summary.js
@@ -2,6 +2,7 @@ import { getMetadata, createOptimizedPicture } from '../../scripts/aem.js';
 import {
   div, h1, a, li, p, ul,
   strong,
+  button,
 } from '../../scripts/dom-builder.js';
 
 export default async function decorate(block) {
@@ -65,16 +66,9 @@ export default async function decorate(block) {
     event.preventDefault();
 
     const popupMessageBox = div({ class: 'popup-message' });
-    const message = document.createElement('p');
-    message.textContent = 'You are now moving to an external website.';
-
-    const proceedBtn = document.createElement('button');
-    proceedBtn.classList.add('proceed');
-    proceedBtn.textContent = 'Proceed';
-
-    const cancelBtn = document.createElement('button');
-    cancelBtn.classList.add('cancel');
-    cancelBtn.textContent = 'Cancel';
+    const message = p('You are now moving to an external website.');
+    const proceedBtn = button({class: 'proceed'}, 'Proceed');
+    const cancelBtn = button({class: 'cancel'}, 'Cancel');
 
     popupMessageBox.appendChild(message);
     popupMessageBox.appendChild(proceedBtn);

From f24fac75e859d9294dfbf1cc763af635c1258928 Mon Sep 17 00:00:00 2001
From: Shivangi Singh <shivangi.singh@gspann.com>
Date: Fri, 3 May 2024 17:55:53 +0530
Subject: [PATCH 3/8] lint changes

---
 blocks/event-summary/event-summary.js |  4 ++--
 scripts/scripts.js                    | 16 ----------------
 2 files changed, 2 insertions(+), 18 deletions(-)

diff --git a/blocks/event-summary/event-summary.js b/blocks/event-summary/event-summary.js
index 896ee73..01784a0 100644
--- a/blocks/event-summary/event-summary.js
+++ b/blocks/event-summary/event-summary.js
@@ -67,8 +67,8 @@ export default async function decorate(block) {
 
     const popupMessageBox = div({ class: 'popup-message' });
     const message = p('You are now moving to an external website.');
-    const proceedBtn = button({class: 'proceed'}, 'Proceed');
-    const cancelBtn = button({class: 'cancel'}, 'Cancel');
+    const proceedBtn = button({ class: 'proceed' }, 'Proceed');
+    const cancelBtn = button({ class: 'cancel' }, 'Cancel');
 
     popupMessageBox.appendChild(message);
     popupMessageBox.appendChild(proceedBtn);
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 9ef8361..b35546e 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -340,22 +340,6 @@ function correctUTMFlow() {
   }
 }
 
-export function formatDateRange(startDate, endDate) {
-  const options = {month: 'short', day : 'numeric', year: 'numeric'};
-  const formattedStartDate = new Date(Number(startDate) * 1000).toLocaleDateString('en-us', options);
-  const formattedEndDate = new Date(Number(endDate) * 1000).toLocaleDateString('en-us', options);
-  const startYear = new Date(formattedStartDate).getFullYear();
-  const endYear = new Date(formattedEndDate).getFullYear();
-  const differentYear = startYear !== endYear;
-  let dateRangeString;
-  if(differentYear) {
-    dateRangeString = formattedStartDate + ' - ' + formattedEndDate;
-  } else {
-    dateRangeString = (formattedStartDate).split(',')[0] + ' - ' + formattedEndDate;
-  }
-  return dateRangeString;
-}
-
 async function loadPage() {
   await loadEager(document);
   await loadLazy(document);

From 278e5b06cd18bb69c890192f0b4d94bfd128ac88 Mon Sep 17 00:00:00 2001
From: Shivangi Singh <shivangi.singh@gspann.com>
Date: Fri, 3 May 2024 18:03:33 +0530
Subject: [PATCH 4/8] lint CSS Error changes

---
 blocks/event-summary/event-summary.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/blocks/event-summary/event-summary.css b/blocks/event-summary/event-summary.css
index 2e067d0..7bde707 100644
--- a/blocks/event-summary/event-summary.css
+++ b/blocks/event-summary/event-summary.css
@@ -6,8 +6,8 @@
 
 .event-details {
   flex: 1;
-  max-width: calc(50% -20px);
-  margin: 0 10px 10px 10px;
+  max-width: calc(50% - 20px);
+  margin: 0 10px 10px;
 }
 
 ul.keyword-list {
@@ -31,7 +31,7 @@ ul.keyword-list li {
 }
 
 ul li {
-  padding: 0 0 0 0 !important;
+  padding: 0 !important;
 }
 
 .event-date {

From 94eadfe7448c3cd8fc8330ccab6e2ae1f7204171 Mon Sep 17 00:00:00 2001
From: shivangi1422 <144129047+shivangi1422@users.noreply.github.com>
Date: Mon, 6 May 2024 19:37:41 +0530
Subject: [PATCH 5/8] Update event-summary.css

---
 blocks/event-summary/event-summary.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/blocks/event-summary/event-summary.css b/blocks/event-summary/event-summary.css
index 7bde707..621479e 100644
--- a/blocks/event-summary/event-summary.css
+++ b/blocks/event-summary/event-summary.css
@@ -60,8 +60,6 @@ ul li {
 
 .image-container img {
   width: 100%;
-  height: 100%;
-
 }
 
 @media only screen and (max-width: 768px) {

From a03af52d33f56a6cadadf85e539743ce47ecd58e Mon Sep 17 00:00:00 2001
From: shivangi1422 <144129047+shivangi1422@users.noreply.github.com>
Date: Mon, 6 May 2024 20:19:10 +0530
Subject: [PATCH 6/8] Update Event.css

---
 templates/Event/Event.css | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/templates/Event/Event.css b/templates/Event/Event.css
index 8c45ce7..3f2fe38 100644
--- a/templates/Event/Event.css
+++ b/templates/Event/Event.css
@@ -11,11 +11,6 @@ main .section {
   margin: auto;
 }
 
-.event main .section > div,
-.event main .section div + .default-content-wrapper {
-  padding-top: 0 !important;
-}
-
 .event main .section .default-content-wrapper {
   padding-top: 15px;
   padding-bottom: 15px;
@@ -91,4 +86,4 @@ main .section > div {
       padding-right: 20px!important;
       width: auto
   }
-}
\ No newline at end of file
+}

From 023a2339c19bc9c940f6a3d227675a670d68d152 Mon Sep 17 00:00:00 2001
From: shivangi1422 <144129047+shivangi1422@users.noreply.github.com>
Date: Mon, 6 May 2024 20:19:55 +0530
Subject: [PATCH 7/8] Update event-summary.css

---
 blocks/event-summary/event-summary.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/blocks/event-summary/event-summary.css b/blocks/event-summary/event-summary.css
index 621479e..e445020 100644
--- a/blocks/event-summary/event-summary.css
+++ b/blocks/event-summary/event-summary.css
@@ -60,6 +60,8 @@ ul li {
 
 .image-container img {
   width: 100%;
+  height: auto;
+  aspect-ratio: 16 / 16;
 }
 
 @media only screen and (max-width: 768px) {

From 08bd0aa3e9fb591fce58d8e1ae2ed0214ffaaf56 Mon Sep 17 00:00:00 2001
From: shivangi1422 <144129047+shivangi1422@users.noreply.github.com>
Date: Mon, 6 May 2024 20:36:45 +0530
Subject: [PATCH 8/8] Update Event.css

---
 templates/Event/Event.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/Event/Event.css b/templates/Event/Event.css
index 3f2fe38..3756e47 100644
--- a/templates/Event/Event.css
+++ b/templates/Event/Event.css
@@ -7,7 +7,7 @@ main .section {
 }
 
 .outer {
-  width: 1050px;
+  width: 80%;
   margin: auto;
 }