<style>
    #searchPattern {
        width: 300px;
        background-image: url("images/edit-find.svg");
        background-repeat: no-repeat;
        background-size: 1.5em;
        background-position: left;
        border: 1px solid var(--color-border-default);
        border-radius: 3px;
        padding: 0 0 0 25px;
    }

    #categorySelect {
        width: 150px;
    }

    #pluginsSelect {
        width: 150px;
    }

    #searchResultsNoPlugins,
    #searchResultsNoSearches {
        height: calc(100% - 110px);

        table {
            height: 100%;
            width: 100%;
            text-align: center;
        }
    }

    #searchResultsFilters {
        height: 40px;
        padding-top: 10px;
        overflow: auto;
    }

    #searchInNameFilter {
        width: 150px;
        margin-right: 20px;
    }

    #searchMinSeedsFilter,
    #searchMaxSeedsFilter,
    #searchMinSizeFilter,
    #searchMaxSizeFilter {
        width: 5em;
    }

    #manageSearchPlugins {
        float: right;
    }

    #searchResultsGranularFilters {
        display: none;
    }

    #searchResultsGranularFiltersWarning {
        vertical-align: bottom;
        margin-left: 10px;
    }

    #manageSearchPlugins,
    #startSearchButton {
        padding: 3px 6px;
    }

    #startSearchButton img,
    #manageSearchPlugins img {
        margin: 0 5px -3px 0;
    }

    @media (min-width: 1060px) {
        #searchResultsGranularFilters {
            display: inline-block;
        }

        #searchResultsGranularFiltersWarning {
            display: none;
        }

        #searchPattern {
            width: 500px;
        }
    }

</style>

