<link rel="stylesheet" type="text/css" href="{{asset "css/newsletter.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/footer.css"}}" />

<footer class="footer">
    <custom-footer>
        <div class="wide-container footer-inner">
            <div class="footer-content">
                <div class="footer-description">
                    <a class="footer-logo" href="{{@site.url}}">
                        {{#if @site.logo}}
                            <img class="footer-logo-image" src="{{@site.logo}}" alt="{{@site.title}}">
                        {{else}}
                            <div class="footer-logo-text">
                                {{@site.title}}
                            </div>                       
                        {{/if}}
                    </a>

                    <div class="footer-paragraph-wrapper">
                        <p>{{@site.description}}</p>
                    </div>

                    {{#if @site.members_enabled}}
                        {{#unless @site.members_invite_only}}
                            {{#unless @member}}
                                <form data-members-form="subscribe" class="subscribe-form footer-form">
                                    <div class="subscribe-with-alerts">
                                        <div class="subscribe-wrapper">
                                            <input data-members-email type="email" required="true" placeholder="{{t 'Your.email@example.com'}}" class="subscribe-input"/>
                                            <button class="submit-button" type="submit" aria-label="Subscribe">
                                                {{t "Subscribe"}}
                                            </button>
                                        </div>

                                        <div class="form-alerts">
                                            <small class="form-alert loading-alert">{{t "Processing your request..."}}</small>
                                            <small class="form-alert success-alert">{{t "Please check your inbox and click the link to confirm your subscription."}}</small>
                                            <small class="form-alert error-alert" data-members-error></small>
                                        </div> 
                                    </div>            
                                </form>
                            {{/unless}}
                        {{/unless}}
                    {{/if}}

                    <div class="socials footer-socials">
                            {{#if @site.facebook}}
                                <a href="{{facebook_url @site.facebook}}" target="_blank" class="social" aria-label="Facebook">
                                    <div class="social-inner">
                                        {{> "icons/facebook-icon"}}
                                    </div>
                                </a>
                            {{/if}}   

                            {{#if @site.twitter}}
                                <a href="{{twitter_url @site.twitter}}" target="_blank" class="social" aria-label="Twitter">
                                    <div class="social-inner">
                                        {{> "icons/twitter-icon"}}
                                    </div>
                                </a>
                            {{/if}}   

                            <a href="#" id="instagram-footer" target="_blank" class="social" aria-label="Instagram">
                                <div class="social-inner social-inner-smaller">
                                    {{> "icons/instagram-icon"}}
                                </div>
                            </a>

                            <a href="#" id="linkedin-footer" target="_blank" class="social" aria-label="Linkedin">
                                <div class="social-inner social-inner-smaller">
                                    {{> "icons/linkedin-icon"}}
                                </div>
                            </a>

                            <a href="#" id="pinterest-footer" target="_blank" class="social" aria-label="Pinterest">
                                <div class="social-inner">
                                    {{> "icons/pinterest-icon"}}
                                </div>
                            </a>     
                    </div>
                </div>

                <nav class="footer-navigation">
                    <ul class="footer-normal-links-group footer-links-group">
                        <li class="footer-nav-navigation">
                            <div class="footer-links-label">
                                {{t "Navigation"}}
                            </div>
                            <ul class="footer-secondary-links footer-normal-links">

                            </ul>
                        </li>
                    </ul>
                    {{navigation type="secondary" }}
                </nav>
            </div>

            <div class="footer-bottom">
                &copy;&nbsp;{{date format="YYYY"}}&nbsp;<a class="hover-underline" href="{{@site.url}}">{{@site.title}}</a>&nbsp;-&nbsp;{{t "Published with"}}&nbsp;<a href="https://ghost.org/" target="_blank" class="hover-underline">Ghost</a><span>&nbsp;&&nbsp;</span><a class="hover-underline" href="https://www.kusa-projects.com/" target="_blank">{{@site.title}}</a>
            </div>
        </div>
    </custom-footer>
</footer>