{% extends "shell.html" %}

{% block title %}Home{% endblock %}

{% block head %}
<link rel="stylesheet" href="/static/themes/default/home.css"/>
<link rel="stylesheet" href="/static/themes/{{theme}}/home.css"/>
<link rel="stylesheet" href="/static/themes/{{theme}}/inline-announcement.css"/>
{% endblock %}

{% block page %}
<div class="main">
    {% include "ui/userbar.html" %}
    {% if alpha %}<span id="alpha-warning">WARNING! askLyphe is in alpha! user experience is in no way representative of the final product!</span>{% endif %}
    <div class="pagecontent">
        <div id="lyphebig">
            <div class="bent-surrounding">
                <img id="lypheimg" src="/static/img/lyphebent{% if alpha %}-alpha{% endif %}.png" alt="image of lyphe, our mascot!">
            </div>
            <div id="lyphetitle">
                <img src="/static/img/logo.png" alt="ask Lyphe!"/>
                <h2>the best search engine!</h2>
            </div>
        </div>
        <form action="/ask" method="get">
            <label for="askbox" class="lyphe-label">ask me anything!</label>
            <input type="text" placeholder="search away~!" id="askbox" name="q" required="" autofocus>
            <button type="submit" id="askbox_submit">ask!</button>
            <div id="javascript_feature"></div>
            <script>
                const el = document.getElementById("javascript_feature");
                const inp = document.createElement("input");
                inp.type = "hidden";
                inp.name = "js";
                inp.value = "1";
                el.appendChild(inp);
            </script>
        </form>
        <h3>{{ count }} sites indexed!</h3>

        <div class="front-links">
            <ul>
                <li>
                    <a href="/static/docs/about/">About</a>
                </li>
                <li>
                    <a href="https://voremicrocomputers.com/crawler.html">Crawler Information</a>
                </li>
                <li>
                    <a href="/static/docs/">Documentation</a>
                </li>
                <li>
                    <a href="/static/terms_of_use.html">Terms of Use</a>
                </li>
                <li>
                    <a href="/static/privacy_policy.html">Privacy Policy</a>
                </li>
            </ul>
        </div>

        {% match announcement %}
        {% when Some with (a) %}
        <div class="announcement">
            <span class="announcement-date">{{ a.date }}</span>
            <h4>{{ a.title }}</h4>
            <p>{{ a.content }}</p>
            <p><a href="{{ a.url }}">Read More...</a></p>
        </div>
        {% when None %}
        {% endmatch %}
    </div>
    {% include "ui/footer.html" %}
</div>
{% endblock %}