{% extends "base.html" %}
{% block content_class %}{{ super() }} container p-2 p-sm-3{% endblock %}
{% block content %}
<div id="ezra">
    {% raw %}
    <header class="row no-gutters">
        <div class="col-lg-8">
            <div class="mb-lg-3">
                <a :href="home()" class="text-decoration-none">
                    <h4 class="search-heading text-lg-left">✝ Ezra 聖經語意搜尋</h4>
                </a>
            </div>
            <form id="search-form" class="form mb-2" action="/search" novalidate>
                <div class="form-row">
                    <div class="col">
                        <input id="search-box" class="form-control shadow-sm" name="q" ref="keyword" type="search"
                            inputmode="search" aria-label="Search" v-model="keyword" required>
                        <button v-if="keyword" type="button" class="btn bg-transparent"
                            style="position: absolute; top: 0; right: 5px; z-index: 10; color: grey;"
                            @click="clearSearch()">
                            <i class="fas fa-times-circle"></i>
                        </button>
                    </div>
                    <div class="col-auto">
                        <button class="btn btn-outline-success shadow-sm" type="submit">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
            </form>
            <div class="nav-scroller mb-1">
                <nav class="nav">
                    <a v-for="(display, range) in searchRanges" :href="searchRangeQuery(range)"
                        :class="{ active: rangeSelected(range) }" v-cloak>
                        {{ display }} <span v-if="rangeSelected(range)" class="sr-only">(*)</span>
                    </a>
                </nav>
            </div>
        </div>
    </header>
    <div class="row no-gutters">
        <div class="col-lg-8">
            <div v-if="loading" class="text-center my-5">
                <div class="spinner-border" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
            <div v-for="result in results" class="search-result card my-1 my-sm-2 shadow-sm"
                :class="{ 'low-relevant': lowRelevant(result) }" v-cloak>
                <div class="card-body p-2 p-sm-3">
                    <h6 class="card-title mb-1 mb-sm-2">
                        <a :href="wdLink(result.ref)">{{ verseRef(result.ref) }}</a>
                    </h6>
                    <p class="card-text" v-html="highlight(result)"></p>
                </div>
            </div>
        </div>
        <div v-if="relatedKeywords.length > 0" class="col-lg-4 pl-lg-4 my-1 my-sm-2" v-cloak>
            <div class="card shadow-sm">
                <div class="card-header">相關搜尋</div>
                <div v-for="kw in relatedKeywords" class="list-group list-group-flush">
                    <a :href="relatedSearch(kw)"
                        class="list-group-item list-group-item-action d-flex justify-content-between">
                        {{ kw }}<i class="fas fa-search align-self-center"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    {% endraw %}
    <div v-if="!loading && !noMoreResults" v-cloak class="row no-gutters my-3">
        <button type="button" class="btn btn-outline-secondary col-lg-8" @click="pages += 1">更多結果</button>
    </div>
</div>
{% endblock %}
{% block script %}
<script src="https://unpkg.com/vue@3.0.5/dist/vue.global.prod.js"></script>
<script src="{{ url_for('static', filename='script.js', version=version) }}"></script>
<script>
    vm.keyword = '{{ keyword }}';
    vm.search(window.location.search);
    vm.findRelated(window.location.search);
</script>
{% endblock %}