{{!--
    Parameters:
    - type: String
    - accountPage: Boolean
    - hasLink: Boolean
--}}

<link rel="stylesheet" type="text/css" href="{{asset "css/simple-hero.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/form-page.css"}}" />

<div class="wide-container">
    <section class="full-page-section">
        <div class="form-page-content{{#match type "contact"}} contact-content{{/match}}">
            <h1 class="text-card-heading">
                {{title}}
            </h1>

            <p class="form-page-excerpt">
                {{custom_excerpt}}
            </p>

            {{#match type "contact"}}
                <div class="form-container contact-form-container">
                    <form class="contact-form" action="https://formspree.io/f/{{@custom.formspree_hash_id}}" method="POST" id="contactForm">
                        <div class="contact-form-inputs">
                            <input type="text" name="name" placeholder="{{t 'Your name'}}" required>
                            <input type="email" name="email" placeholder="{{t 'Your email address'}}" required>
                        </div>
                        <textarea name="message" placeholder="{{t 'Your message'}}" required></textarea>
                        <button class="button vertical-form-button" type="submit">
                            {{t "Send message"}}
                        </button>
                    </form>
                </div>
            {{/match}}

            {{#if @site.members_enabled}}
                {{#if accountPage}}
                    <custom-form class="form-container">
                        <form data-members-form="{{type}}" data-members-autoredirect="false" class="page-form-element">
                            {{#match type "signin"}}
                                <div class="subscribe-wrapper">
                                    <input data-members-email type="email" required="true" placeholder="{{t 'Your email address'}}" class="subscribe-input"/>
                                    <button class="submit-button" type="submit" aria-label="Subscribe">
                                        {{t "Subscribe"}}
                                    </button>
                                </div>
                            {{else}}  
                                <div class="vertical-form">
                                    <input data-members-name type="text" required="true" placeholder="{{t 'Your name'}}"/>
                                    <input data-members-email type="email" required="true" placeholder="{{t 'Your email address'}}"/>
                                    <button class="button vertical-form-button" type="submit">{{#match type "signup"}}{{t "Continue"}}{{else}}{{t "Subscribe"}}{{/match}}</button>
                                </div>                              
                            {{/match}}

                            <div class="form-alerts">
                                <small class="form-alert loading-alert">{{t "Processing your request..."}}</small>
                                <small class="form-alert error-alert" data-members-error></small>
                            </div> 

                            {{#if hasLink}}
                                {{#unless @site.members_invite_only}}
                                    <small class="under-form-text">
                                        <span class="lower-opacity-small-text">
                                            {{#match type "signin"}}{{t "Don't have an account yet?"}}{{else}}{{t "Already have an account?"}}{{/match}}
                                        </span>
                                        <a class="bold-link" href="{{@site.url}}/{{#match type "signin"}}signup{{else}}signin{{/match}}/">
                                            {{#match type "signin"}}{{t "Sign up"}}{{else}}{{t "Sign in"}}{{/match}}
                                        </a>
                                    </small>
                                {{/unless}}
                            {{/if}}
                        </form>

                        <a href="{{@site.url}}" class="button form-success-button">{{t "Back to homepage"}}</a>

                        <span id="form-success-heading-text" class="hidden" data-success-heading="{{t 'Great!'}}"></span>
                        <span id="form-success-paragraph-text" class="hidden" data-success-paragraph="
                            {{#match type "signup"}}{{t 'Please check your inbox and click the link to confirm your signup.'}}{{/match}}
                            {{#match type "signin"}}{{t 'Please check your inbox and click the link to complete signin.'}}{{/match}}
                            {{#match type "subscribe"}}{{t 'Please check your inbox and click the link to confirm your subscription.'}}{{/match}}
                            ">
                        </span>
                    </custom-form>
                {{/if}}
            {{/if}}

            {{#match type "404"}}
                <div class="form-container">
                    <a class="button" href="{{@site.url}}">{{t "Back to homepage"}}</a>
                </div>
            {{/match}}
        </div>
    </section>
</div>