{% extends "layout.html" %}
{% block content %}


<div>

<!-- ARTWORK TITLE AND NAVIGATION -->
	<div>
		<!-- ARTWORK label in rectangle -->
		<div class="artwork-box">
			<span>ARTWORK</span>
		</div>
		<!-- Artwork title -->
		<div class="artwork-title">
			{% for x in artworkintro['results']['bindings'] %}
				{{ x['workLabel']['value'] }}
			{% endfor %}
		</div>
		<!-- Artwork intro-description -->
		<div class="artwork-intro">
			{% for x in artworkintro['results']['bindings'] %}
				{% if 'workDescription' in x %}
					{{ x['workDescription']['value'] }}
				{% endif %}
			{% endfor %}
		</div>

		<!-- NAVIGATION HERE? -->
		<div class="artwork-nav">
			<div class="artwork-nav-label artwork-nav-label-about active">ABOUT THIS WORK</div>
			<!-- <div class="artwork-nav-label">RELATIONSHIPS</div> -->
			<!-- <div class="artwork-nav-label">LISTS</div> -->
			<div class="artwork-nav-label artwork-nav-label-record"><a class="det-record" target="_blank" href="https://daap.bannerrepeater.org/wiki/Item:{{ artwork_id }}">DETAILED RECORD</a></div>
		</div>
	</div>


	<!-- ABOUT -->
	<div class="artwork-about">
		<!-- ARTWORK LEFT COLUMN -->
		<div class="artwork-leftcolumn">

				<!-- ARTWORK IMAGES -->
				<!-- removed artwork-about-img + on img artwork-about-imgs -->
				<div class="my-slider">
					{% if artworkimages['results']['bindings']==[] %}
						<img class="item" src="{{ url_for('static', filename='/imgs/Icons/placeholder_no-image2.png') }}">
					{% else %}
						{% for x in artworkimages['results']['bindings'] |reverse %}
							
							<!-- START GROUP IMG + LABELS -->
								{% if "image" in x %}
								<img class="item" src='{{ x["image"]["value"] | replace("wiki/File:","wiki/Special:Redirect/file/") }}'>
								<!-- copyright and front or back -->
								{% endif %}

								{% if "depictsLabel" in x %}
								<span>{{ x['depictsLabel']['value'] }}</span>
								{% endif %}

								{% if "licenseLabel" in x %}
								<span>{{ x['licenseLabel']['value'] }}</span>
								{% endif %}
							<!-- END GROUP IMG + LABELS -->
							
						{% endfor %}
						{% endif %}
				</div>






<!-- other stuff like downloads, absent for now -->
				<div class="artwork-about-under-img">

<!-- DOWNLOADS AND LINKS -->
				<div>
					{% if artworklinksanddownloads['results']['bindings']==[] %}
					{% else %}
						{% for x in artworklinksanddownloads['results']['bindings'] %}
						<p class="label-item">DOWNLOADS AND LINKS</p>

						{% if ('DownloadDigitalFacsimile' not in x) and ('DigitalFacsimileExternalLink' not in x) and ('DigitalFacsimileExternalLink2' not in x) %}
							<p>information not available</p>
						{% endif %}

						{% if 'DownloadDigitalFacsimile' in x %}
						<div>
							<a target="_blank" href="{{ x['DownloadDigitalFacsimile']['value'] }}"><img src="{{ url_for('static', filename='/imgs/Icons/icn_download.svg') }}"></a>
							<span>Download digital facsimile</span>
						</div>
						{% endif %}

						{% if 'DigitalFacsimileExternalLink' in x %}
						<div>
							<a target="_blank" href="{{ x['DigitalFacsimileExternalLink']['value'] }}"><img src="{{ url_for('static', filename='/imgs/Icons/icn_external_link.svg') }}"></a>
							<span>External digital facsimile link</span>
						</div>
						{% endif %}

						{% if 'DigitalFacsimileExternalLink2' in x %}
						<div>
							<a target="_blank" href="{{ x['DigitalFacsimileExternalLink2']['value'] }}"><img src="{{ url_for('static', filename='/imgs/Icons/icn_external_link.svg') }}"></a>
							<span>External digital facsimile link 2</span>
						</div>
						{% endif %}

						
						{% endfor %}
					{% endif %}
				</div>
				
