{% extends "base.html" %}

{% block title %}Search: {{ query }}{% endblock title %}

{% block content %}
<main>
<search>
    <form action="/search" method="get">
        <input type="search" name="q" value="{{ query }}" placeholder="CSS" role="search" hx-post="/search"
            hx-trigger="keyup delay:50ms"
            hx-target="#results">
        <button type="submit">Search</button>
    </form>
</search>

<p id="ex-hint">Add &explanation_enabled=true to the URL to enable JSON-based explanations.</p>
<script>
const exHint = document.getElementById("ex-hint");
exHint.innerHTML = `<button type="button" onclick="toggleExplanations()">Toggle JSON-based explanations</button>`;

function toggleExplanations() {
    const url = new URL(window.location.href);
    url.searchParams.set("explanation_enabled", !(url.searchParams.get("explanation_enabled") === "true"));
    window.location.href = url.toString();
}
</script>

<div id="results">
{% include "results.html" %}
</div>
</main>

<style>
    form {
        display: flex;
        flex-direction: row;
    }
    form, input {
        flex: 1;
    }
    form > * {
        padding: 0.5em;
    }
    #result-list {
        list-style: none;
        padding: 0;
    }
    #result-list > li {
        padding-block: 1em;
    }
    #result-list > li:not(:last-child) {
        border-bottom: 1px solid CanvasText;
    }
    .score {
        padding: 0.5em;
        margin-right: 1em;
        background-color: CanvasText;
        color: Canvas;
        border-radius: 0.5em;
    }
    .tags {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        gap: 0.5em;
    }

    #search-engines {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5em;
    }
</style>
{% endblock content %}