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

<!-- BANNER -->

<!-- 
* It needs a place holder for video (I think Lozana will send it)
* It needs the two buttons (see zines + other thing). You can put empty a hrefs and I will add the hyperlink after.
* I have retrieved an array from the last images added (3 currently). 
  - If you need more images tell me and I will modify the python script, this would be super easy 
  - Feel free to add the classs/ids of your choice. 
  - I was unsure also if you needed each image to have a different class but I have improvised something to do so. Once the app is serving you can see 3 different classes : banner-image-0, banner-image-1, banner-image-2
 -->

<div id="home-top-div">

	<!-- LOOP TO GET THE IMAGES  -->
	{% set count = namespace(value=0) %}
	{% for img in ImagesBanner %}
		<img class="banner-image-{{ count.value }}" src='{{ img | replace("wiki/File:","wiki/Special:Redirect/file/") }}'>
		{% set count.value = count.value + 1 %}
	{% endfor %}
	<!-- END LOOPS IMAGES -->


	<p class="heading_A">The Digital Archive of Artists' Publishing is an interactive, user-driven, searchable database of artists' books and publications.</p>


		<div id="wrapper-bt">
			<a id="wrapper-top-buttons" class="primary-button" href="{{ url_for('zinesindex') }}">SEE EXAMPLE SEARCH FOR ZINES</a>
			<a id="wrapper-top-buttons" class="secondary-button" href="{{ url_for('casestudy') }}">CAROLEE SCHNEEMANN CASE STUDY</a>
		</div>
<!-- 		<div id="wrapper-vid">
			<video preload="meta" autoplay="" loop="">
				 <source src="{{ url_for('static', filename='/vid/DAAP_video_reduced.mp4') }}" type="video/mp4">
			</video>
			<p>
				<a class="metadata-link" target="_blank" href="http://query.daap.bannerrepeater.org/embed.html#%23defaultView%3AGraph%0ASELECT%20%3Fwork%20%3FworkLabel%20%3Fimage_on_Commons%20%3Fplace_of_publication%20%3Fplace_of_publicationLabel%20%3Fcreator_of%20%3Fcreator_ofLabel%20WHERE%20%7B%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22%5BAUTO_LANGUAGE%5D%2Cen%22.%20%7D%0A%20%20%3Fwork%20wdt%3AP9%20wd%3AQ421.%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP31%20%3Fimage_on_Commons.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP12%20%3Fplace_of_publication.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP9%20%3Fcreator_of.%20%7D%0A%7D%0ALIMIT%20100">See Live Data Visualization</a>
			</p>
		</div> -->
</div>

<div class="scroll-down"><span>Scroll Down</span></div>

<!--  PUBLICATIONS -->

<div id="home-recently-added-works">
	<div class="pagetitle" id="home-recent-title">RECENTLY ADDED WORKS</div>

	<div id="home-recent-grid">

<!-- LOOP TO GET LAST ADDED ITEMS -->
	{% for x in results['results']['bindings']%}
	<!-- FOR EACH ITEM EXTRACT IMG, URL AND TITLE + DATE -->
	<div class="home-recent-items">	
		<div class="home-recent-items-top">
		{% if "image" in x %}
			<a href='/artwork?id={{ x["work"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
				<img class="home-recent-imgs" src='{{ x["image"]["value"] | replace("wiki/File:","wiki/Special:Redirect/file/") }}'>
			</a> <br>
		{% else %}
			<a href='/artwork?id={{ x["work"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
				<img class="home-recent-imgs" src="{{ url_for('static', filename='/imgs/Icons/placeholder_no-image2.png') }}"><br>
			</a>
		{% endif %} 
		</div>

		<div class="home-recent-items-bottom">
			<a class="title" href='/artwork?id={{ x["work"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
				{{ x["workLabel"]["value"]}}
			</a> <br>
			<span class="date">
			{% if "date" in x %}
				{{ x["date"]["value"] | replace("T00:00:00Z", "") }}  
			</span>

		{% endif %}
		</div>

	</div>
	{% endfor %}
<!-- END LOOP -->

	</div>

	<div class="home-show-wrapper"><a href="{{ url_for('browsethearchive') }}" class="home-show primary-button">BROWSE THE FULL ARCHIVE</a></div>

</div>

<!-- 


post_wrap =
home-recent-grid

pst = 
home-recent-items

 -->

<script type="text/javascript">
	$ShowHideMore = $('#home-recent-grid');
$ShowHideMore.each(function() {
    var $times = $(this).children('.home-recent-items');
    if ($times.length > 13) {
        $ShowHideMore.children(':nth-of-type(n+13)').addClass('moreShown').hide();
        $(this).find('span.home-show').addClass('more-times').html('SHOW MORE');
    }
});

$(document).on('click', '#home-recent-grid > span', function() {
  var that = $(this);
  var thisParent = that.closest('#home-recent-grid');
  if (that.hasClass('more-times')) {
    thisParent.find('.moreShown').show();
    that.toggleClass('more-times', 'less-times').html('SHOW LESS');
  } else {
    thisParent.find('.moreShown').hide();
    that.toggleClass('more-times', 'less-times').html('SHOW MORE');
  }  
});


</script>


{% endblock content %}