<!-- OTHER DIGITAL ARTEFACTS -->
				<div>
					{% if artworkartefacts['results']['bindings']==[] %}
					<p>information not available</p>
					{% else %}
					<p class="label-item">OTHER DIGTAL ARTEFACTS</p>
<!-- video images audio -->
						{% for x in artworkartefacts['results']['bindings'] %}

						{% if ('VideoFile' not in x) and ('AudioFile' not in x) and ('ImageFile' not in x) %}
							<p>information not available</p>
						{% endif %}

							{% if 'VideoFile' in x %}
							<div>
								<a target="_blank" href="{{ x['VideoFile']['value'] }}"><img src="{{ url_for('static', filename='/imgs/Icons/icn_video.svg') }}"></a>
								<span>Video</span>
							</div>
							{% endif %}

							{% if 'AudioFile' in x %}
							<div>
								<a target="_blank" href="{{ x['AudioFile']['value'] }}"><img src="{{ url_for('static', filename='/imgs/Icons/icn_audio.svg') }}"></a>
								<span>Audio</span>
							</div>
							{% endif %}

							{% if 'ImageFile' in x %}
							<div>
								<a target="_blank" href="{{ x['ImageFile']['value'] }}"><img src="{{ url_for('static', filename='/imgs/Icons/icn_image.svg') }}"></a>
								<span>Image</span>
							</div>
							{% endif %}

						{% endfor %}
					{% endif %}
				</div>

<!-- DISTRIBUTOR LINKS -->
				<div>
					{% if artworkdistributorlinks['results']['bindings']==[] %}
					{% else %}		
						<p class="label-item">DISTRIBUTOR LINKS</p>
						{% for x in artworkdistributorlinks['results']['bindings'] %}
							{% if 'distributorLinks' not in x %}
							<p>information not available</p>
						{% endif %} 

							{% if 'distributorLinks' in x %}
							<div>
								<img src="{{ url_for('static', filename='/imgs/Icons/icn_external_link.svg') }}">
								<a target="_blank" href="{{ x['distributorLinks']['value'] }}">{{ x['distributorLinks']['value'] }}</a>
							</div>

							{% endif %}
						{% endfor %}	
						
					{% endif %}
				</div>
			</div>
</div>
	
<!-- end of other stuff like downloads, absent for now -->

<!-- RIGHT COLUMN -->
<div class="artwork-rightcolumn"> 

<!-- RIGHT TOP -->
<div class="artwork-rightcolumn-top">
<!-- contributors -->
				<div class="artwork-rightcolumn-top-contributors">
						<p class="label-item">CONTRIBUTORS</p>
						<!-- check if info not available -->
						{% if artworkcontributors['results']['bindings']==[] %}
							<div>information not available</div>
						{% else %}
						<!-- else loop through available data -->
						{% for x in artworkcontributors['results']['bindings'] %}
							<!-- name surname -->
							<div class="metadata-link">
								<a href='/person?id={{ x["creators"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
									<span>{{ x['creatorsLabel']['value'] }}</span>
								</a>
							<!-- role/function -->
								<p>Role {{ x['role']['value'] }}</p>
							</div>
						{% endfor %}
						{% endif %}
				</div>

<!-- date -->
				<div class="artwork-rightcolumn-top-date">
						<p class="label-item">DATE</p>
							<!-- check if info not available -->
							{% if artworkdate['results']['bindings']==[] %}
							<div>information not available</div>
							{% else %}

							<!-- else loops through available dates -->
							{% for x in artworkdate['results']['bindings'] %}
							<!-- date -->
								{% if 'date' in x %}
								<div class="label-item-date-artwork">{{ x['date']['value'] | replace("T00:00:00Z", "") }}</div>
								{% endif %}
								
							<!-- extra info if available -->
								{% if 'sourceLabel' in x %}
								<div>Source: {{ x['sourceLabel']['value'] }}</div>
								{% endif %}
							{% endfor %}
							{% endif %}
					<!-- </div> -->
