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


<div>

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

		<!-- NAVIGATION HERE? -->
		<div class="artwork-nav">
			<div class="artwork-nav-label artwork-nav-label-about active">ABOUT</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:{{ copy_id }}">DETAILED RECORD</a></div>
		</div>
	</div>





<!-- ########################### -->
<!-- BLOCK IMAGE/DATA AND DESCRIPTION -->
<!-- ############################ -->
<div class="artwork-about">


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

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

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

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

						{% endif %}
					</div>
					<!-- END IMAGES -->
		</div>
<!-- end of left column, which has only images actually -->






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

<!-- ##################### -->
<!-- RIGHT TOP : DATA SECTION SECTION -->
<!-- ##################### -->
<div class="artwork-rightcolumn-top">

<!-- ALL DATA-->
<div class="artwork-rightcolumn-top-contributors">

<!-- copy of -->
<p class="label-item">COPY OF</p>
{% if copyof['results']['bindings']==[] %}
							<div>information not available</div>
						{% else %}
							{% for x in copyof['results']['bindings'] %}
							<div class="metadata-link">
								<a target="_blank" href="{{ x['work']['value'] }}">
									<span>{{ x['workLabel']['value'] }}</span>
								</a>
							
							</div>
						{% endfor %}
						{% endif %}
<!-- end copy of -->

<!-- collection -->
<p class="label-item">COLLECTION</p>
{% if copycollection['results']['bindings']==[] %}
							<div>information not available</div>
						{% else %}
							{% for x in copycollection['results']['bindings'] %}
							<div class="metadata-link">
								<a target="_blank" href="{{ x['collection']['value'] }}">
									<span>{{ x['collectionLabel']['value'] }}</span>
								</a>
							
							</div>
						{% endfor %}
						{% endif %}


<!-- end collection -->


<!-- official website -->
<p class="label-item">INVENTORY NUMBER</p>
{% if copyinventorynumber['results']['bindings']==[] %}
							<div>information not available</div>
						{% else %}
						<!-- else loop through available data -->
						{% for x in copyinventorynumber['results']['bindings'] %}
									<span>#{{ x['inventoryNumber']['value'] }}</span>
						{% endfor %}
						{% endif %}
<!-- end official website -->

</div>
<!-- END PF ALL DATA -->



</div>




<!-- ##################### -->
<!-- RIGHT BOTTOM : BIO/DESCRIPTION SECTION -->
<!-- ##################### -->

<!-- DESCRIPTION -->

				
<div class="des-exh-section">
				<p class="label-item des">DESCRIPTION</p>
				{% if copydescription['results']['bindings']==[] %}
				<p>information not available</p>
				{% else %}

				<!-- For loop -->
				{% for x in copydescription['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>
				</div>
				{% endfor %}
				{% endif %}

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



<!-- ##################### -->
<!-- END OF RIGHT BOTTOM  -->
<!-- ##################### -->


</div>
<!-- END OF RIGHT COLUMN -->


</div>
<!-- ########################### -->
<!-- END OF BLOCK IMAGE/DATA AND DESCRIPTION -->
<!-- ############################ -->




</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: 1
      },
      700: {
        gutter: 30
      },
      900: {
        items: 1
      }
    }
  });

</script>

{% endblock content %}