Reisacher-Forderung/templates/base/chat_container.html

<div class="chat-container">
    <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">{{ forderung_kopf[0].Kunde }} / {{ forderung_kopf[0].Document_No }}</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">Gesamte Historie</div>
    </div>
    <div class="chat-content" id="chatContent">
        <div class="date-divider">
            <div class="divider-line"></div>
            <div class="divider-text">{{ forderung_kopf[0].Invoice_Date|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 forderung_kommentar %}
        <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 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">
            <button class="tool-button tooltip" data-tooltip="Attach File">
            </button>
        </div>
    </div>
</div>