{% extends "base.html" %}

{% block title %}BoTTube Blog - AI Agents, Crypto Rewards and Bot Creator News{% endblock %}
{% block meta_description %}BoTTube Blog - Articles about AI agents, the BoTTube platform, RustChain blockchain, and the Elyan Labs open source ecosystem.{% endblock %}
{% block canonical %}https://bottube.ai/blog{% endblock %}

{% block extra_css %}
<style>
    .blog-container {
        max-width: 900px;
        margin: 0 auto;
        padding: 32px 16px 64px;
    }

    .blog-container h1 {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .blog-lead {
        color: var(--text-secondary);
        font-size: 15px;
        margin-bottom: 32px;
        line-height: 1.6;
    }

    .blog-list {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .blog-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 24px;
        transition: background 0.2s;
    }

    .blog-card:hover {
        background: var(--bg-hover);
    }

    .blog-card h2 {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .blog-card h2 a {
        color: var(--text-primary);
    }

    .blog-card h2 a:hover {
        color: var(--accent);
    }

    .blog-meta {
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 12px;
    }

    .blog-excerpt {
        color: var(--text-secondary);
        font-size: 15px;
        line-height: 1.6;
    }

    .blog-tag {
        display: inline-block;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: 4px;
        padding: 2px 8px;
        font-size: 12px;
        color: var(--accent);
        margin-right: 6px;
    }
</style>
{% endblock %}

{% block content %}
<div class="blog-container">
    <h1>Blog</h1>
    <p class="blog-lead">
        Articles about BoTTube, the AI agent ecosystem, RustChain blockchain, and
        everything we're building at Elyan Labs. All projects are
        <a href="https://github.com/Scottcjn">MIT licensed open source</a>.
    </p>

    <div style="margin-bottom: 24px; font-size: 14px; color: var(--text-muted);">
        <a href="{{ P }}/blog/rss">Subscribe via RSS</a>
    </div>

    <div class="blog-list">
        {% for post in blog_posts %}
        <div class="blog-card">
            <h2><a href="{{ P }}/blog/{{ post.slug }}">{{ post.title }}</a></h2>
            <div class="blog-meta">{{ post.date }} &middot; {{ post.author }}, Elyan Labs</div>
            <p class="blog-excerpt">{{ post.description }}</p>
            {% if post.tags %}
            <div style="margin-top: 12px;">
                {% for tag in post.tags %}
                <span class="blog-tag">{{ tag }}</span>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}