Reisacher-Forderung/templates/base/chat_container.html

<div class="chat-container" id="chat">
    <div class="header">
        <div class="header-left">
            <div class="avatar" style="background-color: #5468FF;">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path
                        d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
                    </path>
                </svg>
            </div>
            <div class="course-info">
                <div class="course-title">{{ forderungen_details[0].Kunde_Text }} / {{ forderungen_details[0].Beleg_Nr }}</div>
                <div class="course-participants">4 Mitarbeiter involviert</div>
            </div>
        </div>
        <div class="header-actions">
            <button class="icon-button tooltip" data-tooltip="Search">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="11" cy="11" r="8"></circle>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
            </button>
            <button class="icon-button tooltip" data-tooltip="Resource Library">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                    <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
                </svg>
            </button>
            <button class="icon-button tooltip" data-tooltip="Settings">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="3"></circle>
                    <path
                        d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
                    </path>
                </svg>
            </button>
        </div>
    </div>
    <div class="tabs">
        <div class="tab active">Diese Rechnung</div>
        <div class="tab">Alle offenen Rechnungen</div>
        <div class="tab">Dieses Fahrzeug</div>
        <div class="tab">Debitor Historie</div>
    </div>
    <div class="chat-content" id="chatContent">
        <div class="date-divider">
            <div class="divider-line"></div>
            <div class="divider-text">{{ forderungen_details[0].Beleg_Datum|date_format }}</div>
            <div class="divider-line"></div>
        </div>
        <!--
        <div class="message teacher">
            <div class="message-header">
                <div class="avatar">DKI</div>
                <div class="sender-name">Daniel Klingenstein</div>
                <div class="timestamp">04.01.2025</div>
            </div>
            <div class="message-bubble">
                Korrigierte Werkstattrechnung
            </div>
            <div class="embed-content">
                <div class="embed-header">
                    <div class="embed-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon>
                            <line x1="8" y1="2" x2="8" y2="18"></line>
                            <line x1="16" y1="6" x2="16" y2="22"></line>
                        </svg>
                    </div>
                    <div class="embed-title">Rechnung WRG25400108</div>
                </div>
                <div class="embed-body">
                    <img src="/static/assets/images/vorschau.jpg" alt="Rechnung WRG25400108" class="embed-image"  style="height:30px;">
                    <div class="embed-text">
                        ...
                    </div>
                </div>
                <div class="embed-footer">
                    <button class="embed-button" id="openResourceBtn">Öffnen</button>
                </div>
            </div>
        </div>

        <div class="message teacher">
            <div class="message-header">
                <div class="avatar">JAK</div>
                <div class="sender-name">Jennifer Walk</div>
                <div class="timestamp">22.01.2025</div>
            </div>
            <div class="message-bubble">
                AZ 3120/24 HP Schaden Rep RE kann nicht eingereicht werden. ESW Zusatzprodukte fehlen
            </div>
        </div>-->
        {% for row in forderungen_kommentare %}
        <div class="message teacher {{ row.Rolle }}">
            <div class="message-header">
                <div class="avatar">{{ row.Benutzer_ID }}</div>
                <div class="sender-name">{{ row.Name }}</div>
                <div class="timestamp">{{ row.Timestamp|date_format }}</div>
            </div>
            <div class="message-bubble">
                {{ row.Kommentar }}
            </div>
        </div>
        {% endfor %}

        <div id="chat-end">
            &nbsp;
        </div>

        <!--
        <div class="message student">
            <div class="message-header">
                <div class="avatar">CVE</div>
                <div class="sender-name">Carolin Vetter</div>
                <div class="timestamp">11.03.2025</div>
            </div>
            <div class="message-bubble">
                Stand RA
            </div>
        </div>

        <div class="date-divider">
            <div class="divider-line"></div>
            <div class="divider-text">Q2/2025</div>
            <div class="divider-line"></div>
        </div>

        <div class="message student">
            <div class="message-header">
                <div class="avatar">CVE</div>
                <div class="sender-name">Carolin Vetter</div>
                <div class="timestamp">01.04.2025</div>
            </div>
            <div class="message-bubble">
                Akteneinsicht liegt nun vor, im Diktat
            </div>
        </div>

        <div class="message teacher">
            <div class="message-header">
                <div class="avatar">JAK</div>
                <div class="sender-name">Jennifer Walk</div>
                <div class="timestamp">14.04.2025</div>
            </div>
            <div class="message-bubble">
                Stand RA
            </div>
        </div>

        <div class="message teacher">
            <div class="message-header">
                <div class="avatar">JAK</div>
                <div class="sender-name">Jennifer Walk</div>
                <div class="timestamp">22.04.2025</div>
            </div>
            <div class="message-bubble">
                Nachgefordert
            </div>
            <div class="embed-content">
                <div class="embed-header">
                    <div class="embed-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon>
                            <line x1="8" y1="2" x2="8" y2="18"></line>
                            <line x1="16" y1="6" x2="16" y2="22"></line>
                        </svg>
                    </div>
                    <div class="embed-title">Mahnung</div>
                </div>
                <div class="embed-body">
                    <img src="/static/assets/images/vorschau.jpg" alt="Mahnung 993413" class="embed-image" style="height:30px;">
                    <div class="embed-text">
                        ...
                    </div>
                </div>
                <div class="embed-footer">
                    <button class="embed-button" id="openResourceBtn">Öffnen</button>
                </div>
            </div>
        </div>




        <div class="message teacher">
            <div class="message-header">
                <div class="avatar">JAK</div>
                <div class="sender-name">Jennifer Walk</div>
                <div class="timestamp">09.05.2025</div>
            </div>
            <div class="message-bubble">
                Stand RA
            </div>
        </div>

        <div class="message student">
            <div class="message-header">
                <div class="avatar">CVE</div>
                <div class="sender-name">Carolin Vetter</div>
                <div class="timestamp">03.06.2025</div>
            </div>
            <div class="message-bubble">
                RA schreibt KD an ob geklagt werden soll und RS besteht
            </div>
        </div>

        <div class="message teacher">
            <div class="message-header">
                <div class="avatar">JAK</div>
                <div class="sender-name">Jennifer Walk</div>
                <div class="timestamp">23.06.2025</div>
            </div>
            <div class="message-bubble">
                Stand RA
            </div>
        </div>

        <div class="message student">
            <div class="message-header">
                <div class="avatar">CVE</div>
                <div class="sender-name">Carolin Vetter</div>
                <div class="timestamp">23.06.2025</div>
            </div>
            <div class="message-bubble">
                Akte im Diktat
            </div>
        </div>
        <div class="date-divider">
            <div class="divider-line"></div>
            <div class="divider-text">Q3/2025</div>
            <div class="divider-line"></div>
        </div>

        <div class="message student">
            <div class="message-header">
                <div class="avatar">CVE</div>
                <div class="sender-name">Carolin Vetter</div>
                <div class="timestamp">01.07.2025</div>
            </div>
            <div class="message-bubble">
                Warten auf RÜ Polizei
            </div>
        </div>


        <div class="message teacher">
            <div class="message-header">
                <div class="avatar">JAK</div>
                <div class="sender-name">Jennifer Walk</div>
                <div class="timestamp">15.07.2025</div>
            </div>
            <div class="message-bubble">
                Stand RA
            </div>
        </div>

        <div class="message teacher">
            <div class="message-header">
                <div class="avatar">JAK</div>
                <div class="sender-name">Jennifer Walk</div>
                <div class="timestamp">22.07.2025</div>
            </div>
            <div class="message-bubble">
                Warten auf Rückmeldung Mdt wg Rechtschutz
            </div>
        </div>

        <div class="message teacher">
            <div class="message-header">
                <div class="avatar">JAK</div>
                <div class="sender-name">Jennifer Walk</div>
                <div class="timestamp">11.08.2025</div>
            </div>
            <div class="message-bubble">
                Stand RA
            </div>
        </div>

        <div class="message student">
            <div class="message-header">
                <div class="avatar">CVE</div>
                <div class="sender-name">Carolin Vetter</div>
                <div class="timestamp">19.08.2025</div>
            </div>
            <div class="message-bubble">
                ST bez. Mit STN S+W wird nachgefordert
            </div>
        </div>

        <div class="message teacher">
            <div class="message-header">
                <div class="avatar">JAK</div>
                <div class="sender-name">Jennifer Walk</div>
                <div class="timestamp">08.09.2025</div>
            </div>
            <div class="message-bubble">
                Stand RA
            </div>
        </div>

        <div class="date-divider">
            <div class="divider-line"></div>
            <div class="divider-text">Q4/2025</div>
            <div class="divider-line"></div>
        </div>

        <div class="message teacher">
            <div class="message-header">
                <div class="avatar">JAK</div>
                <div class="sender-name">Jennifer Walk</div>
                <div class="timestamp">14.10.2025</div>
            </div>
            <div class="message-bubble">
                Klage in Vorbereitung WV 18.11.2025
            </div>
        </div>

        <div class="message student">
            <div class="message-header">
                <div class="avatar">CVE</div>
                <div class="sender-name">Carolin Vetter</div>
                <div class="timestamp">25.11.2025</div>
            </div>
            <div class="message-bubble">
                Stand RA
            </div>
        </div>

        <div class="message teacher">
            <div class="message-header">
                <div class="avatar">MDE</div>
                <div class="sender-name">Maria Dietrich</div>
                <div class="timestamp">30.11.2025</div>
            </div>
            <div class="message-bubble">
                EWB
            </div>
            <div class="embed-content">
                <div class="embed-header">
                    <div class="embed-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon>
                            <line x1="8" y1="2" x2="8" y2="18"></line>
                            <line x1="16" y1="6" x2="16" y2="22"></line>
                        </svg>
                    </div>
                    <div class="embed-title">EWB 20% 11/2025</div>
                </div>
                <div class="embed-body">
                    <img src="/static/assets/images/vorschau.jpg" alt="Buchung" class="embed-image" style="height:30px;">
                    <div class="embed-text">
                        ...
                    </div>
                </div>
                <div class="embed-footer">
                    <button class="embed-button" id="openResourceBtn">Öffnen</button>
                </div>
            </div>
        </div>

        <div class="message student">
            <div class="message-header">
                <div class="avatar">CVE</div>
                <div class="sender-name">Carolin Vetter</div>
                <div class="timestamp">04.12.2025</div>
            </div>
            <div class="message-bubble">
                gerichtliches Verfahren läuft WV 02/26
            </div>
        </div>

        <div class="date-divider">
            <div class="divider-line"></div>
            <div class="divider-text">Q1/2026</div>
            <div class="divider-line"></div>
        </div>

        <div class="message teacher">
            <div class="message-header">
                <div class="avatar">JAK</div>
                <div class="sender-name">Jennifer Walk</div>
                <div class="timestamp">19.02.2026</div>
            </div>
            <div class="message-bubble">
                Stand RA
            </div>
        </div>

        <div class="message teacher">
            <div class="message-header">
                <div class="avatar">JAK</div>
                <div class="sender-name">Jennifer Walk</div>
                <div class="timestamp">09.03.2026</div>
            </div>
            <div class="message-bubble">
                Schreiben von RAW erhalten. Sehr verwirrend, nochmals nachgefragt
            </div>
        </div>

        <div class="message teacher">
            <div class="message-header">
                <div class="avatar">JAK</div>
                <div class="sender-name">Jennifer Walk</div>
                <div class="timestamp">10.03.2026</div>
            </div>
            <div class="message-bubble">
                Vergleich mit HP Versicherung nun KD angeschrieben ob bei seiner Kasko eingereicht wird oder nicht
            </div>
        </div>
    -->

    </div>
    <div class="input-area">
        <div class="toolbar">
            <form>
                <button class="btn btn-primary">
                    <i class="icon icon-lg cil-paperclip"></i>
                </button>
                <input type="hidden" name="source" value="comments" />
                <input type="text" class="message-input" id="comment" name="Kommentar" placeholder="Kommentieren ..."
                    autofocus="autofocus" />
                <button class="btn btn-primary" hx-post="" hx-trigger="click" hx-swap="outerHTML" hx-target="#chat" hx-push-url="false">
                    <i class="icon icon-lg cil-chevron-right"></i>
                </button>
            </form>



            <div class="chat-input" style="display: none;">
                <div class="input-container">
                    <div class="input-actions">
                        <button class="btn input-btn" id="attachBtn" title="Attach file">
                            <i class="icon icon-lg cil-paperclip"></i>
                        </button>
                    </div>
                    <input type="text" id="messageInput" placeholder="Type a message, use # for tasks, @ for people...">
                </div>
                <button class="send-btn" id="sendBtn">
                    <i class="icon icon-lg cil-chevron-right"></i>
                </button>

                <!-- File Upload Preview -->
                <div class="file-preview" id="filePreview" style="display:none;">
                    <div class="file-preview-header">
                        <span>File to upload</span>
                        <button class="file-preview-close" onclick="closeFilePreview()">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="file-preview-content">
                        <div class="file-preview-icon">
                            <i class="fas fa-file"></i>
                        </div>
                        <div class="file-preview-details">
                            <div class="file-preview-name">document.pdf</div>
                            <div class="file-preview-size">3.2 MB</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    window.setTimeout(function() {
        let element = document.getElementById("chat-end");
        element.scrollIntoView({ behavior: "smooth", block: "end" });
    }, 1000);
</script>