{% set colspan = 2 %}
{% if avatars == "yes"   %}
	{% set colspan = colspan + 1 %}
{% endif %}
{% if groups == "yes"    %}
	{% set colspan = colspan + 1 %}
{% endif %}
{% if roles == "yes"     %}
	{% set colspan = colspan + 1 %}
{% endif %}
{% if donations == "yes" %}
	{% set colspan = colspan + 1 %}
{% endif %}

{% if is_feed() %}

	<ul>
		{% for contributor in episode.contributors({group: option.group, role: option.role}) %}
			{% if contributor.visible %}
				<li>
					<strong>{{ contributor.name }}</strong>
					{% if contributor.comment %}({{ contributor.comment }})
					{% endif %}
					<ul>
						{% for service in contributor.services({category: "social"}) %}
							<li>
								<a href="{{ service.profileUrl }}">{{ service.title }}</a>
							</li>
						{% endfor %}
						{% if option.donations == "yes" %}
							{% for service in contributor.services({category: "donation"}) %}
								<li>
									<a href="{{ service.profileUrl }}">{{ service.title }}</a>
								</li>
							{% endfor %}
						{% endif %}
					</ul>
				</li>
			{% endif %}
		{% endfor %}
	</ul>

{% else %}

	<div class="podlove-contributors-cards">
		{% for contributor in episode.contributors({group: option.group, role: option.role}) %}
			{% if contributor.visible %}

				<div class="podlove-contributors-card">
					<div class="podlove-contributors-card-inner">
						<div class="podlove-contributors-card-avatar">
							{{ contributor.image.html({width: size|default(50), height: size|default(50), class: "", alt: "avatar" }) }}
						</div>
						<div class="podlove-contributors-card-person">
							<div style="align-self: center">
								<div style="font-weight: 400;">{{ contributor.name }}</div>
								{% if contributor.comment %}
									<div class="podlove-contributors-card-person-details">
										<span>{{ contributor.comment }}</span>
									</div>
								{% endif %}
							</div>
							<div class="podlove-contributors-card-services">
								{% for service in contributor.services({category: "social"}) %}
									<a class="podlove-contributors-card-services-service" target="_blank" title="{{ service.title }}" href="{{ service.profileUrl }}">
										{{
												service.image.html({
													width: 20, 
													class: "",
													alt: service.title ~ " Icon"
												}) 
											}}
									</a>
								{% endfor %}
								{% if option.donations == "yes" %}
									{% for service in contributor.services({category: "donation"}) %}
										<a class="podlove-contributors-card-services-service" target="_blank" title="{{ service.title }}" href="{{ service.profileUrl }}">
											{{
													service.image.html({
														width: 20, 
														class: "",
														alt: service.title ~ " Icon"
													}) 
												}}
										</a>
									{% endfor %}
								{% endif %}
							</div>
						</div>
					</div>
				</div>

			{% endif %}
		{% endfor %}
	</div>

	<style>
		.podlove-contributors-cards {
			margin-bottom: 1rem;
			background: white;
			overflow: hidden;
			border-radius: 0.375rem;
			box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
		}
		.podlove-contributors-card {
			display: flex;
			align-items: center;
			padding: 1rem 1.5rem
		}
		.podlove-contributors-card-inner {
			display: flex;
			align-items: center;
			flex: 1 1 0;
			min-width: 0;
		}
		.podlove-contributors-card-avatar {
			width: 50px;
			height: 50px;
			border-radius: 0.25rem;
			overflow: hidden;
			flex-shrink: 0;
		}
		.podlove-contributors-card-person {
			flex: 1 1 0;
			min-width: 0;
			padding: 0 1rem;
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 1rem;
		}
		.podlove-contributors-card-person-details {
			color: #999
		}
		.podlove-contributors-card-services {
			flex-wrap: wrap;
			display: flex;
			align-items: center;
			align-content: center;
			justify-content: flex-end;
		}
		.podlove-contributors-card-services-service {
			display: inline-block;
			flex-shrink: 0;
			padding-left: 0.5rem;
			text-decoration: none;
			box-shadow: none;
		}
	</style>

{% endif %}