{% extends "base.html" %}

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

{% block extra_css %}
<style>
  /* Grundstile für das Profil mit verbessertem Glasmorphismus */
  .profile-container {
    background: rgba(24, 28, 45, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
    padding: 2rem;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
  }
  
  .profile-container:hover {
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    transform: translateY(-3px);
  }
  
  /* Verbesserte Profile-Header mit dynamischer User-Anzeige */
  .profile-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    gap: 2.5rem;
    position: relative;
  }
  
  .profile-avatar {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(32, 36, 55, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 3px solid rgba(179, 143, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 15px rgba(179, 143, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
  }
  
  .profile-avatar:hover {
    transform: scale(1.05);
    border: 3px solid rgba(179, 143, 255, 0.5);
    box-shadow: 0 12px 45px rgba(0, 0, 0, 0.3), 0 0 25px rgba(179, 143, 255, 0.35);
  }
  
  .profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
  }
  
  .profile-avatar:hover img {
    filter: brightness(1.1);
  }
  
  .profile-avatar-placeholder {
    font-size: 5rem;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
  }
  
  .profile-avatar:hover .profile-avatar-placeholder {
    color: rgba(255, 255, 255, 0.9);
    transform: scale(1.1);
  }
  
  .profile-info {
    flex: 1;
    padding-top: 0.5rem;
  }
  
  .profile-name {
    font-size: 2.75rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, #b38fff, #58a9ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 10px rgba(179, 143, 255, 0.3);
    letter-spacing: 0.3px;
    line-height: 1.2;
  }
  
  .profile-username {
    font-size: 1.35rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  
  .username-badge {
    background: rgba(179, 143, 255, 0.2);
    border: 1px solid rgba(179, 143, 255, 0.3);
    color: #b38fff;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
  }
  
  .username-badge:hover {
    background: rgba(179, 143, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), 0 0 8px rgba(179, 143, 255, 0.3);
  }
  
  .profile-bio {
    font-size: 1.15rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    max-width: 650px;
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  
  .profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    align-items: center;
  }
  
  .profile-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.25s ease;
  }
  
  .profile-meta-item:hover {
    color: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
  }
  
  .profile-meta-icon {
    opacity: 0.8;
  }
  
  /* Verbesserte Statistik-Karten mit interaktiven Effekten */
  .profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
  }
  
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.75rem 1.25rem;
    background: rgba(32, 36, 55, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  
  .stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(179, 143, 255, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
  }
  
  .stat-item:hover::before {
    opacity: 1;
  }
  
  .stat-item:hover {
    transform: translateY(-5px);
    background: rgba(32, 36, 55, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), 0 0 20px rgba(179, 143, 255, 0.2);
  }
  
  .stat-value {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, #b38fff, #58a9ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
  }
  
  .stat-item:hover .stat-value {
    transform: scale(1.1);
    text-shadow: 0 0 15px rgba(179, 143, 255, 0.5);
  }
  
  .stat-label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
  }
  
  .stat-item:hover .stat-label {
    color: rgba(255, 255, 255, 0.95);
  }
  
  /* Stat-Icon für visuelle Verstärkung */
  .stat-icon {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: rgba(179, 143, 255, 0.7);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
  }
  
  .stat-item:hover .stat-icon {
    transform: scale(1.2) translateY(-3px);
    color: rgba(179, 143, 255, 1);
  }
  
  /* Benutzer-Aktionsbereich */
  .profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
  }
  
  .profile-action-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    background: rgba(32, 36, 55, 0.75);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  
  .profile-action-btn:hover {
    transform: translateY(-3px);
    background: rgba(179, 143, 255, 0.25);
    border: 1px solid rgba(179, 143, 255, 0.3);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 0 15px rgba(179, 143, 255, 0.2);
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
  }
  
  .profile-action-btn.primary {
    background: rgba(179, 143, 255, 0.25);
    color: #ffffff;
    border: 1px solid rgba(179, 143, 255, 0.3);
  }
  
  .profile-action-btn.primary:hover {
    background: rgba(179, 143, 255, 0.35);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25), 0 0 20px rgba(179, 143, 255, 0.35);
  }
  
  /* Verbesserte Profil-Tabs */
  .profile-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(179, 143, 255, 0.5) rgba(255, 255, 255, 0.05);
  }
  
  .profile-tab {
    padding: 1rem 1.5rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
  }
  
  .profile-tab:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
  }
  
  .profile-tab.active {
    color: #b38fff;
    border-bottom: 3px solid #b38fff;
    background: rgba(179, 143, 255, 0.1);
  }
  
  /* Aktivitäten und Beiträge */
  .activity-feed {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  
  .activity-card {
    background: rgba(32, 36, 55, 0.7);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }
  
  .activity-card:hover {
    transform: translateY(-3px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), 0 0 15px rgba(179, 143, 255, 0.15);
  }
  
  .activity-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .activity-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
  }
  
  .activity-date {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
  }
  
  .activity-content {
    padding: 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.6;
  }
  
  .activity-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .activity-reactions {
    display: flex;
    gap: 0.75rem;
  }
  
  .reaction-button {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.05);
    border: none;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  
  .reaction-button:hover {
    background: rgba(179, 143, 255, 0.15);
    color: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
  }
  
  .reaction-button.active {
    background: rgba(179, 143, 255, 0.2);
    color: #b38fff;
  }
  
  .activity-actions {
    display: flex;
    gap: 0.75rem;
  }
  
  .action-button {
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    font-size: 0.9rem;
    background: rgba(179, 143, 255, 0.1);
    color: #b38fff;
    border: 1px solid rgba(179, 143, 255, 0.25);
    transition: all 0.3s ease;
    cursor: pointer;
  }
  
  .action-button:hover {
    background: rgba(179, 143, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 0 10px rgba(179, 143, 255, 0.2);
  }
  
  /* Verbesserte Einstellungskarten */
  .settings-card {
    background: rgba(32, 36, 55, 0.7);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition: all 0.3s ease;
  }
  
  .settings-card:hover {
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2), 0 0 15px rgba(179, 143, 255, 0.15);
  }
  
  .settings-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
  }
  
  .settings-card-body {
    padding: 1.5rem;
  }
  
  .settings-group {
    margin-bottom: 1.5rem;
  }
  
  .settings-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
  }
  
  .settings-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(24, 28, 45, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  .settings-input:focus {
    border-color: rgba(179, 143, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(179, 143, 255, 0.15);
    outline: none;
  }

  /* Light Mode Anpassungen */
  html.light .profile-container,
  html.light .profile-tabs,
  html.light .activity-card,
  html.light .settings-card {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  }
  
  html.light .profile-avatar {
    background: rgba(255, 255, 255, 0.9);
    border: 3px solid rgba(126, 63, 242, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), 0 0 15px rgba(126, 63, 242, 0.15);
  }
  
  html.light .profile-name {
    background: linear-gradient(135deg, #7e3ff2, #3282f6);
    text-shadow: none;
  }
  
  html.light .profile-username,
  html.light .profile-bio,
  html.light .activity-content {
    color: #1a202c;
    text-shadow: none;
  }
  
  html.light .username-badge {
    background: rgba(126, 63, 242, 0.15);
    border: 1px solid rgba(126, 63, 242, 0.3);
    color: #7e3ff2;
  }
  
  html.light .profile-meta {
    color: #4a5568;
  }
  
  html.light .stat-item,
  html.light .settings-input {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.05);
  }
  
  html.light .stat-value {
    background: linear-gradient(135deg, #7e3ff2, #3282f6);
  }
  
  html.light .stat-label {
    color: #4a5568;
  }
  
  html.light .profile-tab {
    color: #4a5568;
  }
  
  html.light .profile-tab:hover {
    background: rgba(0, 0, 0, 0.03);
    color: #1a202c;
  }
  
  html.light .profile-tab.active {
    color: #7e3ff2;
    border-bottom: 3px solid #7e3ff2;
    background: rgba(126, 63, 242, 0.08);
  }
  
  html.light .activity-title,
  html.light .settings-card-header,
  html.light .settings-label {
    color: #1a202c;
  }
  
  html.light .activity-date {
    color: #718096;
  }
  
  html.light .activity-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
  }
  
  html.light .reaction-button {
    color: #4a5568;
    background: rgba(0, 0, 0, 0.03);
  }
  
  html.light .reaction-button:hover {
    background: rgba(126, 63, 242, 0.1);
    color: #7e3ff2;
  }
  
  html.light .reaction-button.active {
    background: rgba(126, 63, 242, 0.15);
    color: #7e3ff2;
  }
  
  html.light .action-button {
    background: rgba(126, 63, 242, 0.1);
    color: #7e3ff2;
    border: 1px solid rgba(126, 63, 242, 0.2);
  }
  
  html.light .action-button:hover {
    background: rgba(126, 63, 242, 0.2);
  }
</style>
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-10">
  <!-- Profil-Container -->
  <div class="profile-container">
    <!-- Profil-Header mit Benutzerinformationen -->
    <div class="profile-header">
      <!-- Profilbild -->
      <div class="profile-avatar">
        {% if user.profile_image %}
          <img src="{{ user.profile_image }}" alt="{{ user.name }}" />
        {% else %}
          <div class="profile-avatar-placeholder">
            <i class="fas fa-user"></i>
          </div>
        {% endif %}
      </div>
      
      <!-- Profilinformationen -->
      <div class="profile-info">
        <h1 class="profile-name">{{ user.name|default('Max Mustermann') }}</h1>
        <div class="profile-username">
          @{{ user.username|default('maxmustermann') }}
          {% if user.verified %}
            <span class="username-badge">
              <i class="fas fa-check-circle mr-1"></i> Verifiziert
            </span>
          {% endif %}
        </div>
        
        <p class="profile-bio">
          {{ user.bio|default('Willkommen auf meinem Profil! Ich bin daran interessiert, Wissen zu vernetzen und neue Verbindungen zwischen verschiedenen Themengebieten zu entdecken. Mein Ziel ist es, ein tieferes Verständnis für komplexe Zusammenhänge zu entwickeln.') }}
        </p>
        
        <!-- Meta-Informationen -->
        <div class="profile-meta">
          <div class="profile-meta-item">
            <i class="fas fa-map-marker-alt profile-meta-icon"></i>
            <span>{{ user.location|default('Berlin, Deutschland') }}</span>
          </div>
          <div class="profile-meta-item">
            <i class="fas fa-calendar-alt profile-meta-icon"></i>
            <span>Mitglied seit {{ user.joined_date|default('Januar 2023') }}</span>
          </div>
          <div class="profile-meta-item">
            <i class="fas fa-globe profile-meta-icon"></i>
            <span>{{ user.website|default('www.beispiel.de') }}</span>
          </div>
        </div>
        
        <!-- Profil-Aktionen -->
        <div class="profile-actions">
          <button class="profile-action-btn primary">
            <i class="fas fa-user-plus mr-1"></i> Folgen
          </button>
          <button class="profile-action-btn">
            <i class="fas fa-comment mr-1"></i> Nachricht
          </button>
          <button class="profile-action-btn">
            <i class="fas fa-share-alt mr-1"></i> Teilen
          </button>
        </div>
      </div>
    </div>
    
    <!-- Statistiken -->
    <div class="profile-stats">
      <!-- Gedanken -->
      <div class="stat-item">
        <div class="stat-icon">
          <i class="fas fa-lightbulb"></i>
        </div>
        <div class="stat-value">{{ user.thoughts_count|default('42') }}</div>
        <div class="stat-label">Gedanken</div>
      </div>
      
      <!-- Verbindungen -->
      <div class="stat-item">
        <div class="stat-icon">
          <i class="fas fa-project-diagram"></i>
        </div>
        <div class="stat-value">{{ user.connections_count|default('128') }}</div>
        <div class="stat-label">Verbindungen</div>
      </div>
      
      <!-- Follower -->
      <div class="stat-item">
        <div class="stat-icon">
          <i class="fas fa-users"></i>
        </div>
        <div class="stat-value">{{ user.followers_count|default('567') }}</div>
        <div class="stat-label">Follower</div>
      </div>
      
      <!-- Beiträge -->
      <div class="stat-item">
        <div class="stat-icon">
          <i class="fas fa-comment-dots"></i>
        </div>
        <div class="stat-value">{{ user.contributions_count|default('89') }}</div>
        <div class="stat-label">Beiträge</div>
      </div>
      
      <!-- Bewertung -->
      <div class="stat-item">
        <div class="stat-icon">
          <i class="fas fa-star"></i>
        </div>
        <div class="stat-value">{{ user.rating|default('4.8') }}</div>
        <div class="stat-label">Bewertung</div>
      </div>
    </div>
  </div>
  
  <!-- Tabs und Inhaltsbereich -->
  <div class="glass-card">
    <!-- Profil-Tabs -->
    <div class="profile-tabs">
      <div class="profile-tab active" data-tab="activity">Aktivitäten</div>
      <div class="profile-tab" data-tab="thoughts">Gedanken</div>
      <div class="profile-tab" data-tab="collections">Sammlungen</div>
      <div class="profile-tab" data-tab="connections">Verbindungen</div>
      <div class="profile-tab" data-tab="settings">Einstellungen</div>
    </div>
    
    <!-- Tab-Inhalte -->
    <div class="p-6">
      <!-- Aktivitäts-Tab (Standardmäßig angezeigt) -->
      <div class="tab-content" id="activity-tab">
        <div class="activity-feed">
          <!-- Aktivität 1 -->
          <div class="activity-card">
            <div class="activity-header">
              <div class="activity-title">Neuer Gedanke hinzugefügt</div>
              <div class="activity-date">vor 2 Stunden</div>
            </div>
            <div class="activity-content">
              <p>Ich habe einen neuen Gedanken zum Thema "Künstliche Intelligenz und Kreativität" hinzugefügt. Wie können KI-Tools uns dabei helfen, kreativer zu denken?</p>
            </div>
            <div class="activity-footer">
              <div class="activity-reactions">
                <button class="reaction-button">
                  <i class="fas fa-thumbs-up"></i> <span>24</span>
                </button>
                <button class="reaction-button">
                  <i class="fas fa-comment"></i> <span>8</span>
                </button>
                <button class="reaction-button">
                  <i class="fas fa-share"></i> <span>3</span>
                </button>
              </div>
              <div class="activity-actions">
                <button class="action-button">
                  Ansehen
                </button>
              </div>
            </div>
          </div>
          
          <!-- Aktivität 2 -->
          <div class="activity-card">
            <div class="activity-header">
              <div class="activity-title">Verbindung erstellt</div>
              <div class="activity-date">vor 1 Tag</div>
            </div>
            <div class="activity-content">
              <p>Ich habe eine neue Verbindung zwischen "Nachhaltige Entwicklung" und "Digitale Transformation" hergestellt. Es gibt interessante Überschneidungen in diesen Bereichen.</p>
            </div>
            <div class="activity-footer">
              <div class="activity-reactions">
                <button class="reaction-button active">
                  <i class="fas fa-thumbs-up"></i> <span>42</span>
                </button>
                <button class="reaction-button">
                  <i class="fas fa-comment"></i> <span>12</span>
                </button>
                <button class="reaction-button">
                  <i class="fas fa-share"></i> <span>7</span>
                </button>
              </div>
              <div class="activity-actions">
                <button class="action-button">
                  Ansehen
                </button>
              </div>
            </div>
          </div>
          
          <!-- Aktivität 3 -->
          <div class="activity-card">
            <div class="activity-header">
              <div class="activity-title">Sammlung erstellt</div>
              <div class="activity-date">vor 3 Tagen</div>
            </div>
            <div class="activity-content">
              <p>Ich habe eine neue Sammlung zum Thema "Zukunftstechnologien" erstellt. Diese Sammlung enthält Gedanken zu KI, Quantencomputing, Biotechnologie und mehr.</p>
            </div>
            <div class="activity-footer">
              <div class="activity-reactions">
                <button class="reaction-button">
                  <i class="fas fa-thumbs-up"></i> <span>17</span>
                </button>
                <button class="reaction-button">
                  <i class="fas fa-comment"></i> <span>4</span>
                </button>
                <button class="reaction-button">
                  <i class="fas fa-share"></i> <span>2</span>
                </button>
              </div>
              <div class="activity-actions">
                <button class="action-button">
                  Ansehen
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Weitere Tab-Inhalte (werden per JavaScript angezeigt) -->
      <div class="tab-content hidden" id="thoughts-tab">
        <p class="text-center text-gray-400 py-12">
          <i class="fas fa-spinner fa-spin text-3xl mb-4 block"></i>
          Gedanken werden geladen...
        </p>
      </div>
      
      <div class="tab-content hidden" id="collections-tab">
        <p class="text-center text-gray-400 py-12">
          <i class="fas fa-spinner fa-spin text-3xl mb-4 block"></i>
          Sammlungen werden geladen...
        </p>
      </div>
      
      <div class="tab-content hidden" id="connections-tab">
        <p class="text-center text-gray-400 py-12">
          <i class="fas fa-spinner fa-spin text-3xl mb-4 block"></i>
          Verbindungen werden geladen...
        </p>
      </div>
      
      <div class="tab-content hidden" id="settings-tab">
        <!-- Einstellungs-Tab-Inhalt -->
        <div class="settings-card">
          <div class="settings-card-header">Profilinformationen</div>
          <div class="settings-card-body">
            <div class="settings-group">
              <label class="settings-label" for="name">Name</label>
              <input type="text" id="name" class="settings-input" value="{{ user.name|default('Max Mustermann') }}" />
            </div>
            
            <div class="settings-group">
              <label class="settings-label" for="bio">Über mich</label>
              <textarea id="bio" class="settings-input" rows="4">{{ user.bio|default('Willkommen auf meinem Profil! Ich bin daran interessiert, Wissen zu vernetzen und neue Verbindungen zwischen verschiedenen Themengebieten zu entdecken.') }}</textarea>
            </div>
            
            <div class="settings-group">
              <label class="settings-label" for="location">Standort</label>
              <input type="text" id="location" class="settings-input" value="{{ user.location|default('Berlin, Deutschland') }}" />
            </div>
            
            <div class="settings-group">
              <label class="settings-label" for="website">Website</label>
              <input type="url" id="website" class="settings-input" value="{{ user.website|default('https://www.beispiel.de') }}" />
            </div>
            
            <button class="profile-action-btn primary mt-4">
              <i class="fas fa-save mr-1"></i> Speichern
            </button>
          </div>
        </div>
        
        <div class="settings-card">
          <div class="settings-card-header">Datenschutz und Sicherheit</div>
          <div class="settings-card-body">
            <div class="settings-group">
              <label class="settings-label" for="email">E-Mail-Adresse</label>
              <input type="email" id="email" class="settings-input" value="{{ user.email|default('beispiel@email.com') }}" />
            </div>
            
            <div class="settings-group">
              <label class="settings-label" for="password">Neues Passwort</label>
              <input type="password" id="password" class="settings-input" placeholder="Neues Passwort eingeben" />
            </div>
            
            <div class="settings-group">
              <label class="settings-label" for="password_confirm">Passwort bestätigen</label>
              <input type="password" id="password_confirm" class="settings-input" placeholder="Passwort wiederholen" />
            </div>
            
            <button class="profile-action-btn primary mt-4">
              <i class="fas fa-lock mr-1"></i> Passwort aktualisieren
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Profil-Tab-Funktionalität
    const tabs = document.querySelectorAll('.profile-tab');
    const tabContents = document.querySelectorAll('.tab-content');
    
    tabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // Alle Tabs deaktivieren
        tabs.forEach(t => t.classList.remove('active'));
        
        // Aktuellen Tab aktivieren
        this.classList.add('active');
        
        // Alle Tab-Inhalte ausblenden
        tabContents.forEach(content => content.classList.add('hidden'));
        
        // Entsprechenden Tab-Inhalt anzeigen
        const tabId = this.getAttribute('data-tab');
        document.getElementById(`${tabId}-tab`).classList.remove('hidden');
      });
    });
    
    // Like-Button-Funktionalität
    const reactionButtons = document.querySelectorAll('.reaction-button');
    
    reactionButtons.forEach(button => {
      button.addEventListener('click', function() {
        // Toggle active-Klasse
        this.classList.toggle('active');
        
        // Aktueller Zählerstand
        const countElement = this.querySelector('span');
        let count = parseInt(countElement.textContent);
        
        // Zähler aktualisieren
        if (this.classList.contains('active')) {
          count += 1;
        } else {
          count -= 1;
        }
        
        countElement.textContent = count;
      });
    });
  });
</script>
{% endblock %}