{% extends "base.html" %}

{% block head %}

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Blog",
    "name": {{ site_name|tojson }},
    "description": {{ site_description|tojson }},
    "url": {{ site_url|tojson }},
    "author": {
        "@type": "Person",
        "name": {{ author_name|tojson }}
    }
}
</script>

{% endblock %}

{% block content %}

<section class="hero container">

    <p class="eyebrow">VLAD SOLO</p>

    <h1>
        DevOps Slaps
    </h1>

    <p class="hero-description">
        {{ site_description }}
    </p>

</section>

<section class="container">

    <form
        class="search"
        action="/search/"
        method="get"
        hx-get="/search/"
        hx-trigger="keyup changed delay:300ms"
        hx-target="#post-list"
        hx-push-url="true"
    >
        <label for="search-input" class="sr-only">
            Search posts
        </label>

        <input
            id="search-input"
            type="search"
            name="q"
            value="{{ query or '' }}"
            placeholder="Search posts..."
            autocomplete="off"
        >
    </form>

    <div id="post-list">

        {% include "search.html" %}

    </div>

</section>

{% endblock %}