جزيرة شُورى

1<!-- begin sections/milestonesSlider --> 

2<section class="milestonesSlider"> 

3    <div class="milestonesSlider__inner wrapper" data-milestones-slider> 

4        <!-- begin components/heading --> 

5        <div class="heading heading--gold milestonesSlider__title"> 

6            <h2 class="heading__title"> 

7                ${sliderTitle.getData()} 

8            </h2> 

9        </div> 

10        <!-- end components/heading --> 

11        <div class="milestonesSlider__sliderWrapper"> 

12            <div class="milestonesSlider__slider swiper" data-milestones-slider-slider> 

13                <div class="milestonesSlider__items swiper-wrapper"> 

14                    <#list milestone.getSiblings() as curMilestone> 

15                        <div class="milestonesSlider__item swiper-slide"> 

16                            <!-- begin components/heading --> 

17                            <div class="heading heading--date milestonesSlider__itemText"> 

18							    <span class="heading__title"> 

19                                    ${curMilestone.date.getData()?datetime("yyyy-MM-dd")?string('d MMMM yyyy')} 

20                                </span> 

21                                <h3 class="heading__subtitle"> 

22                                    ${curMilestone.title.getData()} 

23                                </h3> 

24                                <p class="heading__text"> 

25                                    ${curMilestone.description.getData()} 

26                                </p> 

27                                <!-- begin components/button --> 

28                                <#assign dataGAProps = "{&quot;button_name&quot;:&quot;${curMilestone.buttonText.getData()}&quot;,"> 

29                                <#assign dataGAProps += "&quot;page_destination&quot;:&quot;${curMilestone.buttonUrl.getData()}&quot;"> 

30                                <#assign dataGAProps += "&quot;language&quot;:&quot;${themeDisplay.getLocale().getDisplayLanguage()}&quot;}"> 

31                                <a href="${curMilestone.buttonUrl.getData()}" class="button button--gold heading__button heading__button--desktop" data-wave-button 

32                                   data-ga="button_click" data-ga-props="${dataGAProps}"> 

33                                    <span class="button__text">${curMilestone.buttonText.getData()}</span> 

34                                </a> 

35                                <!-- end components/button --> 

36                                <!-- begin components/moreButton --> 

37                                <a href="${curMilestone.buttonUrl.getData()}" class="moreButton moreButton--gold heading__button heading__button--mobile" 

38                                   data-ga="button_click" data-ga-props="${dataGAProps}"> 

39                                    <span class="moreButton__text">${curMilestone.buttonText.getData()}</span> 

40                                </a> 

41                                <!-- end components/moreButton --> 

42                            </div> 

43                            <!-- end components/heading --> 

44                            <div class="milestonesSlider__itemImage"> 

45                                <#if (curMilestone.image.getData())?? && curMilestone.image.getData() != ""> 

46                                    <img 

47                                            class="milestonesSlider__itemImg" 

48                                            src="${curMilestone.image.getData()}" 

49                                            alt="${curMilestone.image.getAttribute("alt")}" 

50                                            data-fileentryid="${curMilestone.image.getAttribute("fileEntryId")}" 

51                                            loading="lazy" 

52                                    /> 

53                                </#if> 

54                            </div> 

55                        </div> 

56                    </#list> 

57                </div> 

58            </div> 

59        </div> 

60        <div class="milestonesSlider__timelineSliderWrapper"> 

61            <div class="milestonesSlider__timelineSlider swiper" data-milestones-slider-timeline-slider> 

62                <div class="milestonesSlider__timelineItems swiper-wrapper"> 

63                    <#list milestone.getSiblings() as curMilestone> 

64                        <div class="milestonesSlider__timelineItem swiper-slide"> 

65                            <button 

66                                    class="milestonesSlider__milestone milestonesSlider__milestone--active" 

67                                    data-milestones-slider-timeline-item="${curMilestone?index}" 

68                            > 

69                                <div class="milestonesSlider__milestoneLabel"> 

70                                    <span class="milestonesSlider__milestoneDate">${curMilestone.date.getData()?datetime("yyyy-MM-dd")?string('d MMMM yyyy')}</span> 

71                                    <span class="milestonesSlider__milestoneTitle">${curMilestone.title.getData()}</span> 

72                                </div> 

73                                <div class="milestonesSlider__milestoneStatus milestonesSlider__milestoneStatus--${curMilestone.status.getData()}"> 

74                                    <div class="milestonesSlider__milestoneStatusInner"><#if curMilestone.status.getData() == 'inProgress'>In progress<#elseif curMilestone.status.getData() == 'planned'>planned</#if> </div> 

75                                </div> 

76                            </button> 

77                        </div> 

78                    </#list> 

79                </div> 

80            </div> 

81            <!-- begin components/sliderNav --> 

82            <div class="sliderNav sliderNav--grayDrop milestonesSlider__nav" data-milestones-slider-nav data-slider-nav> 

83                <!-- begin components/arrowButton --> 

84                <button class="arrowButton arrowButton--prev arrowButton--grayDrop sliderNav__arrow sliderNav__arrow--prev" data-slider-nav-prev> 

85                    <span class="arrowButton__arrow"></span> 

86                </button> 

87                <!-- end components/arrowButton --> 

88                <div class="sliderNav__indicator"> 

89					<span 

90                            class="sliderNav__number sliderNav__number--current" 

91                            data-slider-nav-number-current> 

92 

93                        1 

94                    </span> 

95                    <span 

96                            class="sliderNav__number sliderNav__number--total" 

97                            data-slider-nav-number-total> 

98 

99                        ${milestone.getSiblings()?size} 

100                    </span> 

101                </div> 

102                <!-- begin components/arrowButton --> 

103                <button class="arrowButton arrowButton--next arrowButton--grayDrop sliderNav__arrow sliderNav__arrow--next" data-slider-nav-next> 

104                    <span class="arrowButton__arrow"></span> 

105                </button> 

106                <!-- end components/arrowButton --> 

107            </div> 

108            <!-- end components/sliderNav --> 

109        </div> 

110    </div> 

111</section> 

112<!-- end sections/milestonesSlider -->