<!-- end of date -->

<!-- publishers-->
				<!-- <div class="artwork-rightcolumn-top-publishers"> -->
						<p class="label-item">PUBLISHERS</p>
						<!-- loop through publishers -->
						{% if artworkpublisher['results']['bindings']==[] %}
							<span>information not available</span>
						{% else %}
						
						{% for x in artworkpublisher['results']['bindings'] %}
							<!-- name, surname -->
							<div class="metadata-link artwork-rightcolumn-top-publishers-item">
							{% if 'publishersLabel' in x %}
								<a href='/organisation?id={{ x["publishers"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'><span>{{ x['publishersLabel']['value'] }}</span></a>
							{% endif %}
							<!-- role -->
							{% if 'role' in x %}
								<span>{{ x['role']['value'] }}</span>
							{% endif %}
							</div>
						{% endfor %}

						{% endif %}
			
				</div>
<!-- end of publishers-->

</div>
<!-- end of about right top -->

<!-- start of about right column bottom -->
			<div class="">

<!-- description -->

				<!-- if there is a description add description here -->
				{% if artworkdescriptiondata['results']['bindings']==[] %}
				{% else %}

				<p class="label-item">DESCRIPTION</p>

				<!-- For loop -->
				{% for x in artworkdescriptiondata['results']['bindings'] %}
				<div class="artwork-rightcolumn-bottom">
					<!-- left part with the description text already coming in a div from wiki-->
					<div  class="text-description">
						{{ x["text"] | safe }}
					</div>


					<!-- right ride with author etc LATER-->
					<div class="text-date-author">
						{% if "authordescriptionPageLabel" in x %}
						<p class="label-item">AUTHOR</p>
						<p>{{ x['authordescriptionPageLabel']['value'] }}</p>
						{% endif %}
						<!-- if there is an author name then add here otherwise info non available -->

						{% if "sourcedescriptionPage" in x %}
						<p class="label-item">SOURCE</p>
						<p>{{ x["sourcedescriptionPage"]["value"]}} </p>
						<!-- if there is a source name then add here otherwise info non available -->
						{% endif %}

						{% if "datedescriptionPage" in x %}
						<p class="label-item">DATE</p>
						<p>{{ x["datedescriptionPage"]["value"] | replace("T00:00:00Z", "") }}</p>
						{% endif %}
						<!-- if there is a date add here otherwise info non available-->
					</div>

				
				</div>
				{% endfor %}
				{% endif %}
<!-- end description loop -->

<!-- exhibition and distribution history loop-->
				<!-- if exhibition in, then do show that -->
				{% if artworkexhibitiondata['results']['bindings']==[] %}
				{% else %}

				<p class="label-item">EXHIBITION AND DISTRIBUTION HISTORY</p>

				{% for x in artworkexhibitiondata['results']['bindings'] %}
				<div class="artwork-rightcolumn-exhibition">

					<div class="text-exhibition">
						{{ x['text'] | safe }}
					</div>
					<!-- right ride with author etc LATER-->
					<div class="text-date-author">
					
					<!-- if there is an author name then add here otherwise info non available -->
						{% if "authorexhibitionHisPageLabel" in x %}
						<p class="label-item">AUTHOR</p>
						<p>{{ x["authorexhibitionHisPageLabel"]["value"]}} </p>
						{% endif %}

						<!-- if there is a source name then add here otherwise info non available -->
						{% if "sourceexhibitionHisPage" in x%}
						<p class="label-item">SOURCE</p>
						<p>{{ x["sourceexhibitionHisPage"]["value"]}} </p>
						{% endif %}

						<!-- if there is a date add here otherwise info non available-->
						{% if "dateexhibitionHisPage" in x%}
						<p class="label-item">DATE</p>
						<p>{{ x["dateexhibitionHisPage"]["value"] | replace("T00:00:00Z", "") }} </p>
						{% endif %}
					</div>

				</div>
				{% endfor %}
				{% endif %}
<!-- end exhibition loop -->