<div id="searchResults">
    <div style="overflow: hidden; height: 60px;">
        <div style="display: flex; flex-wrap: wrap; gap: 5px; margin: 20px 0 10px 0; height: 24px;">
            <input type="text" id="searchPattern" class="searchInputField" placeholder="QBT_TR(Search)QBT_TR[CONTEXT=SearchEngineWidget]" aria-label="QBT_TR(Search)QBT_TR[CONTEXT=SearchEngineWidget]" autocorrect="off" autocomplete="off" autocapitalize="none" oninput="qBittorrent.Search.onSearchPatternChanged()">
            <select id="categorySelect" class="searchInputField" aria-label="QBT_TR(Select category)QBT_TR[CONTEXT=SearchEngineWidget]" onchange="qBittorrent.Search.categorySelected()"></select>
            <select id="pluginsSelect" class="searchInputField" aria-label="QBT_TR(Select plugins)QBT_TR[CONTEXT=SearchEngineWidget]" onchange="qBittorrent.Search.pluginSelected()"></select>
            <button type="button" id="startSearchButton" class="searchInputField" onclick="qBittorrent.Search.startStopSearch()">
                <img src="images/edit-find.svg" alt="QBT_TR(Search)QBT_TR[CONTEXT=SearchEngineWidget]" width="16" height="16">QBT_TR(Search)QBT_TR[CONTEXT=SearchEngineWidget]
            </button>
        </div>
    </div>

    <div id="searchResultsNoPlugins">
        <table>
            <tbody>
                <tr>
                    <td>
                        QBT_TR(There aren't any search plugins installed.)QBT_TR[CONTEXT=SearchEngineWidget]
                        <br>
                        QBT_TR(Click the "Search plugins..." button at the bottom right of the window to install some.)QBT_TR[CONTEXT=SearchEngineWidget]
                    </td>
                </tr>
            </tbody>
        </table>
        <span></span>
    </div>

    <div id="searchResultsNoSearches" style="display: none">
        <table>
            <tbody>
                <tr>
                    <td>
                        QBT_TR(Start a search above.)QBT_TR[CONTEXT=SearchEngineWidget]
                    </td>
                </tr>
            </tbody>
        </table>
        <span></span>
    </div>

    <div id="searchTabsToolbar" class="toolbarTabs" style="border-bottom: 1px solid var(--color-border-default); display: none">
        <ul id="searchTabs" class="tab-menu"></ul>
        <div class="clear"></div>
    </div>

    <div id="searchResultsFilters" style="display: none;">
        <input type="text" id="searchInNameFilter" placeholder="QBT_TR(Filter)QBT_TR[CONTEXT=SearchEngineWidget]" autocorrect="off" autocapitalize="none">

        <span>QBT_TR(Results)QBT_TR[CONTEXT=SearchEngineWidget] (QBT_TR(showing)QBT_TR[CONTEXT=SearchEngineWidget] <span id="numSearchResultsVisible" class="numSearchResults">0</span> QBT_TR(out of)QBT_TR[CONTEXT=SearchEngineWidget] <span id="numSearchResultsTotal" class="numSearchResults">0</span>):</span>

        <div style="display: inline-block; float: right;">
            <label for="searchInTorrentName" style="margin-left: 15px;">QBT_TR(Search in:)QBT_TR[CONTEXT=SearchEngineWidget]</label>
            <select id="searchInTorrentName" onchange="qBittorrent.Search.searchInTorrentName()">
                <option value="names">QBT_TR(Torrent names only)QBT_TR[CONTEXT=SearchEngineWidget]</option>
                <option value="everywhere">QBT_TR(Everywhere)QBT_TR[CONTEXT=SearchEngineWidget]</option>
            </select>

            <img id="searchResultsGranularFiltersWarning" src="images/dialog-warning.svg" title="QBT_TR(Increase window width to display additional filters)QBT_TR[CONTEXT=SearchEngineWidget]" alt="QBT_TR(Warning)QBT_TR[CONTEXT=SearchEngineWidget]" width="24" height="24">

            <div id="searchResultsGranularFilters">
                <span style="margin-left: 15px;">QBT_TR(Seeds:)QBT_TR[CONTEXT=SearchEngineWidget]</span>
                <input type="number" min="0" max="1000" id="searchMinSeedsFilter" value="0" onchange="qBittorrent.Search.searchSeedsFilterChanged()">
                <span>QBT_TR(to)QBT_TR[CONTEXT=SearchEngineWidget]</span>
                <input type="number" min="0" max="1000" id="searchMaxSeedsFilter" value="0" onchange="qBittorrent.Search.searchSeedsFilterChanged()">

                <span style="margin-left: 15px;">QBT_TR(Size:)QBT_TR[CONTEXT=SearchEngineWidget]</span>
                <input type="number" min="0" max="1000" step=".01" value="0.00" id="searchMinSizeFilter" onchange="qBittorrent.Search.searchSizeFilterChanged()">
                <select id="searchMinSizePrefix" onchange="qBittorrent.Search.searchSizeFilterPrefixChanged()">
                    <option value="0">QBT_TR(B)QBT_TR[CONTEXT=misc]</option>
                    <option value="1">QBT_TR(KiB)QBT_TR[CONTEXT=misc]</option>
                    <option value="2" selected>QBT_TR(MiB)QBT_TR[CONTEXT=misc]</option>
                    <option value="3">QBT_TR(GiB)QBT_TR[CONTEXT=misc]</option>
                    <option value="4">QBT_TR(TiB)QBT_TR[CONTEXT=misc]</option>
                    <option value="5">QBT_TR(PiB)QBT_TR[CONTEXT=misc]</option>
                    <option value="6">QBT_TR(EiB)QBT_TR[CONTEXT=misc]</option>
                </select>
                <span>QBT_TR(to)QBT_TR[CONTEXT=SearchEngineWidget]</span>
                <input type="number" min="0" max="1000" step=".01" value="0.00" id="searchMaxSizeFilter" onchange="qBittorrent.Search.searchSizeFilterChanged()">
                <select id="searchMaxSizePrefix" onchange="qBittorrent.Search.searchSizeFilterPrefixChanged()">
                    <option value="0">QBT_TR(B)QBT_TR[CONTEXT=misc]</option>
                    <option value="1">QBT_TR(KiB)QBT_TR[CONTEXT=misc]</option>
                    <option value="2">QBT_TR(MiB)QBT_TR[CONTEXT=misc]</option>
                    <option value="3" selected>QBT_TR(GiB)QBT_TR[CONTEXT=misc]</option>
                    <option value="4">QBT_TR(TiB)QBT_TR[CONTEXT=misc]</option>
                    <option value="5">QBT_TR(PiB)QBT_TR[CONTEXT=misc]</option>
                    <option value="6">QBT_TR(EiB)QBT_TR[CONTEXT=misc]</option>
                </select>
            </div>
        </div>
    </div>

    <div id="searchResultsTableContainer" style="display: none">
        <div id="searchResultsTableFixedHeaderDiv" class="dynamicTableFixedHeaderDiv">
            <table class="dynamicTable unselectable" style="position:relative;">
                <thead>
                    <tr class="dynamicTableHeader"></tr>
                </thead>
            </table>
        </div>
        <div id="searchResultsTableDiv" class="dynamicTableDiv">
            <table class="dynamicTable unselectable">
                <thead>
                    <tr class="dynamicTableHeader"></tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <div style="height: 30px; padding-top: 10px;">
        <button type="button" id="manageSearchPlugins" onclick="qBittorrent.Search.manageSearchPlugins()">
            <img alt="QBT_TR(Search plugins...)QBT_TR[CONTEXT=SearchEngineWidget]" src="images/plugins.svg" width="16" height="16">QBT_TR(Search plugins...)QBT_TR[CONTEXT=SearchEngineWidget]
        </button>
    </div>
</div>

<ul id="searchResultsTableMenu" class="contextMenu">
    <li><a href="#Download"><img src="images/downloading.svg" alt="QBT_TR(Download)QBT_TR[CONTEXT=SearchJobWidget]"> QBT_TR(Download)QBT_TR[CONTEXT=SearchJobWidget]</a></li>
    <li class="separator"><a href="#OpenDescriptionUrl"><img src="images/application-url.svg" alt="QBT_TR(Open description page)QBT_TR[CONTEXT=SearchJobWidget]"> QBT_TR(Open description page)QBT_TR[CONTEXT=SearchJobWidget]</a></li>
    <li>
        <a href="#" class="arrow-right"><img src="images/edit-copy.svg" alt="QBT_TR(Copy)QBT_TR[CONTEXT=SearchJobWidget]"> QBT_TR(Copy)QBT_TR[CONTEXT=SearchJobWidget]</a>
        <ul>
            <li><a href="#" id="copySearchTorrentName" class="copySearchDataToClipboard"><img src="images/name.svg" alt="QBT_TR(Name)QBT_TR[CONTEXT=SearchJobWidget]"> QBT_TR(Name)QBT_TR[CONTEXT=SearchJobWidget]</a></li>
            <li><a href="#" id="copySearchTorrentDownloadLink" class="copySearchDataToClipboard"><img src="images/insert-link.svg" alt="QBT_TR(Download link)QBT_TR[CONTEXT=SearchJobWidget]"> QBT_TR(Download link)QBT_TR[CONTEXT=SearchJobWidget]</a></li>
            <li><a href="#" id="copySearchTorrentDescriptionUrl" class="copySearchDataToClipboard"><img src="images/application-url.svg" alt="QBT_TR(Description page URL)QBT_TR[CONTEXT=SearchJobWidget]"> QBT_TR(Description page URL)QBT_TR[CONTEXT=SearchJobWidget]</a></li>
        </ul>
    </li>
</ul>
<ul id="searchResultsTabsMenu" class="contextMenu">
    <li><a href="#closeTab">QBT_TR(Close tab)QBT_TR[CONTEXT=SearchJobWidget]</a></li>
    <li><a href="#closeAllTabs">QBT_TR(Close all tabs)QBT_TR[CONTEXT=SearchJobWidget]</a></li>
</ul>
