{% extends "templates/layout.html" %}

{% block content %}
<main class="main-container">
    <header>
        <h1>Elias Haugsbakk's Blog</h1>
        <p class="intro-text">This is the home page for my blog. The list of blog posts is a diverse collection of some of my writings; if you're just browsing, this might be a good place to start.</p>

        <form action="/blog" method="GET" class="search-form">
            <input type="text" name="search" value="{{ search_value }}" placeholder="Search posts..." aria-label="Search blog posts">
            <button type="submit">Search</button>
        </form>
    </header>

    <div class="content-grid">
        <div class="left-column">
            <section id="all" class="blog-section">
                <h2>All Posts</h2>
                {{ all_posts| raw }}
            </section>
        </div>

        <div class="right-column">
            <section id="recent" class="blog-section">
                <h2>Featured</h2>
                {{ recent_posts | raw }}
            </section>
        </div>
    </div>
</main>
{% endblock %}