<div class="collector-systems-wrapper">

	<input type="hidden" value="{{ nxshowrec }}" id="rectop"/>
	<input type="hidden" value="{{ nxshskip }}" id="recskip"/>
	<input type="hidden" value="{{ count }}" id="totrec"/>
	<input type="hidden" value="{{ dataorderby }}" id="dataorderby"/>

	<div class="py-4">
		<div class="wow fadeInDown" data-wow-delay="0.1s">
			<div class="row mb-3">
				<div class="col d-inline-flex">
					<h1 class="cs-page-title">Exhibitions</h1>
					{% if count > nxshowrec %}
						<h6 class="cs-page-total-count">({{ count }}
							results)</h6>
					{% endif %}
				</div>
				<div class="col-auto text-end my-auto d-inline-flex">
					<div class="sort-by-field" id="sortinghtml">
						<span class="sort-by-title me-3">Sort By:
						</span>
						<select name="seldataorderby" id="seldataorderby" class="form-select" onchange="return applySorting('{{ current_page }}')">
							<option value="ExhibitionSubject%20desc" {{ dataorderby == "ExhibitionSubject%20desc" ? 'selected' : '' }}>Exhibition (z-a)</option>
							<option value="ExhibitionSubject%20asc" {{ dataorderby == "ExhibitionSubject%20asc" ? 'selected' : '' }}>Exhibition (a-z)</option>
							<option value="ExhibitionStartDate%20desc" {{ dataorderby == "ExhibitionStartDate%20desc" ? 'selected' : '' }}>Start Date (oldest-newest)</option>
							<option value="ExhibitionStartDate%20asc" {{ dataorderby == "ExhibitionStartDate%20asc" ? 'selected' : '' }}>Start Date (newest-oldest)</option>
							<option value="ExhibitionEndDate%20desc" {{ dataorderby == "ExhibitionEndDate%20desc" ? 'selected' : '' }}>End Date (oldest-newest)</option>
							<option value="ExhibitionEndDate%20asc" {{ dataorderby == "ExhibitionEndDate%20asc" ? 'selected' : '' }}>End Date (newest-oldest)</option>
						</select>
            {% include '@collector_systems/templates/search-form.html.twig' %}
					</div>
				</div>
			</div>

			<div class="row card-group postList g-4 exhibitions-container mt-3" id="fetchfilterdata">
				{% for exhibi in all_exhibitions %}
					{%
                      set delaytm = (loadsec == 1 ? '0.01s' : (loadsec == 2 ? '0.03s' : '0.05s'))
                  %}
					<div class="card col-lg-4 col-md-6 col-sm-6 col-12 mb-3 wow fadeInDown" data-wow-delay="{{ delaytm }}">
            {% if (showImagesOnListPages) %}
              <div class="card-body d-flex flex-column">
                <div class="image-wrapper">
                  <a href="javascript:;" onclick="return getmoredetailsForExhibition('{{ site_url }}', {{ exhibi.ExhibitionId }})" class="image-wrapper-link">
                    {%
                                      set exbi_img = exhibi.ExhibitionImageAttachment ? 'data:image/jpeg;base64,' ~ base64_encode(exhibi.ExhibitionImageAttachment) : ''

                                  %}
                    {% set relative_path = exhibi.ImagePath ? "/" ~ exhibi.ImagePath : '' %}
                    {% set image_url = relative_path ? relative_path : '' %}
                    {% set altText = exhibi.ExhibitionSubject is not empty ? exhibi.ExhibitionSubject : 'Image description is not available' %}
                    {% if not exbi_img and not relative_path %}
                      <img class="img-fluid" src="https://cdn.collectorsystems.com/images/noimage300.png" alt="{{ altText }}"/>
                    {% else %}
                      <img class="img-fluid" src="{{ exbi_img ? exbi_img : image_url }}" alt="{{ altText }}"/>
                    {% endif %}
                  </a>
                </div>
              </div>
            {% endif %}
						<div class="card-footer text-muted">
							<a href="javascript:;" onclick="return getmoredetailsForExhibition('{{ site_url }}', {{ exhibi.ExhibitionId }})">
								<h5 class="card-title font-normal">{{ exhibi.ExhibitionSubject }}</h5>
							</a>
							{% if (exhibi.ExhibitionDate) %}
							<a href="javascript:;" onclick="return getmoredetailsForExhibition('{{ site_url }}', {{ exhibi.ExhibitionId }})">
								<h5 class="card-title font-normal">{{ exhibi.ExhibitionDate }}</h5>
							</a>
							{% endif %}
						</div>
					</div>
					{%
                      set loadsec = loadsec + 1
                  %}
					{%  set loadsec = (loadsec == 4 ? 1 : loadsec) %}
				{% endfor %}
				{% if count == 0 %}
					{% if qSearch is not empty and qSearch is not null and qSearch is not defined %}
						<div class="cs-theme-nodata">No results found. Please try another search.</div>
					{% else %}
						<div class="cs-theme-nodata">No data available.</div>
					{% endif %}
				{% endif %}
			</div>
			{% if count > showrec %}
				<div class="view-more" style="display:none;">
					<a id="loadBtn" style="cursor:pointer" onclick="return fetch('{{ ajaxfor }}');">View more</a>
				</div>
			{% endif %}
			{{ customPaginationForTopLevelTabs(requested_pageNo, count, dataorderby, qSearch) }}
		</div>
	</div>
</div>
