{% 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 active">ABOUT THIS WORK</div>
			<div class="artwork-nav-label">RELATIONSHIPS</div>
			<div class="artwork-nav-label">LISTS</div>
			<div class="artwork-nav-label"><a href="">DETAILED RECORD</a></div>
		</div>
	</div>

<!-- The content in 3 divs displayed or not (detailed revord is out)-->

	<!-- about or relationships or lists or detailed record -->
	<div class="artwork-about">
		<!-- left -->
		<div class="artwork-leftcolumn">
				<!-- img - I am unsure how to handle the thing to go through the different pictures -->
				<div class="artwork-about-img">
					{% for x in artworkimages['results']['bindings'] %}
					{% if loop.index <= 1 %}
						{% if "image" in x %}
							<img class="artwork-about-imgs" src='{{ x["image"]["value"] | replace("wiki/File:","wiki/Special:Redirect/file/") }}'>
						{% else %}
							<img class="artwork-about-imgs" src="{{ url_for('static', filename='/imgs/Icons/placeholder_no-image2.png') }}">
						{% endif %}
					{% endif %}
					{% endfor %}
				</div>
				<!-- other stuff like downloads, absent for now -->
				<div></div>
		</div>

		<!-- right
		<div class="artwork-rightcolumn">  -->
			<!-- contributors / date / publishers -->
	
				<!-- contributors -->
				<div class="artwork-rightcolumn-top-contributors">
						<span class="label-item">CONTRIBUTORS</span>
						{% 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>
							</div>
							<!-- role/function -->
							<div>
								<span>{{ x['role']['value'] }}</span>
							</div>
						{% endfor %}
				</div>
				<!-- date -->
				<div class="artwork-rightcolumn-top-date">
						<span class="label-item">DATE</span>
							<!-- loops through dates -->
							{% for x in artworkdate['results']['bindings'] %}
							<!-- date -->
								{% if 'date' in x %}
								<div>{{ x['date']['value'] | replace("T00:00:00Z", "") }}</div>
								{% else %}
								but <div>information not available</div>
								{% endif %}
								
							<!-- extra info if available -->
								{% if 'sourceLabel' in x %}
								<div>Source: {{ x['sourceLabel']['value'] }}</div>
								{% endif %}
							{% endfor %}

				<!-- publishers removed div .artwork-rightcolumn-top-publishers-->

						<span class="label-item">PUBLISHERS</span>
						<!-- loop through publishers -->
						{% for x in artworkpublisher['results']['bindings'] %}
							<!-- name, surname -->
							<div class="metadata-link artwork-rightcolumn-top-publishers-item">
							{% if 'publishersLabel' in x %}
								<a href=""><span>{{ x['publishersLabel']['value'] }}</span></a>
							{% else %}
								<span>information not available</span>
							{% endif %}
							<!-- role -->
							{% if 'role' in x %}
								<span>{{ x['role']['value'] }}</span>
							{% endif %}
							<div>
						{% endfor %}
				</div>
				</div>
				</div>
			<div class="artwork-about-bottom">
				<!-- description -->
				<div></div>
				<!-- exhibition and distribution history -->
				<div></div>
				<!-- </div> end of right column -->

				<!-- relationships -->
				<div></div>
				<!-- lists -->
				<div></div>
			</div>
<!-- end of about -->
	</div>
<!-- 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>

<!-- 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>

</div>

{% endblock content %}