<!DOCTYPE html>
<%- include("./snippets/timon.ejs") %>
<html lang="de-ch" data-theme="light">
    <head>
        <%- include("./snippets/head.ejs", {
            title: title,
            date: date,
            desc: desc,
            url: url,
            env: env,
            sitetype: sitetype
        }) %>
        <script type="text/javascript" src="/js/donate.js" defer></script>
    </head>
    <body>
        <%- include("./snippets/header.ejs") %>
        <%- include("./snippets/nav.ejs") %>
        <main>
            <%- include("./snippets/hero.ejs", {
                img_alt: donate.alt,
                img_path: donate.bild,
                title: donate.titel,
                subtitle: "",
                cta_text: "Spenden",
                cta_link: "#scrollToDonate",
                origin_url
            }) %>
            <div id="scrollToDonate" class="donate-wrapper">
                <h1 class="donate-title">Ich helfe mit</h1>
                <div class="donate-decider">
                    <button type="button" class="donate-decider-btn active" id="donate_switch_onetime">Einmalig</button>
                    <button type="button" class="donate-decider-btn" id="donate_switch_member">Regelm√§ssig</button>
                </div>
                <div class="donate-onetime active">
                    <div class="donate-amount">
                        <div class="donate-currency">CHF</div>
                        <input type="number" name="donate50" class="donate-number" value="50" disabled>
                    </div>
                    <div class="donate-amount">
                        <div class="donate-currency">CHF</div>
                        <input type="number" name="donate80" class="donate-number" value="80" disabled>
                    </div>
                    <div class="donate-amount">
                        <div class="donate-currency">CHF</div>
                        <input type="number" name="donate120" class="donate-number" value="120" disabled>
                    </div>
                    <div class="donate-amount">
                        <div class="donate-currency">CHF</div>
                        <input type="number" id="donate_custom" class="donate-number" placeholder="___" min="1" max="100000000">
                    </div>
                </div>
                <div class="donate-membership">
                    <div class="donate-amount">
                        <div class="donate-currency">CHF / Monat</div>
                        <input type="number" name="donate20" class="donate-number" value="50" disabled>
                    </div>
                </div>
                <div class="donate-btn-wrapper">
                    <button type="button" class="hero-cta donate-btn" id="donate_btn_iban" data-redir="https://ik.imagekit.io/zmt/pdf/Rechnung%20Spendenkonto.pdf">Jetzt Spenden</button>
                    <button type="button" class="hero-cta donate-btn secondary" id="donate_btn">Online Spenden</button>
                </div>
            </div>
        </main>
        <%- include("./snippets/footer.ejs", {
            origin_url: origin_url,
            js: js
        }) %>
    </body>
</html>