activities.pug

extends ../layouts/default

mixin activity(activity)
		.col-xs-6.col-sm-3.col-md-3.col-lg-3(data-ks-editable=editable(user, { list: 'Activity', id: activity.id }))
			a.thumbnail(href='/activities/activity/' + activity.slug, class=activity.featured ? 'featured' : '')
				img(src=activity._.keyImage.fill(300,160, {gravity:'center'}) alt=activity.title).img-responsive
				.caption
					h4= activity.title
					p.description
						if activity.subtitle
							= activity.subtitle
							|
						if activity.place
							| @
							= activity.place
						//if activity.location
							| ,
							= activity.location
					p.date
						if activity.date
							= activity._.date.format('MMM Do YYYY')

mixin activity-packery(activity)
	if activity.featured
		//.col-xs-12.col-sm-6.col-md-6.col-lg-4
		.item.x2(data-ks-editable=editable(user, { list: 'Activity', id: activity.id }))
			a.thumbnail(href='/activities/activity/' + activity.slug)
				img(src=activity._.keyImage.fill(400,370, {gravity:'center'}) alt=activity.title).img-responsive
				.caption
					h4= activity.title
					p.description
						if activity.subtitle
							= activity.subtitle
							|
						if activity.place
							| @
							= activity.place
						//if activity.location
							| ,
							= activity.location
					p.date
						if activity.date
							= activity._.date.format('MMM Do YYYY')
	else
		//.col-xs-6.col-sm-3.col-md-3.col-lg-2
		.item(data-ks-editable=editable(user, { list: 'Activity', id: activity.id }))
			a.thumbnail(href='/activities/activity/' + activity.slug)
				img(src=activity._.keyImage.fill(200,110, {gravity:'center'}) alt=activity.title).img-responsive
				.caption
					h4= activity.title
					p.description
						if activity.subtitle
							= activity.subtitle
							|
						if activity.place
							| @
							= activity.place
						//if activity.location
							| ,
							= activity.location
					p.date
						if activity.date
							= activity._.date.format('MMM Do YYYY')


mixin activity-media(activity)
	.media(data-ks-editable=editable(user, { list: 'Activity', id: activity.id }))
		a.media-left(href='/activities/activity/' + activity.slug)
			img(src=activity._.keyImage.fill(100,100) alt=activity.title).img-responsive
		.media-body
			h4.media-heading= activity.title
			p= activity.category.name

block title
	title André Knörig — Activities

block intro
	//.container.intro
		h1 What I'm up to.

block content

	.container: .row
		ul.nav.nav-tabs
			li(class=!data.category ? 'active' : '')
				a(href='/activities') All
			each cat in data.categories
				li(class=data.category && data.category.id == cat.id ? 'active' : '')
					a(href='/activities/' + cat.key)= cat.name


	.container: .row: .col-xs-12

		if filters.category && !data.category
			h3.text-muted Invalid Category.
		else
			if data.activities.results.length
				.activities
					each activity in data.activities.results
						+activity(activity)

				if data.activities.totalPages > 1
					.clearfix
					.pagination-frame
						ul.pagination
							if data.activities.previous
								li: a(href='?page=' + data.activities.previous) ←
							else
								li.disabled: a(href='?page=' + 1) ←
							each p, i in data.activities.pages
								li(class=data.activities.currentPage == p ? 'active' : null)
									a(href='?page=' + (p == '...' ? (i ? data.activities.totalPages : 1) : p ))= p
							if data.activities.next
								li: a(href='?page=' + data.activities.next) →
							else
								li.disabled: a(href='?page=' + data.activities.totalPages) →
			else
				if data.category
					h3.text-muted There are no activities in the category #{data.category.name}.
				else
					h3.text-muted There are no activities yet.

	#activities-map

block js
	script(src='/js/lib/underscore-min.js')
	script(src='https://maps.googleapis.com/maps/api/js?key=' + mapsApiKey)
	script.
		var activityMarkers = !{JSON.stringify(data.markers)};
		var MY_MAPTYPE_ID = 'custom_style';

		function initialize() {

			var mapOptions = {
				center: new google.maps.LatLng(52.51, 13.39),
				zoom: 3,
				disableDefaultUI: true,
			    mapTypeControlOptions: {
			      mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
			    },
			    mapTypeId: MY_MAPTYPE_ID
			};

			var featureOptions = [
				{
				  stylers: [
				    { hue: '#e6e4de' },
				    { visibility: 'simplified' },
				    { gamma: 1.0 },
				    { weight: 1.0 }
				  ]
				},
				{
				  elementType: 'labels',
				  stylers: [
				    { visibility: 'off' }
				  ]
				},
				{
				  featureType: 'water',
				  stylers: [
				    { color: '#e6e4de' }
				  ]
				}
			];


			var map = new google.maps.Map(document.getElementById("activities-map"),
				mapOptions);

			var styledMapOptions = {
				name: 'Custom Style'
			};

			var customMapType = new google.maps.StyledMapType(featureOptions, styledMapOptions);

			map.mapTypes.set(MY_MAPTYPE_ID, customMapType);

			_.each(activityMarkers, function(activity) {
				var marker = new google.maps.Marker({
					position: new google.maps.LatLng(activity.geo[1], activity.geo[0]),
					map: map,
					title: activity.title,
					icon: '/images/marker.svg'
				});

				var infowindow = new google.maps.InfoWindow({
					content: '<div id="marker">'+
				      '<h5><a href="/activities/activity/' + activity.slug + '">' + activity.title + '</a></h5>'+
				      '<p>'+ activity.description +
				      '</p>'+
				      '</div>'
				});
				google.maps.event.addListener(marker, 'click', function() {
					infowindow.open(map, marker);
				});
			});
		}

		google.maps.event.addDomListener(window, 'load', initialize);