{% for story in data %}
  {% set user = story['user'] %}
  {% set username = user.get('first_name', '') + " " + user.get('last_name', '') if user else 'Unknown' %}
  {% set profile_url = user.get('profile', 'df') if user else 'df' %}
  {% set user_username = user.get('username', 'unknown') if user else 'unknown' %}
  {% set story_text = story.get('content', '') | e %}
  {% set tags = story.get('story_tags', []) %}
  <div class="storyview-overlay" data-story-id="{{ story['story_id'] }}">
    <!-- Progress bar for multi-story (JS will animate) -->
    <div class="storyview-progress-bar">
      <div class="storyview-progress-fill"></div>
    </div>
    <!-- Top bar: profile, close, time -->
    <div class="storyview-header">
      <div class="storyview-header-left">
        <img class="storyview-profile-img" src="{% if profile_url == 'df' %}assets/default.jpg{% else %}http://{{ _ipaddr }}:8000/image?uuid={{ user['user_id'] }}&ppic={{ profile_url }}&ptp=profile{% endif %}" alt="Profile">
        <div class="storyview-user-info">
          <div class="storyview-username">{{ username }}</div>
          <div class="storyview-userhandle">@{{ user_username }}</div>
        </div>
        <span class="storyview-time">{{ story.get('created_at', 'now') }}</span>
      </div>
      <div class="storyview-header-right">
        <button class="storyview-close-btn" title="Close Story">
          <i class="fa fa-times"></i>
        </button>
      </div>
    </div>
    <!-- Main story media -->
    <div class="storyview-media-container">
      {% if story['story_type'] == "image" %}
        <img class="storyview-media" src="http://192.168.8.101:8080/static/img/thumb.jpg" data-src="http://192.168.8.101:8000/get/image/12345/test/1/postsample.jpg" onload="onImgLoad(this, this.getAttribute('data-src'))" alt="Story Image">
      {% elif story['story_type'] == "video" %}
        <video class="storyview-media" controls autoplay muted loop
          src="http://{{ _ipaddr }}:8000/video?uuid={{ story['user_id'] }}&ppic={{ story['story_url'] }}&ptp=story"
          onload="onVidLoad(this, this.getAttribute('data-story-id'), true)"
          data-story-id="{{ story['story_id'] }}">
        </video>
      {% else %}
        <img class="storyview-media" src="assets/imgthumb.jpg" alt="Story">
      {% endif %}
      <!-- Overlayed tags and mentions -->
      {% if tags %}
        <div class="storyview-tags">
          {% for tag in tags %}
            <span class="storyview-tag">{{ tag }}</span>
          {% endfor %}
        </div>
      {% endif %}
      <!-- Caption -->
      {% if story_text %}
        <div class="storyview-caption">
          {{ story_text | safe }}
        </div>
      {% endif %}
    </div>
    <!-- Bottom actions: Like, Comment, Share, Save, More -->
    <div class="storyview-actions-bar">
      <button class="storyview-action-btn" data-story-id="{{ story['story_id'] }}">
        <i class="fa fa-heart{% if story.get('liked', False) %} liked{% endif %}"></i>
        <span>{{ story.get('likes', 0) }}</span>
      </button>
      <button class="storyview-action-btn" data-story-id="{{ story['story_id'] }}">
        <i class="fa fa-comment"></i>
        <span>{{ story.get('comments', 0) }}</span>
      </button>
      <button class="storyview-action-btn" data-story-id="{{ story['story_id'] }}">
        <i class="fa fa-share"></i>
      </button>
      <button class="storyview-action-btn" data-story-id="{{ story['story_id'] }}">
        <i class="fa fa-bookmark"></i>
      </button>
      <div class="storyview-action-btn storyview-more-btn" data-story-id="{{ story['story_id'] }}">
        <i class="fa fa-ellipsis-h"></i>
      </div>
    </div>
    <!-- Comment input -->
    <div class="storyview-comment-bar">
      <img class="storyview-comment-profile" src="{% if profile_url == 'df' %}assets/default.jpg{% else %}http://{{ _ipaddr }}:8000/image?uuid={{ user['user_id'] }}&ppic={{ profile_url }}&ptp=profile{% endif %}" alt="Profile">
      <input type="text" class="storyview-comment-input" placeholder="Add a comment..." data-pid="{{ story['story_id'] }}">
      <button class="storyview-send-btn">
        <i class="fa fa-paper-plane"></i>
      </button>
    </div>
    <!-- Story navigation (previous/next) -->
    <div class="storyview-nav">
      <button class="storyview-nav-btn" title="Previous Story"><i class="fa fa-chevron-left"></i></button>
      <button class="storyview-nav-btn" title="Next Story"><i class="fa fa-chevron-right"></i></button>
    </div>
  </div>
{% endfor %}