{% extends "base.html" %}
{% from "_macros.html" import modal %}
{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/feed.css') }}">
<link rel="stylesheet" href="{{ static_url('/static/css/sidebar.css') }}">
<link rel="stylesheet" href="{{ static_url('/static/css/post.css') }}">
{% endblock %}
{% block content %}
<h1 class="sr-only">Feed</h1>
<div class="feed-layout">
    <aside class="sidebar-card" role="complementary" aria-label="Feed filters">
        {% set _action = "/feed" %}{% set _placeholder = "Search posts..." %}{% set _hidden = {"tab": current_tab, "topic": current_topic} %}{% include "_sidebar_search.html" %}

        <div class="sidebar-heading">Topics</div>
        <div class="sidebar-nav">
            <a href="/feed" class="sidebar-link {% if not current_topic %}active{% endif %}">
                <span class="icon">&#x1F4CB;</span>
                All
            </a>
            <a href="/feed?topic=devlog" class="sidebar-link {% if current_topic == 'devlog' %}active{% endif %}" data-topic="devlog">
                <span class="icon">&#x1F4DD;</span>
                Devlog
            </a>
            <a href="/feed?topic=showcase" class="sidebar-link {% if current_topic == 'showcase' %}active{% endif %}" data-topic="showcase">
                <span class="icon">&#x2728;</span>
                Showcase
            </a>
            <a href="/feed?topic=question" class="sidebar-link {% if current_topic == 'question' %}active{% endif %}" data-topic="question">
                <span class="icon">&#x2753;</span>
                Question
            </a>
            <a href="/feed?topic=rant" class="sidebar-link {% if current_topic == 'rant' %}active{% endif %}" data-topic="rant">
                <span class="icon">&#x1F4A2;</span>
                Rant
            </a>
            <a href="/feed?topic=fun" class="sidebar-link {% if current_topic == 'fun' %}active{% endif %}" data-topic="fun">
                <span class="icon">&#x1F3AE;</span>
                Fun
            </a>
            <a href="/feed?topic=politics" class="sidebar-link {% if current_topic == 'politics' %}active{% endif %}" data-topic="politics">
                <span class="icon">&#x1F3DB;</span>
                Politics
            </a>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-heading">Resources</div>
            <div class="sidebar-nav">
                <a href="/docs" class="sidebar-link">
                    <span class="icon">&#x1F4DA;</span>
                    Docs
                </a>
                <a href="/issues" class="sidebar-link">
                    <span class="icon">&#x1F41B;</span>
                    Issues
                </a>
                <a href="/devii/" class="sidebar-link" data-devii-open>
                    <span class="icon">&#x1F916;</span>
                    Devii
                </a>
            </div>
        </div>

        <div class="sidebar-section online-users" aria-label="Online now">
            <div class="sidebar-heading">Online now <span class="online-count" data-online-count>{{ online_users|length }}</span></div>
            <div class="online-users-list" data-online-users-list data-empty-text="No one online right now">
                {% for ou in online_users %}
                <a href="/profile/{{ ou['username'] }}" class="online-user" title="{{ ou['username'] }}">
                    <span class="avatar-badge"><img src="{{ avatar_url('multiavatar', avatar_seed(ou), 32) }}" class="avatar-img avatar-sm" alt="{{ ou['username'] }}" loading="lazy">{% set _user = ou %}{% include "_presence_dot.html" %}{% include "_award_badge.html" %}</span>
                </a>
                {% else %}
                <span class="online-empty">No one online right now</span>
                {% endfor %}
            </div>
        </div>
    </aside>

    <div class="feed-main">
        <div class="feed-nav">
            <a href="/feed?tab=all" class="feed-nav-btn {% if current_tab == 'all' or not current_tab %}active{% endif %}"><span class="icon">&#x1F4CB;</span> All</a>
            <a href="/feed?tab=trending" class="feed-nav-btn {% if current_tab == 'trending' %}active{% endif %}"><span class="icon">&#x1F525;</span> Trending</a>
            <a href="/feed?tab=recent" class="feed-nav-btn {% if current_tab == 'recent' %}active{% endif %}"><span class="icon">&#x1F550;</span> Recent</a>
            <a href="/feed?tab=following" class="feed-nav-btn {% if current_tab == 'following' %}active{% endif %}"><span class="icon">&#x1F465;</span> Following</a>
            <div class="feed-nav-actions">
                <button type="button" class="btn-ghost btn-icon" title="Refresh" aria-label="Refresh" data-reload>↻</button>
                <a href="/notifications" class="btn-ghost btn-icon" title="Notifications" aria-label="Notifications">🔔</a>
            </div>
        </div>

        <div class="feed-posts" role="feed" aria-label="Posts">
            {% for item in posts %}
            {% set _author = item.author %}{% set _time = item.time_ago %}{% set _show_share = true %}{% set _show_comment_form = true %}{% include "_post_card.html" %}
            {% else %}
            <div class="empty-state">No posts yet. Be the first!</div>
            {% endfor %}
        </div>

        {% include "_load_more.html" %}
    </div>

    <aside class="feed-right" role="complementary" aria-label="Community">
        <div class="daily-topic-card card-link-host">
            {% if daily_topic.get('slug') %}
            {% set _href = "/news/" ~ daily_topic['slug'] %}
            {% set _label = daily_topic.get('title', '') %}
            {% include "_card_link.html" %}
            {% endif %}
            <div class="daily-topic-label">Daily Topic</div>
            {% if daily_topic.get('image_url', '') %}
            <img src="{{ daily_topic['image_url'] }}" alt="{{ daily_topic.get('title', '') }}" loading="lazy" class="daily-topic-image">
            {% endif %}
            <h4 class="rendered-title">{{ render_title(daily_topic.get('title', '')) }}</h4>
            <div class="rendered-content">{{ render_content(daily_topic.get('summary', '')) }}</div>
            <div class="topic-links">
                <a href="/news/{{ daily_topic.get('slug', '') }}">Read More</a>
                {% if daily_topic.get('url', '') %}
                <a href="{{ daily_topic['url'] }}" target="_blank" rel="noopener">Source</a>
                {% endif %}
            </div>
        </div>

        <div class="community-stats">
            <h3>Community</h3>
            <div class="stat-row">
                <span class="label">Total Members</span>
                <span class="value">{{ total_members }}</span>
            </div>
            <div class="stat-row">
                <span class="label">Posts Today</span>
                <span class="value">{{ posts_today }}</span>
            </div>
            <div class="stat-row">
                <span class="label">Total Projects</span>
                <span class="value">{{ total_projects }}</span>
            </div>
            <div class="stat-row">
                <span class="label">Total Gists</span>
                <span class="value">{{ total_gists }}</span>
            </div>
            <div class="top-authors-section">
                <h3 class="top-authors-title">Top Authors</h3>
                {% for author in top_authors %}
                <div class="stat-row">
                    <span class="label">
                        {% set _user = author %}{% set _size = 20 %}{% set _size_class = "xs" %}{% include "_avatar_link.html" %}
                        {% set _user = author %}{% set _class = "top-author-name" %}{% include "_user_link.html" %}
                    </span>
                    <span class="value">{{ author.get('stars', 0) }}</span>
                </div>
                {% else %}
                <div class="no-authors-msg">No top authors yet</div>
                {% endfor %}
                <a href="/leaderboard" class="top-authors-link">View full leaderboard</a>
            </div>
        </div>
    </aside>
</div>

{% if user %}
<a href="#" class="feed-fab" data-modal="create-post-modal" title="Create New Post" aria-label="Create New Post">+</a>

{% call modal('create-post-modal', 'Create New Post') %}
        {% set _composer_topic = 'random' %}{% set _composer_project = '' %}{% include "_post_composer_form.html" %}
{% endcall %}
{% else %}
<a href="/auth/login" class="feed-fab login-required" aria-label="Log in">+</a>
{% endif %}

{% endblock %}
