{% extends 'D2CollectionBundle::base.html.twig' %}

{% set seo_img_path = "/uploads/collections/" ~ collection.customer.id ~ "/" ~ collection.getBestPath %}

{% if social_shares|length > 0 %}
	{% set built_snippets = d2_build_snippets(social_shares, route_url, collection.title, collection.subTitle, seo_img_path, collection.hashTag, collection.shareTag) %}
{% endif %}

{% block title %}
	<title>Migration:Cities Collection: {{ collection.title }}</title>
{% endblock title %}
{% block head_seo %}
	{% set tag_list = d2_get_tag_list(collection) %}
	<meta content="index,follow" name="robots">
	<meta content="Collection: {{ collection.title }}" name="description">
	<meta content="migration:cities,collection,{{ tag_list }}" name="keywords">
	<meta content="never" http-equiv="expires">

	{{ built_snippets['meta_data']| raw }}
{% endblock head_seo %}

{% block head_script_extra %}
	<script type="text/javascript" src="{{ asset('bundles/d2collection/js/collection.js') }}"></script>
	<script type="text/javascript" src="{{ asset('bundles/d2comment/js/comments.js') }}"></script>
	<script type="text/javascript" src="{{ asset('bundles/d2core/js/utils.js') }}"></script>

	{{ built_snippets['script']| raw }}
{% endblock head_script_extra %}

{% block head_style_extra %}
 	<link href="{{ asset('bundles/d2core/css/olay.css') }}" rel="stylesheet">
 	<link href="{{ asset('bundles/d2core/css/select_add.css') }}" rel="stylesheet">
 	<link href="{{ asset('bundles/d2core/css/carousel_add.css') }}" rel="stylesheet">
{% endblock head_style_extra %}

{% block page_header %}
{% endblock page_header %}

{% block content %}
{% if collection.photos|length > 0 %}
<div id="slide_show_div" class="row" style="display:none">
	<div class="col-md-offset-1 col-md-10">
		<hr/>
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				{% for photo in collection.photos %}
				{% if photo.enabled == true %}
					<li data-target="#carousel-example-generic" data-slide-to="{{ loop.index }}"</li>
				{% endif %}
				{% endfor %}
			</ol>

			<!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox" >
				<div class="item active">
					<img src="/uploads/collections/{{ collection.customer.id }}/{{ collection.getBestPath }}" alt="IMAGE" style="height:400px">
					<div class="carousel-caption">
						{{ collection.title }}
					</div>
				</div>
				{% for photo in collection.photos %}
				{% if photo.enabled == true %}
				<div class="item">
					<img src="/uploads/collections/{{ photo.collection.customer.id }}/{{ photo.getBestPath }}" alt="IMAGE" style="height:400px">
					<div class="carousel-caption">
						{{ photo.title }}
					</div>
				</div>
				{% endif %}
				{% endfor %}
			</div>
		</div>	
	</div>
</div>

<div id="show_image_div" class="row" style="display:none">
	<div class="col-md-offset-1 col-md-10">
		<a title="Hide Image" href="javascript:HideCollectionImage()"><img id="full_image" src="" alt="COLLECTION" class="img-responsive" /></a>
	</div>
</div>

<div id="thumbnail_div" class="row" style="display:none">
	<div class="col-md-offset-1 col-md-10">
		<hr/>
		{% for photo in collection.photos %}
			{% if photo.enabled == true %}
				{% if loop.first %}
					<div class="row">
				{% endif %}
						<div class="col-md-2">
							<a title="Show Image" href="javascript:ShowCollectionImage('/uploads/collections/{{ photo.collection.customer.id }}/{{ photo.getPath }}')"><img src="/uploads/collections/{{ photo.collection.customer.id }}/{{ photo.getBestPath }}" alt="COLLECTION" class="img-responsive img-thumbnail" width="100%" /></a>
						</div>
				{% if not loop.first and loop.index%5 == 0 %}
					</div>
					<div class="row">
				{% endif %}
			{% endif %}
		{% endfor %}
				</div>
	</div>
</div>
{% endif %}

<div class="row">
	<div class="col-md-7">
		<div class="row">
 		    <hr/>
			<div class="col-md-offset-1 col-md-4">
				<img src="/uploads/collections/{{ collection.customer.id }}/{{ collection.getBestPath }}" alt="RESOURCE" class="img-responsive" width="100%" />
			</div>
			<div class="col-md-6">
				<h3>{{ collection.title }}</h3>
				<h4>{{ collection.subTitle }}</h4>
				<p style="font-size:16px">{{ collection.description }}</p>
				<p>This Collection has been viewed {{ collection.viewCnt }} times.</p>
				{% if collection.photos|length > 0 %}
					<a id="collection_{{ collection.id }}" class="view_collection_btn btn btn-default" href="javascript:ToggeleSlideShow()" role="button">VIEW SLIDE SHOW</a>
					<a id="thumbs_{{ collection.id }}" class="view_thumbs_btn btn btn-default" href="javascript:ToggeleThumbs()" role="button">VIEW THUMBNAILS</a>
				{% else %}
					<a id="collection_{{ collection.id }}" class="view_collection_btn btn btn-default" target="blank" href="/uploads/collections/{{ collection.customer.id }}/{{ collection.getBestPath }}" role="button">VIEW</a>
				{% endif %}
				{{ built_snippets['html']| raw }}
			</div>
		</div>
		{% if collection.customer is not null %}
		{% set customer = collection.customer %}
		<div class="row">
			<hr/>
			<div class="col-md-offset-1 col-md-2">
				{% if customer.path %}
				<img src="/uploads/customer/images/{{ customer.getBestPath }}" width="140px" alt="CONTRIBUTOR" class="img-responsive img-rounded">
				{% else %}
				<img src="{{ asset('bundles/d2core/images/user.png') }}" width="140px" alt="EXPERT" class="img-responsive img-rounded">
				{% endif %}
			</div>
			<div class="col-md-8">
				<h3>{{ customer.displayName }}</h3>
				<p>
				{{ customer.description }}
				</p>
			</div>
		</div>
		{% endif %}
		
		{# COMMENTS #}
		{% include 'D2CommentBundle::comments.html.twig' with {'comments_name': 'Collection', 'comment_item_type': 'collection', 'comment_item_id': collection.id} %}
	</div>
	
	<div class="col-md-5">
		{# RELATED VIDEO's #}
		{% include 'D2CaseStudiesBundle::related.html.twig' with {'exclude_related': false} %}

		{# RELATED EXPERT'S #}
		{% include 'D2ExpertBundle::related.html.twig' with {'exclude_related': false} %}
		
		{# RELATED RESOURCE's #}
		{% include 'D2ResourceBundle::related.html.twig' with {'exclude_related': false} %}
		
		{# RELATED COLLECTIONS #}
		{% include 'D2CollectionBundle::related.html.twig' with {'exclude_related': collection.id} %}
		
		{# RELATED NEWS #}
		{% include 'D2NewsBundle::related.html.twig' with {'exclude_related': false} %}

{#		
		<h2 style="margin-top:50px">View more Collections</h2>
		<div class="row" style="margin-top:30px">
			<div class="col-md-11">
				<p>View our other contributors Collections.</p>
				<a class="btn btn-default" href="{{ path('collections') }}" role="button">Collections</a>
			</div>	
		</div>	
		<hr/>
#}
	</div>

</div>

{% endblock content %}