<!DOCTYPE html>
{% load i18n %}
{% load webpack_static from webpack_loader %}
<!-- this html is included in help-panel-base.htm -->
<div class="ep-help-content">
    <div>
        <a href="javascript:void(0)" class="ep-help-topic-toggle" aria-expanded="false" aria-controls="intro-to-search-content" role="button"><span class="h4">{% trans "Introduction to Search" %}</span></a>
        <div class="ep-help-topic-content" id="intro-to-search-content">
            <span class="ep-help-img-link"><a href="{% webpack_static 'img/help/search-page-labeled.jpg' %}" aria-hidden="true" target="_blank" tabindex="-1">{% trans "expand image in new tab" %}&nbsp;&nbsp;<i class="fa fa-external-link-square"></i></a></span>
            <p><img class="reloadable-img" src="{% webpack_static 'img/help/search-page-labeled.jpg' %}" aria-hidden="true"></img></p>
            <div>
                <p>{% blocktrans %}<strong>Search Bar</strong> The quickest way to search the database is to begin typing in the search bar. You'll be presented with database terminology which you can use to create one or more simple filters. The search bar also acts as an aggregator of <em>all</em> currently enabled filters.{% endblocktrans %}</p>
                <p>{% blocktrans %}<strong>Search Tools</strong> There are a number tools you can use to explore the database, which are described in detail below.{% endblocktrans %}</p>
                <p>{% blocktrans %}<strong>Search Results</strong> Whenever you change any search filters, the updated search results will be listed here. You can link to a resource's report, zoom to it on the map, or view its related resources.{% endblocktrans %}</p>
                <p>{% blocktrans %}<strong>Search Panel</strong> The contents of this panel will change depending on what search tool you are using. Typically, the map will be activated by default.{% endblocktrans %}</p>
            </div>
        </div>
    </div>
    <div>
        <a href="javascript:void(0)" class="ep-help-topic-toggle" aria-expanded="false" aria-controls="search-tools-content" role="button"><div class="h4">{% trans "Search Tools" %}</div></a>
        <div class="ep-help-topic-content" id="search-tools-content">
            <div>
                <a href="javascript:void(0)" class="ep-help-topic-toggle" aria-expanded="false" aria-controls="map-help-content" role="button"><div class="h5">{% trans "Map" %}</div></a>
                <div class="ep-help-topic-content" id="map-help-content">
                    <p>{% blocktrans %}Search results can be represented on the map in two ways: <strong>markers</strong> show the first set of resources in the search results, and <strong>cells</strong> are used to give a general spatial representation of <em>all</em> resources in the search results.{% endblocktrans %}</p>
                    <p>{% blocktrans %}In addition to displaying search results, the map can show resource layers (showing all resources), or custom overlays, if any have been added. You control the visibility of all layers and basemaps with the tool panel on the right.{% endblocktrans %}</p>
                    <p>{% blocktrans %}Finally, you can add a spatial filter to your query by using the map drawing tools to draw a shape and apply a buffer distance if desired.{% endblocktrans %}</p>
                    <p>
                        <a href="javascript:void(0)" class="ep-help-topic-toggle" aria-expanded="false" aria-controls="map-switch-basemap-help-gif" role="button">{% trans "How to change basemap" %}</a>
                        <span class="ep-help-img-link">
                            <a href="{% webpack_static 'img/help/map-switch-basemap.gif' %}" target="_blank" tabindex="-1" aria-hidden="true">{% trans "expand image in new tab" %}&nbsp;&nbsp;<i class="fa fa-external-link-square"></i>
                            </a>
                        </span>
                        <div class="ep-help-topic-content">
                            <img id="map-switch-basemap-help-gif" class="reloadable-img" src="{% webpack_static 'img/help/map-switch-basemap.gif' %}" aria-hidden="true"></img>
                            <p>{% blocktrans %}To change the basemap, open the <strong>Basemaps</strong> tab, then click on the basemap you would like to use.{% endblocktrans %}</p>
                        </div>
                    </p>
                    <div>
                    <p>
                        <a href="javascript:void(0)" class="ep-help-topic-toggle" aria-expanded="false" aria-controls="search-results-layer-help-gif" role="button">{% trans "How to toggle search results layer" %}</a>
                        <span class="ep-help-img-link">
                            <a href="{% webpack_static 'img/help/map-toggle-search-results-layer.gif' %}" target="_blank" tabindex= aria-hidden="true""-1">{% trans "expand image in new tab" %}&nbsp;&nbsp;<i class="fa fa-external-link-square"></i>
                            </a>
                        </span>
                        <div class="ep-help-topic-content">
                            <img id="search-results-layer-help-gif" class="reloadable-img" src="{% webpack_static 'img/help/map-toggle-search-results-layer.gif' %}" aria-hidden="true"></img>
                            <p>{% blocktrans %}To activate or deactivate overlays, open the <strong>Overlays</strong> tab, then use the switch to show or hide the layer on the map.{% endblocktrans %}</p>
                        </div>
                    </p>
                    </div>
                    <div>
                    <p>
                        <a href="javascript:void(0)" class="ep-help-topic-toggle" aria-expanded="false" aria-controls="map-buffer-search-help-gif" role="button">{% trans "How to search with spatial query" %}</a>
                        <span class="ep-help-img-link">
                            <a href="{% webpack_static 'img/help/map-buffer-search.gif' %}" target="_blank" tabindex="-1" aria-hidden="true">{% trans "expand image in new tab" %}&nbsp;&nbsp;<i class="fa fa-external-link-square"></i>
                            </a>
                        </span>
                        <div class="ep-help-topic-content">
                            <img id="map-buffer-search-help-gif" class="reloadable-img" src="{% webpack_static 'img/help/map-buffer-search.gif' %}" aria-hidden="true"></img>
                            <p>{% blocktrans %}To search with a spatial query, open the <strong>Filter</strong> tab, then use the <strong>Select A Filter</strong> section to draw a new geometry on the map. Additionally, you can search within a distance of your spatial filter by adjusting the <strong>Buffer</strong> distance.{% endblocktrans %}</p>
                        </div>
                    </p>
                    </div>
                </div>
            </div>
            <div>
                <a href="javascript:void(0)" class="ep-help-topic-toggle" aria-expanded="false" aria-controls="time-help-content" role="button"><div class="h5">{% trans "Time" %}</div></a>
                <div class="ep-help-topic-content" id="time-help-content">
                    <p>{% blocktrans %}You can apply a temporal criterion to your query by using the Time Filter. You have the option of creating the filter by hand, or you can use the time wheel. The time wheel is a graphic representation of all the resources in the database, organized chronologically.{% endblocktrans %}<p>
                    <div>
                    <p>
                        <a href="javascript:void(0)" class="ep-help-topic-toggle" aria-expanded="false" aria-controls="time-wheel-example-help-gif" role="button">{% trans "How to apply time filter with time wheel" %}</a>
                        <span class="ep-help-img-link">
                            <a href="{% webpack_static 'img/help/time-wheel-example.gif' %}" target="_blank" tabindex="-1" aria-hidden="true">{% trans "expand image in new tab" %}&nbsp;&nbsp;<i class="fa fa-external-link-square"></i>
                            </a>
                        </span>
                        <div class="ep-help-topic-content">
                            <img id="time-wheel-example-help-gif" class="reloadable-img" src="{% webpack_static 'img/help/time-wheel-example.gif' %}" aria-hidden="true"></img>
                            <p>{% blocktrans %}To filter resources using the Time Wheel, open the <strong>Date Filter</strong> tab, then click on the segment that corresponds with the desired filter on the time wheel.{% endblocktrans %}</p>
                        </div>
                    </p>
                    </div>
                </div>
            </div>
            <div>
                <a href="javascript:void(0)" class="ep-help-topic-toggle" aria-expanded="false" aria-controls="saved-help-content" role="button"><div class="h5">{% trans "Saved" %}</div></a>
                <div class="ep-help-topic-content" id="saved-help-content">
                    <p>{% blocktrans %}Saved searches allow you to view pre-made queries. Saved searches are created by database administrators, so the number of saved searches shown here will vary from one database to the next.{% endblocktrans %}</p>
                </div>
            </div>
            <div>
                <a href="javascript:void(0)" class="ep-help-topic-toggle" aria-expanded="false" aria-controls="advanced-help-content" role="button"><div class="h5">{% trans "Advanced" %}</div></a>
                <div class="ep-help-topic-content" id="advanced-help-content">
                    <p>{% blocktrans %}You can use the advanced search to make more complex queries based on data attributes, or "facets". While the basic search filter allows you to combine multiple filters, advanced search is the only way to combine filters with an <strong>or</strong> operator, and also gives you access to more comparison operators.{% endblocktrans %}</p>
                    <p>{% blocktrans %}In the example below, a search is made within a single resource type for any name <strong>like</strong> "church" <strong>or</strong> any name <strong>like</strong> "gate".{% endblocktrans %}</p>
                    <div>
                    <p>
                        <a href="javascript:void(0)" class="ep-help-topic-toggle" aria-expanded="false" aria-controls="advanced-search-example-help-gif" role="button">{% trans "How to search for multiple words in names" %}</a>
                        <span class="ep-help-img-link">
                            <a href="{% webpack_static 'img/help/advanced-search-example.gif' %}" target="_blank" tabindex="-1" aria-hidden="true">{% trans "expand image in new tab" %}&nbsp;&nbsp;<i class="fa fa-external-link-square"></i>
                            </a>
                        </span>
                        <div class="ep-help-topic-content">
                            <img id="advanced-search-example-help-gif" class="reloadable-img" src="{% webpack_static 'img/help/advanced-search-example.gif' %}" aria-hidden="true"></img>
                            <p>{% blocktrans %}To use the Advanced Search, open the <strong>Advanced</strong> tab, then under the <strong>Search Facets</strong> panel, select the properties of Resource Types that you'd like to filter by by clicking on them. This will add them to the Advanced Search Panel. You can then structure your advanced search by adjusting the search facets in the Advanced Search Panel.{% endblocktrans %}</p>
                        </div>
                    </p>
                    </div>
                </div>
            </div>
                <div>
                <a href="javascript:void(0)" class="ep-help-topic-toggle" aria-expanded="false" aria-controls="related-help-content" role="button"><div class="h5">{% trans "Related" %}</div></a>
                <div class="ep-help-topic-content" id="related-help-content">
                    <p>{% blocktrans %}For each resource listed in the search results you can view its related resources with the "Related Resources" link under the description. By viewing Related Resources, you get a new view of the database: not how resources are related geographically nor chronologically, but qualitatively.{% endblocktrans %}</p>
                    <p>{% blocktrans %}There two methods for viewing Related Resources: in a table where each related resource is a row, or in a graph where resources are shown as nodes in a graph, with relationships connecting them.{% endblocktrans %}</p>
                </div>
            </div>
        </div>
    </div>
</div>