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

	<input type="hidden" value="{{ nxshowrec }}" id="rectop"/>
	<input type="hidden" value="{{ nxshskip }}" id="recskip"/>
	<input type="hidden" value="{{ tot }}" id="totrec"/>
	<input type="hidden" value="{{ dataorderby }}" id="dataorderby"/>
	<!-- <label>{{ listPageSize }}</label> -->

	<!-- Team Start -->
		<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">Artists</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="ArtistName%20desc" {{ "ArtistName%20desc" == dataorderby ? 'selected' }}>Artist Name Desc</option>
							<option value="ArtistName%20asc" {{ "ArtistName%20asc" == dataorderby ? 'selected' }}>Artist Name Asc</option>
						</select>
					</div>
					{% include '@collector_systems/templates/search-form.html.twig' %}
				</div>
			</div>
			<div class="card-group row g-4 postList artists-container mt-3" id="fetchfilterdata">
				{% for artist in AllArtists %}
					{% set delaytm = {
                      1: '0.01s',
                      2: '0.03s',
                      3: '0.05s',
                      4: '0.07s'
                  }[loadsec] %}
					<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 getmoredetailsForArtist('{{  app.request.schemeAndHttpHost }}',{{ artist.ArtistId }})" class="image-wrapper-link">
                  {% set artist_img = artist.ArtistPhotoAttachment ? 'data:image/jpeg;base64,' ~ base64_encode(artist.ArtistPhotoAttachment) : '' %}
                  {% set server_path = artist.ImagePath %}
                  {# {% set relative_path = server_path|replace({'^' ~ server['DOCUMENT_ROOT']: ''}) %} #}
                  {% set relative_path = '/' ~ artist.ImagePath %}

                  {% set image_url =  relative_path %}

                  {% set altText = artist.ArtistName is not empty ? artist.ArtistName : 'Image description is not available' %}

                  {% if artist_img is empty and server_path is empty %}
                    <img class="img-fluid" src="/{{collector_systems_module_path}}/assets/img/artist.png" alt="{{ altText }}"/>
                  {% else %}
                    {% if server_path is empty %}
                      <img class="img-fluid" src="{{ artist_img }}" alt="{{ altText }}"/>
                    {% else %}
                      <img class="img-fluid" src="{{ image_url }}" alt="{{ altText }}"/>
                    {% endif %}
                  {% endif %}
                </a>
              </div>
						</div>
          {% endif %}
						<div class="card-footer text-muted">
							<a href="javascript:;" onclick="return getmoredetailsForArtist('{{  app.request.schemeAndHttpHost }}',{{ artist.ArtistId }})">
								<h5 class="card-title font-normal">
									{{ artist.ArtistName }}
								</h5>
							</a>
						</div>
					</div>
					{% set loadsec = (loadsec + 1) | default(1) %}
				{% endfor %}

				{% if count == 0 %}
					{% if qSearch is not empty and qSearch is not null and qSearch != 'undefined' %}
						<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 + shskip) %}
				<div class="view-more" style="display:none;">
					<a id="loadBtn" style="cursor:pointer" onclick="return fetch('{{ ajaxfor }}');">View more</a>
				</div>
			{% endif %}
			{{ customPaginationForTopLevelTabs(requested_page, count, dataorderby, qSearch) }}
		</div>
	</div>
</div>
