<!DOCTYPE html>
<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/private.js" defer></script>
    </head>
    <body>
        <%- include("../snippets/header.ejs") %>
        <%- include("../snippets/nav.ejs") %>
        <main>
            <div class="general container">
                <h1 class="basic-title">Webseiten</h1>
                <p class="basic-text"><a class="basic-link" href="/private/writeBlog">Zum Blog Builder</a></p>
                <p class="basic-text"><a class="basic-link" href="https://analytics.google.com/analytics/web/">Google Analytics</a></p>
                <p class="basic-text"><a class="basic-link" href="https://dashboard.stripe.com/dashboard">Stripe</a></p>
                <p class="basic-text"><a class="basic-link" href="https://imagekit.io/dashboard/media-library">ImageKit</a></p>
                <p class="basic-text"><a class="basic-link" href="https://app.mailjet.com/dashboard">Mailjet</a></p>
                <div class="table-container">
                    <table>
                        <tr>
                            <th>Webseite</th>
                            <th>E-Mail</th>
                            <th>Passwort</th>
                        </tr>
                        <tr>
                            <td>Google</td>
                            <td>zuerich.meets.tanzania@gmail.com</td>
                            <td><%= passwords.gmail %></td>
                        </tr>
                        <tr>
                            <td>ImageKit</td>
                            <td>zuerich.meets.tanzania@gmail.com</td>
                            <td><%= passwords.imagekit %></td>
                        </tr>
                        <tr>
                            <td>Stripe</td>
                            <td>info@zurich-meets-tanzania.com</td>
                            <td><%= passwords.stripe %></td>
                        </tr>
                        <tr>
                            <td>Mailjet</td>
                            <td>info@zurich-meets-tanzania.com</td>
                            <td><%= passwords.mailjet %></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="news-management container">
                <h1 class="basic-title">Verwaltung Aktuelles</h1>
                <p class="basic-text">Hier können News verteilt werden.</p>
                <form id="news_form" action="/post/submitNews" method="POST">
                    <label for="news_text" class="basic-label">Text</label>
                    <input type="text" class="basic-input" id="news_text" name="text" required>
                    <label for="news_pdf" class="basic-label">PDF oder Bild (Auswählen für PDF)</label>
                    <input type="checkbox" id="news_pdf" name="pdf" class="basic-checkbox">
                    <div id="show_pdf" style="display: none;">
                        <label for="news_pdf_src" class="basic-label">Dateiname mit .pdf Endung hochgeladen auf imagekit unter dem Ordner pdf (Bsp: meinPDF.pdf)</label>
                        <input type="text" class="basic-input" id="news_pdf_src" name="pdf_src">
                    </div>
                    <div id="show_img">
                        <label for="news_img_file" class="basic-label">Bild</label>
                        <input type="file" class="basic-input" id="news_img_file" name="img_file" accept="image/png, image/jpg, image/gif, image/jpeg, image/tiff, image/raw, image/bpm, image/webp, image/ico">
                        <label for="news_img_alt" class="basic-label">Beschreibung des Bild</label>
                        <input type="text" class="basic-input" id="news_img_alt" name="img_alt">
                        <label for="news_img_pos" class="basic-label">Positionierung des Bildes (left, center oder right)</label>
                        <input type="text" class="basic-input" id="news_img_pos" name="img_pos">
                    </div>
                    <label for="news_btn" class="basic-label">Einen Button?</label>
                    <input type="checkbox" id="news_btn" name="btn" checked="true" class="basic-checkbox">
                    <div id="show_btn_menu">
                        <label for="news_btn_text" class="basic-label">Button Text</label>
                        <input type="text" class="basic-input" id="news_btn_text" name="btn_text">
                        <label for="news_btn_link" class="basic-label">Button Link</label>
                        <input type="text" class="basic-input" id="news_btn_link" name="btn_link">
                    </div>
                    <div id="show_nothing" class="invisible"></div>
                    <button type="submit" class="basic-button">Veröffentlichen</button>
                </form>
            </div>
            <div class="team-management container">
                <h1 class="basic-title">Team Erstellen</h1>
                <p class="basic-text">Hier kann ein neues Team erstellt werden</p>
                <label for="team_name" class="basic-label">Leitsatz für das Team</label>
                <input type="text" class="basic-input" id="team-m-leitsatz">
                <label for="team_desc" class="basic-label">Kurze Beschreibung</label>
                <input type="text" class="basic-input" id="team-m-beschreibung">
                <label for="team-m-img" class="basic-label">Bild</label>
                <input type="file" class="basic-input" id="team-m-img" accept="image/png, image/jpg, image/gif, image/jpeg, image/tiff, image/raw, image/bpm, image/webp, image/ico">
                <p class="basic-text">Mitglieder können nach dem Erstellen eines Team hinzugefügt werden.</p>
                <button type="submit" class="basic-button" id="team-m-submit">Erstellen</button>
            </div>
            <div class="team-management container">
                <h1 class="basic-title">Mitglied hinzufügen</h1>
                <p class="basic-text">Hier kann ein Mitglied zum Team hinzugefügt werden</p>

                <label for="team_name" class="basic-label">E-Mail</label>
                <input type="text" class="basic-input" id="team-m-username">
                <!-- Damit bekomme ich Vor-/Nachnamen und das erste Bild -->

                <label for="team_name" class="basic-label">Job</label>
                <input type="text" class="basic-input" id="team-m-job">
                
                <label for="team_name" class="basic-label">Motivation / Leitsatz</label>
                <input type="text" class="basic-input" id="team-m-motivation">

                <button type="submit" class="basic-button" id="team-m-add">Hinzufügen</button>
            </div>
            <div class="hero-management container">
                <h1 class="basic-title">Neues Homepage Bild hochladen</h1>
                <label for="hero_img_upload" id="picture_overlay">
                    <div class="custom-file-upload">
                        <div class="icon">
                            <img alt="Eine Datei" src="/img/svg/file.svg" id="hero_file_preview">
                        </div>
                        <div class="text">
                        <span>Klicken um ein neues Bild hochzuladen</span>
                        </div>
                    </div>
                </label>
                <input style="display: none;" type="file" id="hero_img_upload" accept="image/png, image/jpg, image/gif, image/jpeg, image/tiff, image/raw, image/bpm, image/webp, image/ico">
                <button type="button" id="hero_img_upload_submit" class="basic-button">Hochladen</button>
            </div>
            <div class="container">
                <label for="make-admin" class="basic-label">Zum Admin ernennen:</label>
                <p class="basic-text">Gib eine E-Mail-Adresse ein um ihn zum Admin zu ernennen.</p>
                <input type="text" class="basic-input" id="make-admin" placeholder="E-Mail">
                <button type="button" id="submit-make-admin" class="basic-button">Ernennen</button>
                <br>
                <label for="delete-admin" class="basic-label">Adminrechte entfernen:</label>
                <p class="basic-text">Gib eine E-Mail-Adresse ein um ihm die Adminrechte zu entfernen.</p>
                <input type="text" class="basic-input" id="delete-admin" placeholder="E-Mail">
                <button type="button" id="submit-delete-admin" class="basic-button">Entfernen</button>
            </div>
            <div class="container">
                <h1 class="basic-title">Blogs zusammenfügen</h1>
                <input type="number" class="basic-input" id="merge_blogs" placeholder="Anzahl Blogs" min="2" max="100">
                <input type="text" class="basic-input" id="merge_blogs_title" placeholder="Zusammenfassender Titel">
                <input type="text" class="basic-input" id="merge_blogs_desc" placeholder="Kurze Beschreibung">
                <label for="merge_blogs_basic_img" class="basic-label">Titelbild aussuchen</label>
                <label for="merge_blogs_basic_img" id="merge_blogs_picture_overlay" style="height: 35vh; width: 60%; margin: 6vh 20%;">
                    <div class="custom-file-upload" style="max-height: 35vh; box-sizing: border-box; max-width: 60vw;">
                        <div class="icon">
                            <img alt="Eine Datei" src="/img/svg/file.svg" id="hero_file_preview" style="height: 15vh;">
                        </div>
                        <div class="text">
                            <span>Klicken um ein neues Bild hochzuladen</span>
                        </div>
                    </div>
                </label>
                <input style="display: none;" type="file" id="merge_blogs_basic_img" accept="image/png, image/jpg, image/gif, image/jpeg, image/tiff, image/raw, image/bpm, image/webp, image/ico">
                <input type="text" id="merge_blogs_basic_alt" placeholder="Beschreibe das Titelbild kurz (3-5 Wörter)" class="basic-input">
                <button type="button" id="merge_blogs_btn" class="basic-button">Zusammenfügen</button>
            </div>
            <div class="container">
                <h1 class="basic-title">Blog löschen</h1>
                <input type="text" class="basic-input" id="delete_blog" placeholder="Titel des Blogs">
                <button type="button" id="delete_blog_btn" class="basic-button">Löschen</button>
            </div>
            <div class="container">
                <h1 class="basic-title">Neue Bildergalerie hochladen</h1>
                <label for="gallery_img_upload" id="picture_overlay">
                    <div class="custom-file-upload">
                        <div class="icon">
                            <img alt="Eine Datei" src="/img/svg/file.svg">
                        </div>
                        <div class="text">
                            <span>Klicken um Bilder hochzuladen</span>
                        </div>
                    </div>
                </label>
                <input type="text" value="<%= user.name + " " + user.family_name %>" style="display: none;" id="username">
                <input style="display: none;" type="file" id="gallery_img_upload" multiple accept="image/png, image/jpg, image/gif, image/jpeg, image/tiff, image/raw, image/bpm, image/webp, image/ico, video/mp4, video/quicktime">
                <input type="text" class="basic-input" id="gallery_title" placeholder="Titel" required>
                <input type="text" class="basic-input" id="gallery_subtitle" placeholder="Beschreibung" required>
                <button type="button" id="gallery_img_upload_submit" class="basic-button">Hochladen</button>
            </div>
            <div class="container">
                <h1 class="basic-title">Bildergalerie ergänzen</h1>
                <label for="gallery_update" id="picture_overlay">
                    <div class="custom-file-upload">
                        <div class="icon">
                            <img alt="Eine Datei" src="/img/svg/file.svg">
                        </div>
                        <div class="text">
                            <span>Klicken um Bilder hochzuladen</span>
                        </div>
                    </div>
                </label>
                <input style="display: none;" type="file" id="gallery_update" multiple accept="image/png, image/jpg, image/gif, image/jpeg, image/tiff, image/raw, image/bpm, image/webp, image/ico, video/mp4, video/quicktime">
                <input type="text" class="basic-input" id="gallery_update_title" placeholder="Titel" required>
                <button type="button" id="gallery_update_submit" class="basic-button">Aktualisieren</button>
            </div>
            <div class="container">
                <h1 class="basic-title">Neues Event hinzufügen</h1>
                <label for="event_title" class="basic-label">Titel</label>
                <input type="text" class="basic-input" id="event_title" placeholder="Titel" required>
                <label for="event_data" class="basic-label">Datum (dd-mm-yyyy, Beispiel: 31-08-2024)</label>
                <input type="text" class="basic-input" id="event_date" placeholder="Datum" required>
                <button type="button" class="basic-button" id="event_submit">Hinzufügen</button>
            </div>
            <div class="container">
                <h1 class="basic-title">Event löschen</h1>
                <input type="text" class="basic-input" id="delete_event" placeholder="Titel des Events">
                <button type="button" id="delete_event_btn" class="basic-button">Löschen</button>
            </div>
            <div class="user-management container">
                <h1 class="basic-title">Mitgliederliste</h1>
                <div class="table-container">
                    <table>
                        <tr>
                            <th>E-Mail</th>
                            <th>Vorname</th>
                            <th>Nachname</th>
                            <th>Adresse</th>
                            <th>Telefonnummer</th>
                        </tr><%
                        all_users.forEach(user => {
                        if (user.type === "member") { %>
                        <tr>
                            <td><%= user.email %></td>
                            <td><%= user.name %></td>
                            <td><%= user.family_name %></td>
                            <td><%= user.address %></td>
                            <td><%= user.phone %></td>
                        </tr>
                        <% };}); %>
                    </table>
                </div>
                <h1 class="basic-title">Newsletterliste</h1>
                <div class="table-container">
                    <table>
                        <tr>
                            <th>Anrede</th>
                            <th>Vorname</th>
                            <th>Nachname</th>
                            <th>E-Mail</th>
                        </tr><%
                        all_newsletter.forEach(user => { %>
                        <tr>
                            <td><%= user.gender %></td>
                            <td><%= user.vorname %></td>
                            <td><%= user.nachname %></td>
                            <td><%= user.email %></td>
                        </tr>
                        <% }) %>
                    </table>
                </div>
                <h1 class="basic-title">Benutzerliste</h1>
                <div class="table-container">
                    <table>
                        <tr>
                            <th>E-Mail</th>
                            <th>Vorname</th>
                            <th>Nachname</th>
                            <th>Adresse</th>
                            <th>Telefonnummer</th>
                            <th>Typ</th>
                        </tr><%
                        all_users.forEach(user => { %>
                        <tr>
                            <td><%= user.email %></td>
                            <td><%= user.name %></td>
                            <td><%= user.family_name %></td>
                            <td><%= user.address %></td>
                            <td><%= user.phone %></td>
                            <td><%= user.type %></td>
                        </tr>
                        <% }) %>
                    </table>
                </div>
            </div>
        </main>
        <%- include("../snippets/footer.ejs", {origin_url: origin_url}) %>
    </body>
</html>