index.html

{% extends "base.html" %}

{% block title %}Home -  Blog{% endblock %}

{% block content %}
<div class="header">
    <h1>Welcome to  Blog</h1>
    <p>Share your thoughts and ideas with the world </p>
    <p> Pitch yourself to this platform</p>
</div>

<div class="filters">
    <button id="all-posts" class="filter-btn active" onclick="filterPosts('all')">All Posts</button>
    {% if current_user %}
    <button id="my-posts" class="filter-btn" onclick="filterPosts('my')">My Posts</button>
    {% endif %}
</div>

<div id="loading" class="loading">Loading posts...</div>
<div id="posts-container" class="posts-container"></div>
<div id="no-posts" class="no-posts" style="display: none;">
    <p>No posts found. {% if current_user %}<a href="{{ url_for('create_post_view') }}">Create the first one!</a>{% endif %}</p>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/posts.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        loadPosts();
    });
</script>
{% endblock %}