---
layout: page
custom-foot: js/browse-js.html
---
{%- assign fields = site.data.config-browse -%}

<!-- Welcome Header and Description -->
{%- assign fields = site.data.config-browse -%}

<!-- Show the Welcome Text only on the Browse page -->
{% if page.url == '/browse/' %}
<div class="row mb-4">
    <div class="col-lg-12 text-center">
        <h1>Welcome to The Archive</h1>
        <p class="lead">Browse through materials from the archive by scrolling freely, or using the search bar to filter items by keywords in our archival metadata. You can use keywords like "pageant" or "Gary" to find people, events, locations, content types, or whatever you're looking for.</p>
        <p class="small text-muted"><a href="/read/soakies/">Learn more about the materials within this archive ></a></p>
    </div>
</div>
{% endif %}

<div class="row mb-2">
    <div class="col-7 col-lg-9">{{ content }}</div>
    <div class="col-5 col-lg-3 text-end text-lg-start">
        {% if site.data.theme.advanced-search == true %}
            {% include advanced-search-modal.html %}
        {% endif %}
    </div>
</div>


<div class="row mb-3 justify-content-center">
    <div class="col-lg-8 text-center">
        <form role="search" id="browseFilter" onsubmit="submitFilter(); return false;">
            <div class="input-group input-group-lg">
                {% if site.data.theme.faceted-search == true %}
                    <select class="form-control form-select d-none d-lg-block" id="fieldSelect" style="max-width: 200px;" aria-label="select search field to filter">
                        <option value="all">All Fields</option>
                        <option value="title">Title</option>
                        {% for f in fields %}
                            {% assign cap-field = f.field | capitalize %}
                            <option value="{{ f.field }}">{{ f.facet_name | default: f.display_name | default: cap-field }}</option>
                        {% endfor %}
                        <option value="display_template" data-bs-toggle="tooltip" title="The content type (e.g. image, video, document)">Content Type</option>
                        {% if site.data.theme.advanced-search == true %}
                            <option value="" disabled>─────────────</option>
                            <option value="advanced">Advanced Search...</option>
                        {% endif %}
                    </select>

                    <!-- Mobile filter button - shows only on small screens -->
                    <div class="{% if site.data.theme.faceted-search == true %}dropdown d-lg-none{% else %}d-none{% endif %}">
                        <button class="py-3 btn btn-outline-secondary" type="button" id="mobileFilterButton" data-bs-toggle="dropdown" aria-expanded="false" title="Filter options">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16">
                                <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
                            </svg>
                            <span id="selectedField" class="d-none d-sm-inline ms-1">All Fields</span>
                        </button>
                        <div class="dropdown-menu">
                            <button class="dropdown-item" type="button" data-field="all">All Fields</button>
                            <button class="dropdown-item" type="button" data-field="title">Title</button>
                            {% for f in fields %}
                                {% assign cap-field = f.field | capitalize %}
                                <button class="dropdown-item" type="button" data-field="{{ f.field }}">{{ f.facet_name | default: f.display_name | default: cap-field }}</button>
                            {% endfor %}
                            <button class="dropdown-item" type="button" data-field="display_template" data-bs-toggle="tooltip" title="The content type (e.g. image, video, document)">Content Type</button>
                            {% if site.data.theme.advanced-search == true %}
                                <div class="dropdown-divider"></div>
                                <button class="dropdown-item" type="button" data-field="advanced">Advanced Search...</button>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
                <input type="text" class="form-control" id="filterTextBox" placeholder="Filter ..." aria-label="Search"> 
                <div id="dateRangeInputs" class="date-range-inputs">
                    <div class="date-input-group">
                        <input type="text" id="dateCreated" class="ms-2 form-control" placeholder="Enter Date (Text)">
                    </div>
                </div>
                <button class="btn btn-success" type="submit" title="Filter items" id="filterButton">Search</button>
                <button class="btn btn-outline-secondary filter d-none d-lg-flex" onclick="resetFilter(); return false;" data-filter="">Reset</button>
            </div>
        </form>
    </div>
    <div class="col-lg-2">
        <div class="dropdown">
            <button class="btn btn-secondary mt-1 dropdown-toggle" type="button" id="browseSortButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Sort by <span id="sortFilter">Random</span>
            </button>
            <div class="dropdown-menu browse-sort-menu" aria-labelledby="browseSortButton">
                <button class="dropdown-item browse-sort-item {% if site.data.theme.default-sort-field == '' %}active{% endif %}" data-filter="random">Random</button>
                <button class="dropdown-item browse-sort-item" data-filter="title">Title</button>
                {% assign sort_options = site.data.config-browse | where_exp: 'i','i.sort_name != nil' %}
                {% for o in sort_options %}
                    <button class="dropdown-item browse-sort-item" data-filter="{{ o.field | escape }}">{{ o.sort_name }}</button>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
        <!-- Active filter indicators -->
        <div id="activeFilters" class="mt-2 text-start"></div>
        <div class="h2" id="numberOf"></div>
       
<div id="loadingIcon" class="text-center">
    <div class="spinner-border text-dark" role="status"><span class="visually-hidden">Loading...</span></div>
</div>

<div class="row" id="browseItems"></div>