{% extends "layout.html" %}
{% block headers %}
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/js/search.js?cache=1742886521"></script>
<style>
.tile-item {
    display: inline-block;
    margin: 0pt 10pt 10pt 0pt;
    padding: 0.8em;
    width: 10.5em;
    border-radius: 10pt;
    cursor: pointer;
    background: #f9f9f9;
}
.tile-item:hover { background: #eeeeee; }
.tile-item:active { background: #e9e9e9; }
.tile-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 10.5em;
    height: 4em;
    font-size: 1.1em;
    font-weight: bold;
    text-align: left;
}
.tile-preview {
    overflow: hidden;
    width: 100%;
    height: 100pt;
    margin: 0 auto;
    user-select: none;
}
.search-terms { text-align: center; }
.search-terms li { display: inline-block; list-style: none; }
.search-terms li button {
    margin: 5pt;
    padding: 10pt;
    border-radius: 5pt;
    background: #f9f9f9;
    cursor: pointer;
    text-decoration: none;
    border: none;
}
.search-terms li button:hover { background: #eeeeee; }
.search-terms li button:active { background: #e9e9e9; }
#search-loader {
    background-image: url('/theme/loader.svg');
    background-position: center;
    background-repeat: no-repeat;
    color: darkgrey;
    display: inline-block;
    font-size: 2.5em;
    font-style: italic;
    padding-top: 5.0em;
    text-align: center;
    width: 100%;
    z-index: 100;
}
#search-error {
    color: darkgrey;
    display: inline-block;
    font-size: 2.5em;
    font-style: italic;
    padding-top: 5.0em;
    text-align: center;
    width: 100%;
    z-index: 100;
}
.search-container {
    min-width: 1100px;
}
.search-container::after {
    content: "";
    display: table;
    clear: both;
}
.search-column {
    float: left;
    padding-bottom: 0.5em;
}
.search-column.left {
    width: 24%;
    padding-right: 2em;
}
.search-column.right {
    width: 73%;
}
.search-sidebar, .search-sidebar-container {
    float: left;
    display: inline-block;
    width: 22%;
}
.search-filter-title {
    font-size: 1.05em;
    font-weight: bold;
    padding-bottom: 0.5em;
}
.search-filter-content {
    padding-bottom: 0.5em;
}
.search-filter-content li {
    display: flex;
    flex-direction: row;
}
.search-filter-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.search-filter-content input[type="text"],input[type="date"] {
    margin-right: 1em;
    height: 1.2em;
    display: block;
    margin-left: 2.4em;
}
.search-filter-apply-button {
    height: 2.5em;
    width: 9.5em;
    padding: 0.5em 3.2em 0.5em 3.2em;
    border-radius: 0.5em;
    background: #eeeeee;
    color: #cccccc;
    text-decoration: none;
    border: none;
}
.search-filter-apply-button:hover { background: #eeeeee; }
.search-filter-reset-button {
    height: 2.5em;
    width: 9.5em;
    padding: 0.5em 3.2em 0.5em 3.2em;
    border-radius: 0.5em;
    background: #eeeeee;
    color: #cccccc;
    cursor: pointer;
    text-decoration: none;
    border: none;
}
.filter-button-reset:hover { background: #cccccc; color: #000000; }
.search-results {
    clear: right;
}
.search-results-pager {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    width: 100%;
}
.corporate-identity-table { width: auto !important; max-width: auto !important; }
.corporate-identity-table thead tr th { color: #fff; }
.corporate-identity-table tbody tr td:nth-child(1) { max-width: 0; }
.search-results-pager div {
    padding: 0.5em 0.5em 0.5em 0.5em;
}
#textinput-publisheddate-other-error {
    display: none;
    margin-left: 2.4em;
    color: red;
}
.show-more-label {
    text-align: center;
}
label { cursor: pointer; }
.lightgrey { color: lightgrey; }
#search-filter-buttons-wrapper { display: flex; justify-content: space-between; padding: 5pt 0pt 5pt 0pt;}
.search-filter-button { flex: 50%; }
#textinput_institutions_other,
#textinput_filetypes_other,
#textinput_publisheddate_other { display: none; }
.hide-by-default { display: none; }
.pad-left { padding-left: 1em; }
#sort-by-wrapper { float: left; height: 4.5em; }
#sort-by-dropdown-wrapper { justify-content: space-between; padding: 5pt 0pt 5pt 0pt; }
#sort-by { padding: 0.5em 1.0em 0.5em 0.7em; border-radius: 0.5em; border: 1px solid darkgrey; width: 12em; height: 2.5em; }
.left { text-align: left; }
.right { text-align: right; }
#result-count-wrapper { float: left; height: 4.5em; padding-left: 2em; }
#result-count-spacer { padding-top: 2em; }
#view-mode-wrapper { float: right; text-align: right; margin-right: 1em; height: 4.5em; }
#view-options-wrapper { justify-content: space-between; padding: 5pt 0pt 5pt 0pt; }
#tile-view-mode { color: #f49120; cursor: pointer; }
#list-view-mode { color: darkgray; cursor: pointer; }
#search-results-tile-view { text-align: left; }
</style>
{% endblock %}
{% block body %}
<div class="search-container">

    <!-- Start of Search Sidebar -->
    <div class="search-column left">
        <strong>Filters</strong>
        <div id="search-filter-buttons-wrapper">
            <div class="search-filter-button left">
                <button class="search-filter-apply-button disabled" id="search-filter-apply-button">Apply</button>
            </div>
            <div class="search-filter-button right">
                <button class="search-filter-reset-button" id="search-filter-reset-button">Reset</button>
            </div>
        </div>

        <div class="search-filter-row">
            <div class="search-filter-title">Institutions</div>
            <div class="search-filter-content multiple other" id="search-filter-content-institutions">
                <ul>
                    {%- set ns = namespace(featured_institutions=0) -%}
                    {%- for institution in institutions | sort(attribute='name') -%}
                    {%- if institution.is_featured and institution.name != "Other institutions" -%}
                    {# Hide institutions ending with "Students". #}
                    {# The hidden institutions will be processed by Javascript.  #}
                    {%- set hidden = "hidden" if institution.name[-9:] == " Students" else "" -%}
                    <li class="featured">
                        <input type="checkbox" id="checkbox_institutions_{{institution.id}}" name="checkbox_institutions_{{institution.id}}" value="{{institution.id}}" {{hidden}}>
                        <label for="checkbox_institutions_{{institution.id}}" {{hidden}}>{{institution.name}}</label>
                    </li>
                    {%- set ns.featured_institutions = ns.featured_institutions + 1 -%}
                    {%- endif -%}
                    {%- endfor -%}
                    {%- for institution in institutions | sort(attribute='name') -%}
                    {%- if not institution.is_featured and institution.name != "Other institutions" -%}
                    {%- set hidden = "hidden" if institution.name[-9:] == " Students" else "" -%}
                    <li>
                        <input type="checkbox" id="checkbox_institutions_{{institution.id}}" name="checkbox_institutions_{{institution.id}}" value="{{institution.id}}" {{hidden}}>
                        <label for="checkbox_institutions_{{institution.id}}" {{hidden}}>{{institution.name}}</label>
                    </li>
                    {%- endif -%}
                    {%- endfor -%}

                    <li><input type="checkbox" id="checkbox_institutions_other" name="checkbox_institutions_other" value="other"><label for="checkbox_institutions_other">Other institution</label> </li>
                    <li><input type="text" id="textinput_institutions_other" name="textinput_institutions_other" placeholder="ex) Amsterdam" value="" maxlength="255"> </li>
                </ul>
            </div>
            {% if ns.featured_institutions > 0 %}
            <div id="search-institutions-show-more" class="show-more-label"><label class="corporate-identity">Show more</label></div>
            {% endif %}
        </div>

        <div class="search-filter-row">
            <div class="search-filter-title">Deposit Types</div>
            <div class="search-filter-content" id="search-filter-content-datatypes">
                <ul>
                    <li> <label for="checkbox_datatypes_3"><input type="checkbox" id="checkbox_datatypes_3" name="dataset" value="3">Dataset</label> </li>
                    <li> <label for="checkbox_datatypes_9"><input type="checkbox" id="checkbox_datatypes_9" name="software" value="9">Software</label> </li>
                    <li> <label for="checkbox_datatypes_collection"><input type="checkbox" id="checkbox_datatypes_collection" name="collection" value="collection">Collection</label> </li>
                </ul>
            </div>
        </div>

        <div class="search-filter-row">
            <div class="search-filter-title">Search Scope</div>
            <div class="search-filter-content multiple" id="search-filter-content-searchscope">
                <ul>
                    <li> <label for="checkbox_searchscope_title"><input type="checkbox" id="checkbox_searchscope_title" name="title" value="title">Title</label> </li>
                    <li> <label for="checkbox_searchscope_description"><input type="checkbox" id="checkbox_searchscope_description" name="description" value="description">Description</label> </li>
                    <li> <label for="checkbox_searchscope_tag"><input type="checkbox" id="checkbox_searchscope_tag" name="tag" value="tag">Keyword</label> </li>
                    <li> <label for="checkbox_searchscope_author"><input type="checkbox" id="checkbox_searchscope_author" name="author" value="author">Author</label> </li>
                </ul>
            </div>
        </div>

        <div class="search-filter-row">
            <div class="search-filter-title">File Types</div>
            <div class="search-filter-content multiple other" id="search-filter-content-filetypes">
                <ul>
                    <li> <label for="checkbox_filetypes_excel"><input type="checkbox" id="checkbox_filetypes_excel" name="excel" value="excel">Excel</label> </li>
                    <li> <label for="checkbox_filetypes_csv"><input type="checkbox" id="checkbox_filetypes_csv" name="csv" value="csv">CSV</label> </li>
                    <li> <label for="checkbox_filetypes_txt"><input type="checkbox" id="checkbox_filetypes_txt" name="txt" value="txt">Text</label> </li>
                    <li> <label for="checkbox_filetypes_netCDF"><input type="checkbox" id="checkbox_filetypes_netCDF" name="netCDF" value="netCDF">netCDF</label> </li>
                    <li> <label for="checkbox_filetypes_zip"><input type="checkbox" id="checkbox_filetypes_zip" name="zip" value="zip">Zip</label> </li>
                    <li> <label for="checkbox_filetypes_other"><input type="checkbox" id="checkbox_filetypes_other" name="other" value="other">Other</label> </li>
                    <li> <div><input type="text" id="textinput_filetypes_other" name="textinput_filtertypes_other" placeholder="ex) application" value="" maxlength="255"></div> </li>
                </ul>
            </div>
        </div>

        <div class="search-filter-row">
            <div class="search-filter-title">Published Date</div>
            <div class="search-filter-content other" id="search-filter-content-publisheddate">
                <ul>
                    <li> <label for="checkbox_publisheddate_0"><input type="checkbox" id="checkbox_publisheddate_0" name="checkbox_publisheddate_0" value="0">This Year</label></li>
                    <li> <label for="checkbox_publisheddate_1"><input type="checkbox" id="checkbox_publisheddate_1" name="checkbox_publisheddate_1" value="1">Past 1 year</label></li>
                    <li> <label for="checkbox_publisheddate_2"><input type="checkbox" id="checkbox_publisheddate_2" name="checkbox_publisheddate_2" value="2">Past 2 years</label></li>
                    <li> <label for="checkbox_publisheddate_3"><input type="checkbox" id="checkbox_publisheddate_3" name="checkbox_publisheddate_3" value="3">Past 3 years</label></li>
                    <li> <label for="checkbox_publisheddate_other"><input type="checkbox" id="checkbox_publisheddate_other" name="checkbox_publisheddate_other" value="other">Other</label></li>
                    <li> <input type="date" id="textinput_publisheddate_other" name="textinput_publisheddate_other" placeholder="YYYY-MM-DD" value="" maxlength="10"></li>
                </ul>
            </div>
        </div>

        <div class="search-filter-row">
            <div class="search-filter-title">Licenses</div>
            <div class="search-filter-content multiple" id="search-filter-content-licenses">
                <ul>
                    {% for license in licenses | sort(attribute='name') %}
                    <li>
                        <input type="checkbox" id="checkbox_licenses_{{license.id}}" name="checkbox_licenses_{{license.id}}" value="{{license.id}}">
                        <label for="checkbox_licenses_{{license.id}}">{{license.name}}</label>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <div id="search-licenses-show-more" class="show-more-label"><label class="corporate-identity">Show more</label></div>
        </div>

        <div class="search-filter-row">
            <div class="search-filter-title">Categories</div>
            <div class="search-filter-content multiple" id="search-filter-content-categories">
                <ul>
                    {%- for category in categories | sort(attribute='title') -%}
                    {%- if not "parent_id" in category -%}
                    <li>
                        <input type="checkbox" id="checkbox_categories_{{category.id}}" class="parentcategory" name="checkbox_categories_{{category.id}}" value="{{category.id}}">
                        <label for="checkbox_categories_{{category.id}}">{{category.title}}</label>
                    </li>

                    <ul id="subcategories_of_{{category.id}}" class="hide-by-default">
                        {%- for subcategory in categories -%}
                        {%- if subcategory.parent_id == category.id -%}
                        <li class="pad-left">
                            <input type="checkbox" id="checkbox_categories_{{subcategory.id}}" class="subcategory" name="checkbox_categories_{{subcategory.id}}" value="{{subcategory.id}}">
                        <label for="checkbox_categories_{{subcategory.id}}">{{subcategory.title}}</label>
                        </li>
                        {%- endif -%}
                        {%- endfor -%}
                    </ul>
                    {%- endif -%}
                    {%- endfor -%}
                </ul>
            </div>
            <div id="search-categories-show-more" class="show-more-label"><label class="corporate-identity">Show more</label></div>
        </div>
    </div>
    <!-- End of Search Sidebar -->

    <!-- Start of Search Content -->
    <div class="search-column right">

        <!-- Sort by select box -->
        <div id="sort-by-wrapper">
            <div class="left">
                <b>Sort By</b>
                <div id="sort-by-dropdown-wrapper">
                    <select id="sort-by" name="sort-by">
                        <option value="date_asc">Date (Old First)</option>
                        <option value="date_dsc" selected>Date (New First)</option>
                        <option value="title_asc">Title (A to Z)</option>
                        <option value="title_dsc">Title (Z to A)</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Result count -->
        <div id="result-count-wrapper">
            <div class="left">
                <div id="result-count-spacer"><span id="search-results-count"></span></div>
            </div>
        </div>

        <!-- View mode -->
        <div id="view-mode-wrapper">
            <b>View</b>
            <div id="view-options-wrapper">
                <span class="fas fa-tile fa-lg" id="tile-view-mode"><span class="hidden">Tile View</span></span>
                <span class="fas fa-list fa-lg disabled" id="list-view-mode"><span class="hidden">List View</span></span>
            </div>
        </div>

        <div id="search-loader" class="hide-by-default">Loading...</div>
        <div id="search-error" class="hide-by-default"></div>

        <!-- Search results -->
        <div class="search-results" id="search-results">
            <div class="search-results-box" id="search-results-box">
                <div id="search-results-tile-view"></div>
                <div id="search-results-list-view" class="hide-by-default"></div>
                <div class="search-results-pager"></div>
            </div>
        </div>
        <!-- End of Search results -->
    </div>
    <!-- End of Search Content -->
</div>

{% endblock %}
