website/website/templates/profile.html

{% extends "base.html" %}

{% block title %}Profil | Wissenschaftliche Mindmap{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="glass p-8 mb-8">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
            <div>
                <h1 class="text-3xl font-bold text-white">Hallo, {{ current_user.username }}</h1>
                <p class="text-white/70 mt-1">{{ current_user.email }}</p>
            </div>
            
            <div class="mt-4 md:mt-0">
                <a href="{{ url_for('mindmap') }}" 
                   class="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-semibold px-6 py-3 rounded-lg transition-all duration-300 inline-block">
                    Zur Mindmap
                </a>
            </div>
        </div>
    </div>
    
    <div class="dark-glass p-8">
        <h2 class="text-2xl font-bold text-white mb-6">Deine Gedanken</h2>
        
        {% if thoughts %}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {% for thought in thoughts %}
                    <div class="glass p-6 hover:shadow-lg transition-all" x-data="{ showActions: false }" @mouseenter="showActions = true" @mouseleave="showActions = false">
                        <div class="flex justify-between items-start">
                            <span class="inline-block px-3 py-1 text-xs text-white/70 bg-white/10 rounded-full mb-3">{{ thought.branch }}</span>
                            <span class="text-xs text-white/50">{{ thought.timestamp.strftime('%d.%m.%Y, %H:%M') }}</span>
                        </div>
                        <p class="text-white mb-4 leading-relaxed">{{ thought.content }}</p>
                        
                        <div class="flex justify-between items-center" x-show="showActions" x-transition.opacity>
                            <div class="text-xs text-white/70">
                                <span>{{ thought.comments|length }} Kommentar(e)</span>
                            </div>
                            
                            <a href="#" onclick="openThoughtDetails('{{ thought.id }}')" class="text-indigo-300 hover:text-white text-sm">Details anzeigen</a>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="text-center py-12">
                <p class="text-white/70 mb-4">Du hast noch keine Gedanken geteilt.</p>
                <a href="{{ url_for('mindmap') }}" class="text-indigo-300 hover:text-white">Zur Mindmap gehen und mitmachen</a>
            </div>
        {% endif %}
    </div>
</div>

<!-- Thought Detail Modal -->
<div id="thoughtModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 hidden">
    <div class="dark-glass p-8 w-full max-w-2xl max-h-[80vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-6">
            <h3 class="text-2xl font-bold text-white" id="modalThoughtTitle">Gedanke Details</h3>
            <button onclick="closeThoughtModal()" class="text-white/70 hover:text-white">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
        
        <div id="modalContent" class="space-y-6">
            <div class="glass p-4">
                <div class="flex justify-between items-start mb-2">
                    <span class="inline-block px-3 py-1 text-xs text-white/70 bg-white/10 rounded-full" id="modalBranch"></span>
                    <span class="text-xs text-white/50" id="modalTimestamp"></span>
                </div>
                <p class="text-white" id="modalThoughtContent"></p>
            </div>
            
            <div>
                <h4 class="text-lg font-medium text-white mb-3">Kommentare</h4>
                <div id="commentsList" class="space-y-3"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function openThoughtDetails(thoughtId) {
        fetch(`/api/thoughts/${thoughtId}`)
            .then(response => response.json())
            .then(thought => {
                document.getElementById('modalThoughtTitle').textContent = `Gedanke von ${thought.author}`;
                document.getElementById('modalBranch').textContent = thought.branch;
                document.getElementById('modalTimestamp').textContent = thought.timestamp;
                document.getElementById('modalThoughtContent').textContent = thought.content;
                
                // Load comments
                return fetch(`/api/comments/${thoughtId}`);
            })
            .then(response => response.json())
            .then(comments => {
                const commentsList = document.getElementById('commentsList');
                commentsList.innerHTML = '';
                
                if (comments.length === 0) {
                    commentsList.innerHTML = '<p class="text-white/50">Keine Kommentare vorhanden</p>';
                    return;
                }
                
                comments.forEach(comment => {
                    const commentEl = document.createElement('div');
                    commentEl.className = 'glass p-3';
                    commentEl.innerHTML = `
                        <div class="flex justify-between items-start mb-1">
                            <span class="text-sm font-medium text-white">${comment.author}</span>
                            <span class="text-xs text-white/50">${comment.timestamp}</span>
                        </div>
                        <p class="text-white/90 text-sm">${comment.content}</p>
                    `;
                    commentsList.appendChild(commentEl);
                });
            })
            .catch(error => console.error('Error loading thought details:', error));
        
        document.getElementById('thoughtModal').classList.remove('hidden');
    }
    
    function closeThoughtModal() {
        document.getElementById('thoughtModal').classList.add('hidden');
    }
</script>
{% endblock %}