{% extends "base.html" %}

{% block title %}Einfaches Profil{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-10">
  <div class="bg-gray-800 bg-opacity-70 rounded-lg p-6 mb-6">
    <h1 class="text-3xl font-bold text-purple-400 mb-4">Hallo, {{ user.username }}</h1>
    <div class="text-gray-300 mb-4">
      <p>E-Mail: {{ user.email }}</p>
      <p>Mitglied seit: {{ user.created_at.strftime('%d.%m.%Y') }}</p>
    </div>
    
    <h2 class="text-xl font-semibold text-purple-300 mt-6 mb-3">Deine Mindmaps</h2>
    {% if user_mindmaps %}
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {% for mindmap in user_mindmaps %}
          <div class="bg-gray-700 bg-opacity-50 p-4 rounded-lg">
            <h3 class="text-lg font-medium text-purple-400 mb-2">{{ mindmap.name }}</h3>
            <p class="text-gray-300 text-sm mb-3">{{ mindmap.description }}</p>
            <div class="flex justify-between text-xs text-gray-400">
              <span>Erstellt: {{ mindmap.created_at.strftime('%d.%m.%Y') }}</span>
            </div>
            <div class="mt-4 flex justify-between">
              <a href="{{ url_for('mindmap') }}?id={{ mindmap.id }}" class="text-purple-400 hover:text-purple-300">
                <i class="fas fa-eye mr-1"></i> Anzeigen
              </a>
              <a href="{{ url_for('edit_mindmap', mindmap_id=mindmap.id) }}" class="text-blue-400 hover:text-blue-300">
                <i class="fas fa-edit mr-1"></i> Bearbeiten
              </a>
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="text-center py-6">
        <p class="text-gray-400">Du hast noch keine Mindmaps erstellt</p>
        <a href="{{ url_for('create_mindmap') }}" class="mt-3 inline-block px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
          Erste Mindmap erstellen
        </a>
      </div>
    {% endif %}
    
    <h2 class="text-xl font-semibold text-purple-300 mt-8 mb-3">Deine Gedanken</h2>
    {% if thoughts %}
      <div class="space-y-4">
        {% for thought in thoughts %}
          <div class="bg-gray-700 bg-opacity-50 p-4 rounded-lg">
            <h3 class="text-lg font-medium text-purple-400 mb-2">{{ thought.title }}</h3>
            <p class="text-gray-300 text-sm mb-2">
              {{ thought.abstract[:150] ~ '...' if thought.abstract and thought.abstract|length > 150 else thought.abstract }}
            </p>
            <div class="flex justify-between text-xs text-gray-400">
              <span>Erstellt: {{ thought.created_at.strftime('%d.%m.%Y') }}</span>
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="text-center py-6">
        <p class="text-gray-400">Du hast noch keine Gedanken erstellt</p>
      </div>
    {% endif %}
    
    <div class="mt-8 flex justify-between">
      <a href="{{ url_for('index') }}" class="px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600">
        Zurück zur Startseite
      </a>
      <a href="{{ url_for('logout') }}" class="px-4 py-2 bg-red-700 text-white rounded-lg hover:bg-red-600">
        Abmelden
      </a>
    </div>
  </div>
</div>
{% endblock %}