{% set profile = data.profile_ul %}
{% set _username = data.firstname + ' ' + data.lastname %}

<div class="view-profile-container">
  <div class="profile-view-header-top">
    <div class="bar-btn-gl onclick-blue" onclick="BackTo('home', 'useCache')">
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="28" viewBox="0 -960 960 960" width="29">
        <path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/>
      </svg>
    </div>
  </div>
  <div class="profile-view-card">
    <div class="profile-view-header" style="background: url('assets/imgthumb.gif') center;">
      <!-- Optionally, use user's cover image if available -->
    </div>
    <div class="profile-view-main profile-flex-row">
      <!-- Profile Image (Left) -->
      <div class="profile-image-section">
        {% if profile == 'df' %}
          <img class="profile-view-image" src="assets/default.jpg" alt="Profile Picture">
        {% else %}
          <img class="profile-view-image" src="http://{{ _ipaddr }}:8000/image?uuid={{ uuid }}&ppic={{ profile }}&ptp=profile" alt="Profile Picture">
        {% endif %}
        <!-- User details below image -->
        <div class="profile-user-details">
          <div class="profile-view-username">{{ _username }}</div>
          <div class="profile-view-user-username">@{{ data.username }}</div>
          <div class="profile-view-user-bio">
            <i>{{ data.bio or "No bio yet." }}</i>
          </div>
          {% if data.badges %}
            <div class="profile-badges">
              {% for badge in data.badges %}
                <span class="badge">{{ badge }}</span>
              {% endfor %}
            </div>
          {% endif %}
        </div>
      </div>
      <!-- Stats and Actions (Right) -->
      <div class="profile-stats-section">
        <div class="profile-stats-row">
          <div class="info">
            <span>{{ data.posts_count or helpers._random_str(3, "digits") }}</span>
            <h3>Posts</h3>
          </div>
          <div class="info">
            <span>{{ data.followers_count or helpers._random_str(3, "digits") }}</span>
            <h3>Followers</h3>
          </div>
          <div class="info">
            <span>{{ data.following_count or helpers._random_str(3, "digits") }}</span>
            <h3>Following</h3>
          </div>
        </div>
        <div class="profile-actions-row">
          {% if data.is_own_profile %}
            <button class="profile-action-btn" onclick="openEditProfileModal()">Edit Profile</button>
          {% else %}
            <button class="profile-action-btn" onclick="followUser('{{ uuid }}')">
              {{ data.is_following and 'Unfollow' or 'Follow' }}
            </button>
            <button class="profile-action-btn" onclick="startChat('{{ uuid }}')">Message</button>
          {% endif %}
          <button class="profile-action-btn" onclick="shareProfile('{{ uuid }}')">Share</button>
        </div>
      </div>
    </div>
    <!-- Tabs -->
    <div class="profile-tabs">
      <button class="active" onclick="showProfileTab('posts')">Posts</button>
      <button onclick="showProfileTab('media')">Media</button>
      <button onclick="showProfileTab('about')">About</button>
    </div>
    <!-- Content -->
    <div class="profile-inner-content gallery" id="profile-tab-content">
      <!-- Example: Masonry grid for posts/media -->
      <!-- Sample Images -->
      <div class="gallery-inner-container">
         <img onload="onImgLoad(this, this.getAttribute('data-src'))"
            src="http://192.168.8.101:8080/static/img/thumb.jpg"
            data-src="http://192.168.8.101:8000/get/image/12345/test/1/profilesample.jpg" alt="Post 1">
         <span class="clear gallery-inner-bottom-button"><i class="like-icon far fa-thumbs-o-up"></i> {{
            helpers._random_str(2, "digits") }}</span>
      </div>
      <div class="gallery-inner-container">
         <img onload="onImgLoad(this, this.getAttribute('data-src'))"
            src="http://192.168.8.101:8080/static/img/thumb.jpg"
            data-src="http://192.168.8.101:8000/get/image/12345/test/1/profilesample.jpg" alt="Post 1">
         <span class="clear gallery-inner-bottom-button"><i class="like-icon far fa-thumbs-o-up"></i> {{
            helpers._random_str(2, "digits") }}</span>
      </div>
      <div class="gallery-inner-container">
         <img onload="onImgLoad(this, this.getAttribute('data-src'))"
            src="http://192.168.8.101:8080/static/img/thumb.jpg"
            data-src="http://192.168.8.101:8000/get/image/12345/test/1/profilesample.jpg" alt="Post 1">
         <span class="clear gallery-inner-bottom-button"><i class="like-icon far fa-thumbs-o-up"></i> {{
            helpers._random_str(2, "digits") }}</span>
      </div>
      <div class="gallery-inner-container">
         <img onload="onImgLoad(this, this.getAttribute('data-src'))"
            src="http://192.168.8.101:8080/static/img/thumb.jpg"
            data-src="http://192.168.8.101:8000/get/image/12345/test/1/profilesample.jpg" alt="Post 1">
         <span class="clear gallery-inner-bottom-button"><i class="like-icon far fa-thumbs-o-up"></i> {{
            helpers._random_str(2, "digits") }}</span>
      </div>
    </div>
  </div>
</div>