<!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
        }) %>
        <link rel="stylesheet" href="/css/static.css">
        <script type="text/javascript" src="/js/profile.js" defer></script>
    </head>
    <body>
        <%- include("./snippets/header.ejs") %>
        <%- include("./snippets/nav.ejs") %>
        <main>
            <div class="you">
                <div class="static">
                    <div class="img">
                        <img alt="Dein Profilbild" src="<%= user.picture + "?timestamp=" + Date().toString() %>">
                        <button type="button" class="edit_picture" id="edit_picture">
                            <img alt="Ein Stift zum bearbeiten" src="/img/svg/pen.svg">
                        </button>
                    </div>
                    <% // .replace(/([^\.\@]{10})(?=[^\.\@])/g, "$1<wbr>") === Replaces every string without a . or @ that is 10 characters long 
                       // with a <wbr> tag that breaks the line %>
                    <h2><%= user.name.replace(/([^\.\@]{10})(?=[^\.\@])/g, "$1<wbr>") + " " + user.family_name.replace(/([^\.\@]{10})(?=[^\.\@])/g, "$1<wbr>") %></h2>
                    <p>
                        <%- user.email.replace(/([^\.\@]{10})(?=[^\.\@])/g, "$1<wbr>").replace(/([\.\@])/g, "<wbr>$1") %><%
                        if (user.type === "admin" || user.type === "member") {
                        %><br>
                        <br>
                        <span class="user_type_member"><%= user.type.replace("admin", "Verwalter").replace("member", "Mitglied") %></span><% }; %>
                    </p>
                </div>
                <div class="dynamic">
                    <div class="top">
                        <button type="button" id="profile_dashboard_btn1" class="link active">Einstellungen</button>
                        <button type="button" id="profile_dashboard_btn2" class="link">Präferenzen</button>
                        <button type="button" id="profile_dashboard_btn3" class="link">Mitgliedschaft</button>
                    </div>
                    <div class="settings active">
                        <label for="email">E-Mail</label>
                        <div class="profile-settings-input">
                            <img alt="Eine Brief" src="/img/svg/mail.svg">
                            <input type="text" autocomplete="email" id="email" placeholder="<%= user.email %>">
                        </div>
                        <label for="password">Passwort</label>
                        <div class="profile-settings-input">
                            <img alt="Ein Schloss" src="/img/svg/lock.svg">
                            <input type="password" autocomplete="current-password" id="password" value="<%= user.password %>" placeholder="<%= user.password %>">
                            <img alt="Ein Auge (Zu oder offen)" src="/img/svg/eye.svg" id="show_password">
                        </div>
                        <label for="name">Vorname</label>
                        <div class="profile-settings-input">
                            <img alt="Buchstaben" src="/img/svg/text.svg">
                            <input type="text" autocomplete="given-name" id="name" placeholder="<%= user.name %>">
                        </div>
                        <label for="family_name">Nachname</label>
                        <div class="profile-settings-input">
                            <img alt="Buchstaben" src="/img/svg/text.svg">
                            <input type="text" autocomplete="family-name" id="family_name" placeholder="<%= user.family_name %>">
                        </div>
                        <label for="address">Adresse</label>
                        <div class="profile-settings-input">
                            <img alt="Ein Standort" src="/img/svg/location.svg">
                            <input type="text" autocomplete="address-line1" id="address" placeholder="<%= user.address %>">
                        </div>
                        <label for="phone">Telefonnummer</label>
                        <div class="profile-settings-input">
                            <img alt="Ein Telefon" src="/img/svg/phone.svg">
                            <input type="text" autocomplete="tel" id="phone" placeholder="<%= user.phone %>">
                        </div>
                        <button type="button" id="profile-settings-input-submit" class="submit">Einstellungen aktualisieren</button>
                    </div>
                    <div class="preferences">
                        <div class="profile-preferences-div preferences-darkmode-div">
                            <p>Darkmode:</p>
                            <label for="preferences_darkmode" class="uiverse ui-switch">
                                <input id="preferences_darkmode" name="darkmode" type="checkbox" class="uiverse" <% if (user?.darkmode) { %>checked="true"<% }; %>>
                                <div class="uiverse slider">
                                    <div class="uiverse circle"></div>
                                </div>
                            </label>
                        </div>
                        <div class="notifications_newsletter">
                            <p>Ich möchte gerne den Newsletter erhalten:</p>
                            <label for="notifications_newsletter" class="static-checkbox uiverse hirachy-class">
                                <input type="checkbox" id="notifications_newsletter">
                                <div class="uiverse static-checkbox-mark"></div>
                            </label>
                            <select id="newsletterSignUpOption">
                                <option value="" disabled selected>Anrede</option>
                                <option value="Herr">Herr</option>
                                <option value="Frau">Frau</option>
                                <option value="Divers">Divers</option>
                            </select>
                        </div>
                        <div class="invisible">
                            <div id="profile_name"><%= user.name %></div>
                            <div id="profile_f_name"><%= user.family_name %></div>
                            <div id="profile_email"><%= user.email %></div>
                        </div>
                    </div>
                    <div class="membership">
                        <div class="profile-membership"><%
                        if (user.type !== "user") { %>
                            <div class="invoices">
                                <h1 class="title">Rechnungen</h1>
                                <table class="invoice">
                                    <thead>
                                        <tr>
                                            <th>Id</th>
                                            <th>Abonnement</th>
                                            <th>Preis</th>
                                            <th>Status</th>
                                            <th>Link</th>
                                            <th>Datei</th>
                                        </tr>
                                    </thead>
                                    <tbody id="invoice_append"></tbody>
                                </table>
                            </div><% 
                        } else { %>
                            <button type="button" class="hero-cta donate-btn mitglied" id="get_member">Mitglied werden</button><% 
                        }; %>
                        </div>
                    </div>
                </div>
            <div id="picture_overlay">
                <label for="file_upload" class="custom-file-upload">
                    <div class="icon">
                        <img alt="Eine Datei" src="/img/svg/file.svg" id="file_preview">
                    </div>
                    <div class="text">
                       <span>Klicken um ein neues Bild hochzuladen</span>
                    </div>
                    <input type="file" id="file_upload" accept="image/png, image/jpg, image/gif, image/jpeg, image/tiff, image/raw, image/bpm, image/webp, image/ico">
                    <button id="file_submit" class="cta-btn">Hochladen</button>
                </label>
            </div>
            <div id="close_picture_overlay"></div>
        </main>
        <%- include("./snippets/footer.ejs", {
            origin_url: origin_url,
            js: js
        }) %>
    </body>
</html>