{% 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 Artist's Books and publications</p>


	<div id="wrapper-bt-vid">
		<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_update.mp4') }}" type="video/mp4">
			</video>
		</div>
	</div>

</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 %}