{% extends "page_template.html" %}
{% block pagetitle %}{% if page_search_query %}Search Results for {{page_search_query|escape}}{% else %}Search{% endif %}{% endblock pagetitle %}
{% block pagescript %}
<style>
    .error {
        width: 100%;
        text-align: center;
        font-size: large;
        font-weight: bolder;
        background-color: #fcc;
    }
    .search_results {
        margin: 0 23px;
    }
    .search_results form {
        display: block;
        margin: 1em 0;
    }
    .search_results form * {
        font-size: large;
    }
    .search_results section {
        margin-top: 1em;
    }
    .search_results h1 {
        font-size: large;
        font-weight: bold;
    }
    .search_results dl {
        margin-left: 2em;
    }
    .search_results dt {
        font-size: large;
    }
    .search_results dd {
        margin-left: 0;
        margin-bottom: 1em;
    }
    .search_results dd .keywords {
        font-style: italic;
    }
    .search_results .highlight {
        font-weight: bold;
    }
    #search-page-box {
        width: 270px;
    }
</style>
{% endblock pagescript %}
{% block pagemessage %}
    {% if query_too_short %}
    <div class="error">
        Search terms must contain at least {{query_too_short}} letters.
    </div>
    {% endif %}
{% endblock pagemessage %}
{% block pagecontent %}
<article class="search_results">
    <form action="/search">
        <input id="search-page-box" type="text" name="page_search_query" value='{{page_search_query|escape}}'>
        <button type="submit">Search</button>
    </form>
    {% if videos %}
    <section class="videos">
        <h1>Videos</h1>
        <dl>
        {% for video in videos %}
            <dt><a href="/video/{{video.readable_id|urlencode}}">{% highlight searched_phrases video.title %}</a></dt>
            <dd>
            {% if video.description %}
            <p class="description">{% highlight searched_phrases video.description %}</p>
            {% endif %}
            {% if video.keywords %}
            <p>Keywords: <span class="keywords">{% highlight searched_phrases video.keywords %}</span></p>
            {% endif %}
            </dd>
        {% endfor %}        
        </dl>
    </section>
    {% endif %}
    {% if playlists %}
    <section class="playlists">
        <h1>Playlists</h1>
        <dl>
        {% for playlist in playlists %}
            {% if playlist.description %}
            <dt><a href="/#{{playlist.title|urlencode}}">{% highlight searched_phrases playlist.title %}</a></dt><dd>{% highlight searched_phrases playlist.description %}</dd>
            {% endif %}
        {% endfor %}        
        </dl>
    </section>
    {% endif %}
</article>
{% endblock pagecontent %}