kjvstudy.org/kjvstudy_org/templates/search.html

{% extends "base.html" %}

{% block title %}{% if query %}Search Results for "{{ query }}"{% else %}Search the KJV Bible{% endif %} - KJV Study{% endblock %}
{% block description %}{% if query %}Search results for "{{ query }}" in the King James Bible.{% else %}Search the complete King James Bible.{% endif %}{% endblock %}

{% block head %}
<style>
.search-form {
    margin: 2rem 0;
}

.search-input {
    width: 100%;
    max-width: 55%;
    padding: 0.75rem;
    font-size: 1.1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.search-input:focus {
    outline: none;
    border-color: #111;
}

.search-button {
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

.search-button:hover {
    background: #333;
}

.search-stats {
    margin: 2rem 0;
    color: #666;
}

.search-result {
    margin: 2rem 0;
    padding: 1rem;
    border-left: 3px solid #111;
}

.result-reference {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.result-reference a {
    text-decoration: none;
    color: #111;
}

.result-reference a:hover {
    text-decoration: underline;
}

.result-text {
    line-height: 1.6;
}

.result-text mark {
    background: #fffacd;
    padding: 0.1rem 0.2rem;
}

.search-tips {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f9f9f9;
    border-left: 3px solid #111;
}

.search-tips h3 {
    margin-top: 0;
}

.search-tips ul {
    line-height: 1.8;
}
</style>
{% endblock %}

{% block content %}
<h1>Search the KJV Bible</h1>
<p class="subtitle">Search across all verses in the Authorized King James Version</p>

<section>
    <form class="search-form" method="get" action="/search">
        <input
            type="text"
            name="q"
            value="{{ query }}"
            placeholder="Enter words or phrases to search..."
            class="search-input"
            autofocus
        >
        <button type="submit" class="search-button">Search</button>
    </form>

    {% if query %}
        {% if total_results > 0 %}
            <div class="search-stats">
                Found <strong>{{ total_results }}</strong> result{{ 's' if total_results != 1 else '' }} for "<strong>{{ query }}</strong>"
            </div>

            {% for result in results %}
            <article class="search-result">
                <div class="result-reference">
                    <a href="{{ result.url }}">{{ result.reference }}</a>
                </div>
                <div class="result-text">{{ result.highlighted_text | link_names | safe }}</div>
            </article>
            {% endfor %}
        {% else %}
            <div class="search-stats">
                <p><strong>No results found</strong> for "{{ query }}". Try different words or check your spelling.</p>
            </div>
        {% endif %}
    {% endif %}

    {% if not query or total_results == 0 %}
    <div class="search-tips">
        <h3>Search Tips</h3>
        <ul>
            <li>Search for words or phrases that appear in Bible verses</li>
            <li>Enter specific verse references like "John 3:16" or "Genesis 1:1"</li>
            <li>Use Roman numerals ("I John 4:8") or numbers ("1 John 4:8") for numbered books</li>
            <li>Use multiple words to find verses containing all terms</li>
            <li>Use Old English spellings for better KJV results (e.g., "loveth" instead of "loves")</li>
        </ul>
    </div>
    {% endif %}
</section>
{% endblock %}