<table class="podlove-global-contributors">
	{% if option.title %}
		<thead>
			<tr>
				<th colspan="2">{{ option.title }}</th>
			</tr>
		</thead>
	{% endif %}
	<tbody>
		{% for contributor in podcast.contributors %}
			{% if contributor.visible %}
				<tr>
					<td rowspan="2" class="avatar-cell" width="60">
						{{ contributor.image.html({width: 60, height: 60, class: "avatar avatar-" ~ size ~  " photo", alt: "avatar" }) }}
					</td>
					<td class="social-cell">
						<strong class="contributor-name">{{ contributor.name }}</strong>
						<div class="social-icons">
							{% for service in contributor.socialServices %}
								<a target="_blank" title="{{ service.title }}" href="{{ service.profileUrl }}">
									{{
										service.image.html({
											width: 32, 
											class: "podlove-contributor-button",
											alt: service.title ~ " Icon"
										}) 
									}}
								</a>
							{% endfor %}
						</div>
					</td>
				</tr>
				<tr class="episode-row">
					<td class="episodes-cell">
						<ul>
						{% for episode in contributor.episodes %}
							<li>
								<a href="{{ episode.url }}">{{ episode.title }}</a>
							</li>
						{% endfor %}
						</ul>
					</td>
				</tr>
			{% endif %}
		{% endfor %}
	</tbody>
</table>

<script type="text/javascript">
(function ($) {
	$(document).ready(function() {
		$(".podlove-global-contributors .episodes-cell").each(function() {
			var items = $("li", this);


			if (items.length > 5) {
				$("li:gt(4)", this).hide();
				$('<span class="show-all-episodes"><a href="#">… show all episodes</a><span>').insertAfter($("ul", this));
			}
		});

		$(".podlove-global-contributors").on("click", ".show-all-episodes a", function(e) {
			e.preventDefault();

			$(this).closest(".episodes-cell")
				.find("li").show().end()
				.find(".show-all-episodes").hide();
		});
	});
}(jQuery));
</script>

<style type="text/css">
.podlove-global-contributors td {
	vertical-align: top;
	line-height: 1.3em;
}

.podlove-global-contributors .avatar-cell {
	max-width: 100px;
	text-align: center;
}

.podlove-global-contributors td {
	border-top-width: 0px;
}

.podlove-global-contributors .episode-row {
	/*margin-bottom: 10px;*/
}

.podlove-global-contributors td ul {
	margin: 0;
}

.podlove-global-contributors .social-cell li {
	margin: 0;
}

.podlove-global-contributors .episodes-cell {
	padding-top: 0px;
}

.podlove-global-contributors .episodes-cell li {
	display: inline-block;
	margin: 0;
}

.podlove-global-contributors .episodes-cell li a {
	background: #eee;
	padding: 2px 10px;
	line-height: 170%;
	border-radius: 10px;
}

</style>