{% extends "base.html" %}
{% from "_macros.html" import modal %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/feed.css">
<link rel="stylesheet" href="/static/css/sidebar.css">
<link rel="stylesheet" href="/static/css/post.css">
{% endblock %}
{% block content %}
<h1 class="sr-only">Feed</h1>
<div class="feed-layout">
    <aside class="sidebar-card">
        <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=signals" class="sidebar-link {% if current_topic == 'signals' %}active{% endif %}" data-topic="signals">
                <span class="icon">&#x1F4E1;</span>
                Signals
            </a>
        </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">
            {% 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">
        <div class="daily-topic-card">
            <div class="daily-topic-label">Daily Topic</div>
            <h4>{{ daily_topic.get('title', '') }}</h4>
            <p>{{ daily_topic.get('summary', '') }}</p>
            <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">+</a>

{% call modal('create-post-modal', 'Create New Post') %}
        <form id="create-post-form" method="POST" action="/posts/create" enctype="multipart/form-data">
            {% set _topics = TOPICS %}{% set _selected = 'random' %}{% include "_topic_selector.html" %}

            <div class="auth-field auth-field-gap">
                <label for="post-content">What are you sharing?</label>
                <textarea id="post-content" name="content" required maxlength="2000" placeholder="What's on your mind?" class="min-h-120" data-mention></textarea>
                <small class="hint-text"><span id="post-content-count">0/2000</span></small>
            </div>

            <div class="auth-field auth-field-gap">
                <label for="post-title">Title (optional)</label>
                <input type="text" id="post-title" name="title" maxlength="500" placeholder="Post title">
                <small class="hint-text"><span id="post-title-count">0/500</span></small>
            </div>

            <div class="auth-field auth-field-gap">
                <label for="project_uid">Link to Project (Optional)</label>
                <select id="project_uid" name="project_uid">
                    <option value="">No project</option>
                    {% for p in get_user_projects(user['uid']) %}
                    <option value="{{ p['uid'] }}">{{ p['title'] }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="auth-field auth-field-gap">
                <label>Add an image (optional)</label>
                <dp-upload mode="field" field-name="image" accept="image/*" label="Add image"></dp-upload>
            </div>

            <div class="auth-field auth-field-gap">
                <button type="button" class="btn btn-secondary btn-sm" data-poll-toggle><span class="icon">&#x1F4CA;</span> <span data-poll-toggle-label>Add poll</span></button>
            </div>
            <div class="poll-builder" data-poll-builder hidden>
                <input type="text" name="poll_question" maxlength="200" placeholder="Poll question" class="poll-builder-question" disabled>
                <div class="poll-builder-options" data-poll-options>
                    <div class="poll-builder-row"><input type="text" name="poll_options" maxlength="100" placeholder="Option 1" disabled></div>
                    <div class="poll-builder-row"><input type="text" name="poll_options" maxlength="100" placeholder="Option 2" disabled></div>
                </div>
                <button type="button" class="btn-ghost btn-sm" data-poll-add-option>+ Add option</button>
                <p class="poll-builder-error" data-poll-error hidden></p>
            </div>

            <div class="modal-footer">
                <button type="button" class="modal-close btn btn-secondary">Cancel</button>
                <button type="submit" class="btn btn-primary">Post</button>
            </div>
        </form>
{% endcall %}
{% else %}
<a href="/auth/login" class="feed-fab login-required" title="Log in to participate">+</a>
{% endif %}

{% endblock %}