<!-- end of right column -->
			</div>

<!-- end of about -->
	</div>






</div>
<!-- END OF ABOUT -->

<!-- LISTS DESIGN IF NO LISTS TO BE CLARIFIED-->
	<div class="artwork-lists">
		<div class="Heading_C">LISTS</div>

		{% if artworklists['results']['bindings']==[] %}
			<p>The artwork isn't featured in any lists yet</p>
		{% else %}
			<p>This artwork is featured in the following lists: </p>
		{% for x in artworklists['results']['bindings'] %}
		<div>
			<div class="artwork-lists-img">
				{% if "image" in x %}
					<img src="x['image']['value']">
				{% else %}
					<img src="{{ url_for('static', filename='/imgs/Icons/placeholder_no-image2.png') }}">
				{% endif %}
			</div>
			<div class="artwork-lists-title">
			{% if "listLabel" in x %}
				{{ x['listLabel']['value'] }}
			{% endif %}
			</div>
			<div class="artwork-lists-works-number">
				placeholder for number of artworks in list
			</div>
			
		</div>
		{% endfor %}
		{% endif %}
	</div>
<!-- END OF LISTS -->


<!-- copies in collections -->
	<div class="artwork-copieswrapper">
		<div class="Heading_C">Copies in collections</div>
		<!-- all the copies if any -->
		{% for x in copiesincollection['results']['bindings'] %}
			<div class="artwork-copiesincollection">
				<!-- img -->
				<div class="artwork-copiesincollection-img-div">
					{% if "image" in x %}
						<!-- <a href='/artwork?id={{ x["copiesCollections"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'> -->
							<img class="artwork-copiesincollection-imgs" src='{{ x["image"]["value"] | replace("wiki/File:","wiki/Special:Redirect/file/") }}'>
						<!-- </a> -->
						<br>
					{% else %}
						<!-- <a href='/artwork?id={{ x["copiesCollections"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'> -->
							<img class="artwork-copiesincollection-imgs" src="{{ url_for('static', filename='/imgs/Icons/placeholder_no-image2.png') }}">
						<!-- </a> -->
						<br>
					{% endif %} 
				</div>
				<!-- title/name of collection -->
				<div class="artwork-copiesincollection-title-div">
					{{ x["collectionLabel"]["value"]}}
				</div>
				
			</div>
		{% endfor %}
	</div>
<!-- end copies in collections -->

<!-- Related works -->
	<div class="artwork-relatedwrapper">
		<div class="Heading_C">Related works</div>
		<!-- all the works if any-->
		{% for x in relatedworks['results']['bindings'] %}
			<div class="artwork-relatedworks">
				<!-- image -->
				<div class="artwork-relatedworks-img-div">
					{% if "image" in x %}
						<a href='/artwork?id={{ x["relatedWorks"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
							<img class="artwork-relatedworks-imgs" src='{{ x["image"]["value"] | replace("wiki/File:","wiki/Special:Redirect/file/") }}'>
						</a>
						<br>
					{% else %}
						<a href='/artwork?id={{ x["relatedWorks"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
							<img class="artwork-relatedworks-imgs" src="{{ url_for('static', filename='/imgs/Icons/placeholder_no-image2.png') }}">
						</a>
						<br>
					{% endif %} 
				</div>
				<!-- title -->
				<div class="artwork-relatedworks-tile">
					{{ x["relatedWorksLabel"]["value"]}}
				</div>
				<!-- year -->
				<div class="artwork-relatedworks-date">
				{% if "daterelatedWorks" in x %}
					{{ x["daterelatedWorks"]["value"] | replace("T00:00:00Z", "") }}  
				{% endif %}
				</div>
			</div>
		{% endfor %}
	</div>
<!-- End related works -->

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>

<script type="text/javascript">
  var slider = tns({
    container: '.my-slider',
    items: 1,
    responsive: {
      640: {
        edgePadding: 20,
        gutter: 20,
        items: 2
      },
      700: {
        gutter: 30
      },
      900: {
        items: 1
      }
    }
  });

</script>
{% endblock content %}