@eeacms/volto-cca-policy 0.1.83 → 0.1.84

package/CHANGELOG.md

@@ -4,7 +4,38 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [0.1.83](https://github.com/eea/volto-cca-policy/compare/0.1.82...0.1.83) - 26 February 2024
+### [0.1.84](https://github.com/eea/volto-cca-policy/compare/0.1.83...0.1.84) - 28 February 2024
+
+#### :bug: Bug Fixes
+
+- fix: image gallery [kreafox - [`758a8f3`](https://github.com/eea/volto-cca-policy/commit/758a8f3d187e44e7782c6bba2e9d98e3f179b559)]
+- fix: remove unused import [kreafox - [`9790189`](https://github.com/eea/volto-cca-policy/commit/97901892059d308a9500f53573ea1f1f0e27a587)]
+- fix: className [kreafox - [`851d7f1`](https://github.com/eea/volto-cca-policy/commit/851d7f1c6ac5ccc338225f18ab33f08b414d517f)]
+- fix: more checks on db items [kreafox - [`e673ca8`](https://github.com/eea/volto-cca-policy/commit/e673ca85fed7ebab6879a3dc8d09f6b80b97fce5)]
+- fix: missing content on c3sindicator view [kreafox - [`0126bb5`](https://github.com/eea/volto-cca-policy/commit/0126bb5ad2653956cd2863e03f66b6f18d9a25c4)]
+- fix: error on missing metadata values [kreafox - [`300849b`](https://github.com/eea/volto-cca-policy/commit/300849b0d4b17d6352290479fdd6458af538aa50)]
+
+#### :nail_care: Enhancements
+
+- change: remove Footer customization [kreafox - [`b1c2c86`](https://github.com/eea/volto-cca-policy/commit/b1c2c8608eaff77db40cbf1d9158a7a72bd558aa)]
+- change: small updates on db items, cleanup [kreafox - [`0a3981b`](https://github.com/eea/volto-cca-policy/commit/0a3981be1d2761d2bdf5049b0a2cffa1417687bc)]
+- change: update mission stories search index [kreafox - [`3ea7107`](https://github.com/eea/volto-cca-policy/commit/3ea71075e30cb8fa8d5a0b28822ab67ea6c1c7e9)]
+- change: update case study view, add ImageGallery component [kreafox - [`5a83100`](https://github.com/eea/volto-cca-policy/commit/5a83100f76f4f64655561f09e20a516a403dd982)]
+- change: formatting [kreafox - [`00a0baa`](https://github.com/eea/volto-cca-policy/commit/00a0baa225d2e39cc3b75e41a870c23a45a9b62a)]
+
+#### :house: Internal changes
+
+- style: nonclickable menu [kreafox - [`dc11808`](https://github.com/eea/volto-cca-policy/commit/dc11808c1ca5006713522f152c0d8359a4324ea1)]
+- style: update c3s indicator view [kreafox - [`2007587`](https://github.com/eea/volto-cca-policy/commit/2007587f919d2866ea79b846585c3177e4b905fd)]
+
+#### :hammer_and_wrench: Others
+
+- Refs #265786 - Fix text Climate-ADAPT in events cards listing. [GhitaB - [`66e5f3d`](https://github.com/eea/volto-cca-policy/commit/66e5f3d6876cae0f6e3e2ebda11fcbd19cc10e5b)]
+- test: update tests for db items view [kreafox - [`ed3af67`](https://github.com/eea/volto-cca-policy/commit/ed3af67da0f535b5dda8616fe8523f286bbca935)]
+- CCA Event, Event view: use BannerTitle. [GhitaB - [`84d1dd6`](https://github.com/eea/volto-cca-policy/commit/84d1dd6e9472de069de8c2d1aedf9f00030e60c8)]
+- WIP: improve layout on DB items, code cleanup [kreafox - [`2f14ad1`](https://github.com/eea/volto-cca-policy/commit/2f14ad1be2b09ddf569b1c9893f113031421d6f5)]
+- WIP: database items view [kreafox - [`4602d76`](https://github.com/eea/volto-cca-policy/commit/4602d762849b2c84cc26af9f528fb11f22618c0f)]
+### [0.1.83](https://github.com/eea/volto-cca-policy/compare/0.1.82...0.1.83) - 27 February 2024
 
 #### :hammer_and_wrench: Others
 
@@ -409,13 +440,10 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Refs #260715 rast-block wip [Tripon Eugen - [`f19d54e`](https://github.com/eea/volto-cca-policy/commit/f19d54e0b9a6a86bf344eb85b6a1cda7f3de91bf)]
 - Refs #260715 rast-block wip [Tripon Eugen - [`2828537`](https://github.com/eea/volto-cca-policy/commit/2828537b6c084cd1a82162d552fb4ef025b71f9f)]
 - Refs #260715 rast-block updates [Tripon Eugen - [`1e803e5`](https://github.com/eea/volto-cca-policy/commit/1e803e5bd3d3fb7558f261c76c68866be7beb8b5)]
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`0a15e1b`](https://github.com/eea/volto-cca-policy/commit/0a15e1b2ad081233685e80d5b3c60a8663f6b896)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`9554e44`](https://github.com/eea/volto-cca-policy/commit/9554e44c92a621a52b2adb5a4830fb084ee5734b)]
 ### [0.1.49](https://github.com/eea/volto-cca-policy/compare/0.1.48...0.1.49) - 15 November 2023
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`7b820a6`](https://github.com/eea/volto-cca-policy/commit/7b820a6369c2ddd5203b1a4abe352cb4bb43db7a)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`f0a8061`](https://github.com/eea/volto-cca-policy/commit/f0a8061c275c236deb00087c23fac9860a073106)]
 
 #### :hammer_and_wrench: Others
@@ -432,9 +460,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Refs #259267 - jenkins test [Tripon Eugen - [`cacd31e`](https://github.com/eea/volto-cca-policy/commit/cacd31e7b1afe0983674ed5c7632d2e1d7fa752e)]
 - Refs #259267 - jenkins [Tripon Eugen - [`5b3affe`](https://github.com/eea/volto-cca-policy/commit/5b3affee8401239de10097884c1b7f2349d15ec0)]
 - Refs #259267 - add When, lead image and title to files [Tripon Eugen - [`2cedb23`](https://github.com/eea/volto-cca-policy/commit/2cedb237f898af9057e13fba94b615ef71077204)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`4d607a5`](https://github.com/eea/volto-cca-policy/commit/4d607a576e9d0a5c34e48c41b409e7df616ee3d6)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`b7f74d5`](https://github.com/eea/volto-cca-policy/commit/b7f74d53513a6edbfbca5cb6d19687929bb1e5db)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`db65617`](https://github.com/eea/volto-cca-policy/commit/db656173391f65157098d95d388c25f6429753d8)]
 - Refs #259267 - cca event blocks attachments and check not mandatoty fields [Tripon Eugen - [`3138e5a`](https://github.com/eea/volto-cca-policy/commit/3138e5afb5bfbdbed14e27ed457b16867b7fa414)]
 - Refs #256681 - Fix error in CCA Event view menu. ([React Intl] An id must be provided to format a message.) [GhitaB - [`517eeb8`](https://github.com/eea/volto-cca-policy/commit/517eeb817264a47bbfd6b9b7d22aaf22d44ed224)]
 - Refs #161485 - Fix ECDE name conflict. [GhitaB - [`8bfd99f`](https://github.com/eea/volto-cca-policy/commit/8bfd99ff68bb82a04d1c0ed625fa514fcf46289e)]
@@ -651,7 +676,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`ad1ced0`](https://github.com/eea/volto-cca-policy/commit/ad1ced0971ba116c13a3b5fcc039172cc915c919)]
 
 #### :hammer_and_wrench: Others
 
@@ -1132,7 +1156,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Refs #158294 - Update supported languages list. [GhitaB - [`0a4f91f`](https://github.com/eea/volto-cca-policy/commit/0a4f91f39b7edc367bd4c127d6a8f273c7788361)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`8f1f9ce`](https://github.com/eea/volto-cca-policy/commit/8f1f9ce6c22805670cc0800d3c779b6d619d0f31)]
 ### [0.1.1](https://github.com/eea/volto-cca-policy/compare/0.1.0...0.1.1) - 13 December 2022
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.1.83",
+  "version": "0.1.84",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/index.js

@@ -1 +1,2 @@
+export ImageGallery from './theme/ImageGallery/ImageGallery';
 export BannerTitle from './theme/BannerTitle/BannerTitle';

package/src/components/manage/Blocks/Listing/EventCardsListingView.jsx

@@ -122,7 +122,7 @@ const EventCardsListingView = ({ items, isEditMode, token }) => {
                         )}
                         <div className="source">
                           <ConditionalLink item={item} condition={!isEditMode}>
-                            Climate Adapt page for this event
+                            Climate-ADAPT page for this event
                           </ConditionalLink>
                         </div>
                         {!!item.contact_email && (

package/src/components/theme/ImageGallery/ImageGallery.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import { Modal, Image } from 'semantic-ui-react';
+
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
+const Slider = loadable(() => import('react-slick'));
+
+const ImageGallery = (props) => {
+  const { items = [] } = props;
+
+  const [open, setOpen] = React.useState(false);
+  const [slideIndex, setSlideIndex] = React.useState(0);
+  const [updateCount, setUpdateCount] = React.useState(0);
+  const sliderRef = React.useRef(null);
+
+  const carouselSettings = React.useMemo(
+    () => ({
+      afterChange: () => setUpdateCount(updateCount + 1),
+      beforeChange: (current, next) => setSlideIndex(next),
+      infinite: true,
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      dots: false,
+      arrows: true,
+      adaptiveHeight: true,
+      autoplay: false,
+      fade: false,
+      useTransform: false,
+      initialSlide: slideIndex,
+    }),
+    [slideIndex, updateCount],
+  );
+
+  const handleClick = () => {
+    if (items.length) {
+      setSlideIndex(0);
+      setOpen(true);
+    }
+  };
+
+  return (
+    <div className="image-gallery">
+      <div
+        tabIndex={0}
+        role="button"
+        onKeyDown={handleClick}
+        onClick={handleClick}
+      >
+        <Image
+          src={items[0]?.url}
+          alt={items[0]?.title}
+          className="preview-image"
+        />
+      </div>
+
+      <Modal
+        closeIcon
+        open={open}
+        className="slider-modal"
+        onClose={() => setOpen(false)}
+        onOpen={() => setOpen(true)}
+      >
+        <Modal.Content>
+          <h3>{items[slideIndex]?.title}</h3>
+          <p>{items[slideIndex]?.description}</p>
+          <Slider {...carouselSettings} ref={sliderRef}>
+            {items.map((item, i) => {
+              return <Image key={i} src={item.url} alt={item?.title} />;
+            })}
+          </Slider>
+          <div className="slide-image-count">
+            <strong>{slideIndex + 1}</strong> of {items.length}
+          </div>
+        </Modal.Content>
+      </Modal>
+    </div>
+  );
+};
+
+export default ImageGallery;

package/src/components/theme/Views/AdaptationOptionView.jsx

@@ -7,7 +7,9 @@ import {
   ShareInfo,
   BannerTitle,
 } from '@eeacms/volto-cca-policy/helpers';
-import { Grid } from 'semantic-ui-react';
+import { Segment, Divider } from 'semantic-ui-react';
+import { UniversalLink } from '@plone/volto/components';
+import cx from 'classnames';
 
 function createDataField(type, field, section, title) {
   return {
@@ -69,21 +71,23 @@ const SectionsMenu = (props) => {
   const { sections } = props;
 
   return (
-    <>
-      {sections.length > 0 && (
-        <>
-          <h5 className="Adaptation-option-selector">Additional Details</h5>
-          <ul>
-            {sections.map((data, index) => (
-              <li key={index}>
-                <a href={'#' + sectionID(data.title)}>{data.title}</a>
-              </li>
-            ))}
-          </ul>
-        </>
-      )}
-      <>
-        <h5 className="Adaptation-option-selector">Reference information</h5>
+    <div className="adaptation-details">
+      <div>
+        {sections.length > 0 && (
+          <>
+            <h3>Additional Details</h3>
+            <ul>
+              {sections.map((data, index) => (
+                <li key={index}>
+                  <a href={'#' + sectionID(data.title)}>{data.title}</a>
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+      </div>
+      <div>
+        <h3>Reference information</h3>
         <ul>
           <li>
             <a href="#websites">Websites</a>
@@ -92,95 +96,105 @@ const SectionsMenu = (props) => {
             <a href="#source">Source</a>
           </li>
         </ul>
-      </>
-      <hr />
-    </>
+      </div>
+    </div>
   );
 };
 
 function AdaptationOptionView(props) {
   const { content } = props;
+  const {
+    related_case_studies,
+    long_description,
+    websites,
+    source,
+    ipcc_category,
+  } = content;
 
   const usedSections = dataDisplay.filter((data) =>
     content?.hasOwnProperty(data.field),
   );
 
   return (
-    <div className="adaptation-option-view">
+    <div className="db-item-view adaptation-option-view">
       <BannerTitle content={content} type="Adaptation Option" />
 
       <div className="ui container">
-        <Grid columns="12">
-          <div className="row">
-            <Grid.Column
-              mobile={12}
-              tablet={12}
-              computer={9}
-              className="col-left"
-            >
-              <HTMLField
-                value={content.long_description}
-                className="long_description"
-              />
-
-              <SectionsMenu sections={usedSections} />
-
-              {content?.ipcc_category?.length > 0 && (
-                <Fragment>
-                  <h4>Adaptation Details</h4>
-
-                  <div id={sectionID('IPCC categories')} className="section">
-                    <h5 className="section-title">IPCC categories</h5>
-                    {content.ipcc_category
-                      .map((item) => item.title)
-                      .sort()
-                      .join(', ')}
-                    {usedSections.length > 0 && (
-                      <>
-                        {usedSections.map((data, index) => (
-                          <Fragment key={index}>
-                            <div id={sectionID(data.title)} className="section">
-                              <h5 className="section-title">{data.title}</h5>
-                              <HTMLField
-                                value={content[data.field]}
-                                className="long_description"
-                              />
-                            </div>
-                          </Fragment>
-                        ))}
-                      </>
-                    )}
-                  </div>
-                  <hr />
-                </Fragment>
+        <HTMLField value={long_description} />
+        <SectionsMenu sections={usedSections} />
+        <Divider />
+
+        {content?.ipcc_category?.length > 0 && (
+          <Fragment>
+            <h2>Adaptation Details</h2>
+            <div id={sectionID('IPCC categories')} className="section">
+              <h5 className="section-title">IPCC categories</h5>
+              {ipcc_category
+                .map((item) => item.title)
+                .sort()
+                .join(', ')}
+
+              {usedSections.length > 0 && (
+                <>
+                  {usedSections
+                    .filter((data) => data.field !== 'ipcc_category')
+                    .map((data, index) => (
+                      <Fragment key={index}>
+                        <div id={sectionID(data.title)} className="section">
+                          <h5 className="section-title">{data.title}</h5>
+                          <HTMLField value={content[data.field]} />
+                        </div>
+                      </Fragment>
+                    ))}
+                </>
               )}
-
-              <h4>Reference information</h4>
-
-              {content?.websites?.length > 0 && (
-                <LinksList title="Websites:" value={content.websites} />
-              )}
-
-              <div id="source" className="section">
-                <h5>References:</h5>
-                <HTMLField value={content.source} />
-              </div>
-
-              <PublishedModifiedInfo {...props} />
-              <ShareInfo {...props} />
-            </Grid.Column>
-            <Grid.Column
-              mobile={12}
-              tablet={12}
-              computer={3}
-              className="col-right"
-            >
-              <div style={{}}>
-                <ContentMetadata {...props} />
+            </div>
+            <Divider />
+          </Fragment>
+        )}
+
+        <h2>Reference information</h2>
+
+        {websites && websites?.length > 0 && (
+          <LinksList title="Websites:" value={websites} />
+        )}
+
+        <div id="source" className="section">
+          <h5 id="source">References:</h5>
+          <HTMLField value={source} />
+        </div>
+
+        <PublishedModifiedInfo {...props} />
+        <ShareInfo {...props} />
+
+        <div className="content-box">
+          <div className="content-box-inner">
+            <Segment>
+              <ContentMetadata {...props} />
+            </Segment>
+
+            {related_case_studies?.length > 0 && (
+              <div className="content-metadata">
+                <Segment>
+                  <h5>Case studies related to this option</h5>
+                  <ul
+                    className={cx('related-case-studies', {
+                      columned: related_case_studies?.length > 5,
+                    })}
+                  >
+                    {related_case_studies.map((item, index) => (
+                      <li key={index}>
+                        <UniversalLink key={index} href={item.url}>
+                          {item.title}
+                        </UniversalLink>
+                      </li>
+                    ))}
+                  </ul>
+                </Segment>
               </div>
-            </Grid.Column>
+            )}
           </div>
-        </Grid>
+        </div>
       </div>
     </div>
   );

package/src/components/theme/Views/C3SIndicatorView.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import spinner from '@eeacms/volto-cca-policy/../theme//assets/images/spinner.svg';
-import { HTMLField } from '@eeacms/volto-cca-policy/helpers';
-import { Grid } from 'semantic-ui-react';
+import { HTMLField, BannerTitle } from '@eeacms/volto-cca-policy/helpers';
+import { Accordion, Icon, Segment } from 'semantic-ui-react';
 
 if (!__SERVER__) {
   window.cds_toolbox = {
@@ -47,10 +47,13 @@ const createIframe = (div_id, details_url, details_params, spinner_url) => {
 
 const Details = (props) => {
   const { content } = props;
-  const c3s_details_url = content.details_app_toolbox_url;
-  const c3s_details_params = JSON.stringify(
-    content.details_app_parameters,
-  ).replace(/"/g, "'"); // we avoid double quotes in iframe text
+  const { details_app_toolbox_url, details_app_parameters } = content;
+
+  const c3s_details_url = details_app_toolbox_url;
+  const c3s_details_params = JSON.stringify(details_app_parameters).replace(
+    /"/g,
+    "'",
+  ); // we avoid double quotes in iframe text
   const [spinnerUrl, setSpinnerUrl] = useState(null);
 
   React.useEffect(() => {
@@ -74,10 +77,12 @@ const Details = (props) => {
 
 const Overview = (props) => {
   const { content } = props;
-  const c3s_overview_url = content.overview_app_toolbox_url;
-  const c3s_overview_params = JSON.stringify(
-    content.overview_app_parameters,
-  ).replace(/"/g, "'"); // we avoid double quotes in iframe text
+  const { overview_app_toolbox_url, overview_app_parameters } = content;
+  const c3s_overview_url = overview_app_toolbox_url;
+  const c3s_overview_params = JSON.stringify(overview_app_parameters).replace(
+    /"/g,
+    "'",
+  ); // we avoid double quotes in iframe text
   const [spinnerUrl, setSpinnerUrl] = useState(null);
 
   React.useEffect(() => {
@@ -101,7 +106,19 @@ const Overview = (props) => {
 
 function C3SIndicatorView(props) {
   const { content } = props;
+  const { definition_app, long_description, indicator_title } = content;
   const [showDetails, setShowDetails] = useState(false);
+  const hasIndicatorTitle =
+    indicator_title && indicator_title !== '_' && indicator_title !== '-';
+
+  const [activeAccIndex, setActiveAccIndex] = React.useState(null);
+
+  function handleAccClick(e, titleProps) {
+    const { index } = titleProps;
+    const newIndex = activeAccIndex === index ? -1 : index;
+
+    setActiveAccIndex(newIndex);
+  }
 
   const toggleIframe = () => {
     setShowDetails(!showDetails);
@@ -122,52 +139,74 @@ function C3SIndicatorView(props) {
   }, [showDetails]);
 
   return (
-    <div className="c3sindicator-view">
+    <div className="db-item-view c3sindicator-view">
+      <BannerTitle content={content} />
+
       <div className="ui container">
-        <Grid columns="12">
-          <div className="row">
-            <Grid.Column
-              mobile={12}
-              tablet={12}
-              computer={12}
-              className="col-full"
+        <h2>Background information</h2>
+        <HTMLField value={long_description} />
+
+        <div className="c3s-buttons">
+          <a href="#details">
+            <button className="ui button primary" onClick={toggleIframe}>
+              {showDetails ? 'Go back' : 'Explore in detail'}
+            </button>
+          </a>
+          <a href="/knowledge/european-climate-data-explorer/">
+            <button className="ui button primary">ECDE homepage</button>
+          </a>
+        </div>
+
+        {definition_app && !hasIndicatorTitle && (
+          <Accordion>
+            <Accordion.Title
+              className="accordion-title "
+              active={activeAccIndex === 0}
+              index={0}
+              onClick={handleAccClick}
             >
-              <a
-                href="/knowledge/european-climate-data-explorer/"
-                className="btn-right"
-              >
-                <button className="ui button primary">ECDE homepage</button>
-              </a>
-              <h1>{content.title}</h1>
-              <HTMLField
-                value={content.long_description}
-                className="long_description"
-              />
-              <a href="#details" className="btn-right">
-                <button className="ui button primary" onClick={toggleIframe}>
-                  {showDetails ? 'Go back' : 'Explore in detail'}
-                </button>
-              </a>
-              <h2>
-                {content.indicator_title} {showDetails && ' - Explore index'}
-              </h2>
-              {!__SERVER__ && !showDetails && <Overview {...props} />}
-              {!__SERVER__ && showDetails && <Details {...props} />}
+              <span>Visualisation and Navigation</span>
+              {activeAccIndex === 0 ? (
+                <Icon name="ri-arrow-up-s-line" size="24px" />
+              ) : (
+                <Icon name="ri-arrow-down-s-line" size="24px" />
+              )}
+            </Accordion.Title>
+            <Accordion.Content active={activeAccIndex === 0}>
+              <HTMLField value={definition_app} />
+            </Accordion.Content>
+          </Accordion>
+        )}
+
+        <h2>
+          {hasIndicatorTitle && <>{indicator_title}</>}
+          {showDetails && ' - Explore index'}
+        </h2>
+
+        <div>
+          {!__SERVER__ && !showDetails && <Overview {...props} />}
+          {!__SERVER__ && showDetails && <Details {...props} />}
+        </div>
 
+        <div className="content-box">
+          <div className="content-box-inner">
+            <Segment>
               <p>
                 Content in the European Climate Data Explorer pages is delivered
                 by the{' '}
                 <a href="https://climate.copernicus.eu/">
                   Copernicus Climate Change Service (C3S)
                 </a>{' '}
-                implemented by ECMWF.{' '}
+                implemented by ECMWF.
+              </p>
+              <p>
                 <a href="/knowledge/european-climate-data-explorer/disclaimer">
                   Disclaimer
                 </a>
               </p>
-            </Grid.Column>
+            </Segment>
           </div>
-        </Grid>
+        </div>
       </div>
     </div>
   );