{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/feed.css">
<link rel="stylesheet" href="/static/css/sidebar.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 class="btn-ghost btn-icon" title="Refresh" onclick="window.location.reload()">&#x21BB;</button>
                <button class="btn-ghost btn-icon" title="Notifications" onclick="window.location.href='/notifications'">&#x1F514;</button>
            </div>
        </div>

        <div class="feed-posts">
            {% for item in posts %}
            <article class="post-card fade-in">
                <div class="post-header">
                    {% set _user = item.author %}{% set _size = 32 %}{% set _size_class = "sm" %}{% include "_avatar_link.html" %}
                    <div class="post-author-wrap">
                        <a href="/profile/{{ item.author['username'] if item.author else '#' }}" class="post-author-link">{{ item.author['username'] if item.author else 'Unknown' }}</a>
                        {% if item.author and item.author.get('role') %}
                        <span class="post-author-role">{{ item.author['role'] }}</span>
                        {% endif %}
                    </div>
                    <span class="post-time">{{ item.time_ago }}</span>
                </div>

                <div class="post-topic">
                    <span class="badge badge-{{ item.post['topic'] }}">{{ item.post['topic'] }}</span>
                </div>

                {% if item.post.get('title') %}
                <a href="/posts/{{ item.post['slug'] or item.post['uid'] }}" class="post-title-link">
                    <h3 class="post-title">{{ item.post['title'] }}</h3>
                </a>
                {% endif %}

                <div class="post-content rendered-content" data-render onclick="if (!event.target.closest('a')) window.location.href='/posts/{{ item.post['slug'] or item.post['uid'] }}'">{{ item.post['content'][:300] }}{% if item.post['content']|length > 300 %}...{% endif %}</div>

                {% if item.attachments %}
                {% include "_attachment_display.html" %}
                {% endif %}

                <div class="post-actions">
                    <div class="post-votes">
                        <form method="POST" action="/votes/post/{{ item.post['uid'] }}" class="inline-form">
                            <input type="hidden" name="value" value="1">
                            <button type="submit" class="post-action-btn vote-up" data-vote="1" data-target="{{ item.post['uid'] }}" data-type="post">+</button>
                        </form>
                        <span class="post-vote-count">{{ item.post.get('stars', 0) }}</span>
                        <form method="POST" action="/votes/post/{{ item.post['uid'] }}" class="inline-form">
                            <input type="hidden" name="value" value="-1">
                            <button type="submit" class="post-action-btn vote-down" data-vote="-1" data-target="{{ item.post['uid'] }}" data-type="post">−</button>
                        </form>
                    </div>
                    <a href="/posts/{{ item.post['slug'] or item.post['uid'] }}" class="post-action-btn">
                        &#x1F4AC; {{ item.comment_count }}
                    </a>
                    <a href="/posts/{{ item.post['slug'] or item.post['uid'] }}" class="post-action-btn share">
                        &#x2197;&#xFE0E; Open
                    </a>
                    <button class="post-action-btn">&#x1F517; Share</button>
                </div>

                {% if user %}
                <form class="feed-comment-form" method="POST" action="/comments/create">
                    <input type="hidden" name="post_uid" value="{{ item.post['uid'] }}">
                    <img src="{{ avatar_url('multiavatar', user['username'], 24) }}" class="avatar-img avatar-24" alt="" loading="lazy">
                    <input type="text" name="content" placeholder="Your opinion goes here..." maxlength="1000" autocomplete="off">
                    <button type="submit" class="feed-comment-submit">Post</button>
                </form>
                {% endif %}
            </article>
            {% else %}
            <div class="empty-state">No posts yet. Be the first!</div>
            {% endfor %}
        </div>

        {% if next_cursor %}
        <div class="load-more-wrap">
            <a href="/feed?before={{ next_cursor }}{% if current_tab %}&tab={{ current_tab }}{% endif %}{% if current_topic %}&topic={{ current_topic }}{% endif %}" class="btn btn-secondary btn-sm"><span class="icon">&#x1F4C4;</span>Load More</a>
        </div>
        {% endif %}
    </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">
                        <a href="/profile/{{ author['username'] }}">
                        <img src="{{ avatar_url('multiavatar', author['username'], 20) }}" class="avatar-img avatar-xs" alt="{{ author['username'] }}" loading="lazy">
                        {{ author['username'] }}</a>
                    </span>
                    <span class="value">{{ author.get('stars', 0) }}</span>
                </div>
                {% else %}
                <div class="no-authors-msg">No top authors yet</div>
                {% endfor %}
            </div>
        </div>
    </aside>
</div>

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

<div class="modal-overlay" id="create-post-modal">
    <div class="card modal-card">
        <div class="modal-header">
            <h3>Create New Post</h3>
            <button type="button" class="modal-close btn-ghost btn-icon modal-close-btn">&times;</button>
        </div>

        <form id="create-post-form" method="POST" action="/posts/create" enctype="multipart/form-data">
            <div class="form-row">
                {% for t in TOPICS %}
                <label class="topic-label">
                    <input type="radio" name="topic" value="{{ t }}" {% if t == 'random' %}checked{% endif %} class="topic-radio">
                    {{ t|capitalize }}
                </label>
                {% endfor %}
            </div>

            <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 for="post-image">Add an image (optional)</label>
                <input type="file" id="post-image" name="image" accept="image/*">
            </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>
    </div>
</div>
{% endif %}

{% endblock %}