<footer class="gh-foot{{^match @custom.background_color "#ffffff"}} gh-foot--colored{{/match}}">
    <div class="gh-foot-subscription-wrapper">
        <div class="gh-foot-subscription-opacity-wrapper"></div>
        <div class="gh-foot-subscription-bg-color"></div>
        <div class="gh-container">
			{{#if @site.members_enabled}}
				{{#if @member}}
					<div class="gh-foot-subscription{{#get "posts" limit="100"}}{{^match posts.length ">=" "20"}} gh-foot-subscription--image{{/match}}{{/get}}">
						<div class="gh-foot-subscription-content">
							<h3 class="gh-foot-subscription-cta-text">
								{{@custom.cta_text_for_subscription_section}}
							</h3>
							<p class="gh-foot-subscription-cta-subtext">
								{{@custom.cta_subtext_for_subscription_section}}
							</p>
							{{#if @site.members_enabled}}
								{{#get "pages" slug="membership"}}
									{{#if pages}}
										{{#unless @member}}
											<a class="gh-main-button gh-subscribe-button" href="{{@site.url}}/#/portal/signup" aria-label="{{t "Sign up button"}}">
												{{t "Sign Up"}}
											</a>
									{{else}}
											<a class="gh-main-button gh-subscribe-button" href="{{@site.url}}/membership" aria-label="{{t "Membership button"}}">
												{{t "Membership"}}
											</a>
										{{/unless}}
									{{else}}
										{{#unless @member}}
											<a class="gh-main-button gh-subscribe-button" href="{{@site.url}}/#/portal/signup" aria-label="{{t "Sign up button"}}">
												{{t "Sign Up"}}
											</a>
										{{/unless}}
									{{/if}}
								{{/get}}
							{{/if}}
						</div>
						{{#match pagination.total ">=" "20" }}
							<div class="gh-foot-subscribtion-sliders-wrapper">
								<div class="gh-foot-slider-wrapper">
									<div class="gh-foot-slider gh-foot-slider--forward">
										<div class="swiper-wrapper">
											{{#get "posts" limit="10" page="2" order="published_at desc" filter="feature_image:-null"}}
												{{#foreach posts}}
													<div class="swiper-slide gh-foot-slider-slide">
														<picture>
															<source srcset="{{img_url feature_image size="600" format="webp"}} 600w, {{img_url feature_image size="300" format="webp"}} 300w" sizes="224px" type="image/webp">
															<img srcset="{{img_url feature_image size="600"}} 600w, {{img_url feature_image size="300"}} 300w" sizes="224px" src="{{img_url feature_image size="300"}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}} {{t "post feature image"}}{{/if}}" loading="lazy">
														</picture>
													</div>
												{{/foreach}}
											{{/get}}
										</div>
									</div>
								</div>
								<div class="gh-foot-slider-wrapper">
									<div class="gh-foot-slider gh-foot-slider--reverse">
										<div class="swiper-wrapper">
											{{#get "posts" limit="10" page="1" order="published_at desc" filter="feature_image:-null"}}
												{{#foreach posts}}
													<div class="swiper-slide gh-foot-slider-slide">
														<picture>
															<source srcset="{{img_url feature_image size="600" format="webp"}} 600w, {{img_url feature_image size="300" format="webp"}} 300w" sizes="224px" type="image/webp">
															<img srcset="{{img_url feature_image size="600"}} 600w, {{img_url feature_image size="300"}} 300w" sizes="224px" src="{{img_url feature_image size="300"}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}} {{t "post feature image"}}{{/if}}" loading="lazy">
														</picture>
													</div>
												{{/foreach}}
											{{/get}}
										</div>
									</div>
								</div>
							</div>
            {{else}}
							<div class="gh-footer-cover-image-wrapper">
								<picture>
									<source srcset="{{img_url @site.cover_image size="1200" format="webp"}} 1200w, {{img_url @site.cover_image size="800" format="webp"}} 800w, {{img_url @site.cover_image size="500" format="webp"}} 500w" sizes="40vw" type="image/webp">
									<img class="gh-footer-cover-image" srcset="{{img_url @site.cover_image size="1200"}} 1200w, {{img_url @site.cover_image size="800"}} 800w, {{img_url @site.cover_image size="500"}} 500w" sizes="40vw" src="{{img_url @site.cover_image size="1200"}}" alt="{{@site.title}} {{t "cover image"}}" loading="lazy">
								</picture>
							</div>
						{{/match}}
					</div>
				{{else}}
					{{> "thin-banner"}}
				{{/if}}
			{{/if}}
        </div>
    </div>
    <div class="gh-foot-main-wrapper">
        <div class="gh-container">
            <div class="gh-foot-main-container">
                <div class="gh-foot-main">
                    <div class="gh-foot-main-content">
                        <a class="gh-site-logo {{#if @custom.dark_mode_logo}}gh-site-logo-has-DM-logo{{/if}}" href="{{@site.url}}" aria-label="{{@site.title}} {{t "logo and home page link"}}">
                            {{#if @site.logo}}
                                {{#if @custom.dark_mode_logo}}
                                    <img src="{{img_url @custom.dark_mode_logo}}"
                                         alt="{{@site.title}} {{t "icon"}}" class="gh-site-logo-img-dark-mode">
                                {{/if}}
                                <img src="{{img_url @site.logo}}"
                                     alt="{{@site.title}} {{t "icon"}}" class="gh-site-logo-img">
                            {{else}}
                                <h1 class="gh-site-title">{{@site.title}}</h1>
                            {{/if}}
                        </a>
                        <p class="gh-foot-main-text">
                            {{@site.description}}
                        </p>
                        {{> "socials"}}
                    </div>
                    <div class="gh-foot-navigation">
                        {{navigation type="secondary"}}
                    </div>
                </div>
                <div class="gh-foot-legal">
                    <div class="gh-foot-legal-meta">
                        {{t "Copyright ©"}} {{date format='YYYY'}} {{@site.title}}. {{t "Published with"}} <a href="https://ghost.org" target="_blank"
																											  rel="noopener" aria-label="{{t "Ghost CMS official website link"}}">Ghost</a> {{t "and"}} <a href="{{@site.url}}" aria-label="{{@site.title}} {{t "website link"}}">{{@site.title}}</a>.
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
