<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd">
	<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
	<xsl:template match="/">
		<html xmlns="http://www.w3.org/1999/xhtml">
			<head>
				<title>
					<xsl:value-of select="/rss/channel/title"/> RSS Feed
				</title>
				<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
				<style type="text/css">
					*, ::before, ::after { box-sizing: border-box; }
					body {
					font-family: 'Inconsolata', monospace;
					font-size: 14px;
					color: #0c1824;
					background: #f1f4f7;
					line-height: 1.666666;
					padding: 15px;
					}
					a, a:link, a:visited {
					color: #f7931a;
					text-decoration: none;
					}
					a:hover {
					color: #dd7901;
					text-decoration: underline;
					}
					h1 {
					line-height: 1.25em;
					}
					h1, h2, h3, p {
					margin-top: 0;
					margin-bottom: 15px;
					}
					h2 {
					line-height: 1.25em;
					margin-bottom: 5px;
					}
					h3 {
					font-style: italic;
					}
					.container {
					max-width: 860px;
					margin: 0 auto;
					background: #fff;
					padding: 30px;
					border-radius: 4px;
					}
					.podcast-image {
					flex-shrink: 0;
					width: 160px;
					height: 160px;
					margin-left: 20px;
					}
					.podcast-image img {
					width: 160px;
					height: auto;
					border-radius: 4px;
					}
					.podcast-header {
					display: flex;
					padding-bottom: 20px;
					}
					.item {
					display: flex;
					flex-wrap: wrap;
					border-top: 1px solid #e0e4e8;
					padding: 20px 0;
					}
					.item h2 {
					width: 100%;
					flex-shrink: 0;
					}
					.item p {
					width: 100%;
					flex-shrink: 0;
					}
					.item p + br, .item p > br {
					display: none;
					}
					.item ol, .item ul {
					width: 100%;
					flex-shrink: 0;
					}
					.item .description {
					overflow: hidden;
					margin-bottom: 1em;
					overflow-y: auto;
					overscroll-behavior: contain;
					word-break: break-word;
					overflow-wrap: break-word;
					word-wrap: break-word;
					max-height: 150px;
					width:100%;
					}
					.audio-container {
					width: 100%;
					flex-shrink: 0;
					}
					audio {
					width: 100%;
					border-radius: 4px;
					}
					audio:focus {
					outline: none;
					}
					.episode-time {
					width: 100%;
					flex-shrink: 0;
					font-size: 12px;
					color: #545d67;
					margin-bottom: 1em;
					}
					@media only screen and (max-device-width: 768px) {
					.audio-container {
					min-height: 120px;
					}
					}
				</style>
			</head>
			<body>
				<div class="container">
					<div class="podcast-header">
						<hgroup>
							<h1>
								<xsl:value-of select="/rss/channel/title"/>
							</h1>
							<p>
								<xsl:value-of select="/rss/channel/description"/>
							</p>
							<xsl:if test="/rss/channel/link">
								<p>
									<a>
										<xsl:attribute name="href">
											<xsl:value-of select="/rss/channel/link"/>
										</xsl:attribute>
										<xsl:attribute name="target">_blank</xsl:attribute>
										Einundzwanzig Website &#x2192;
									</a>
								</p>
							</xsl:if>
						</hgroup>
						<xsl:if test="/rss/channel/image">
							<div class="podcast-image">
								<a>
									<xsl:attribute name="href">
										<xsl:value-of select="/rss/channel/image/link"/>
									</xsl:attribute>
									<img>
										<xsl:attribute name="src">
											<xsl:value-of select="/rss/channel/image/url"/>
										</xsl:attribute>
										<xsl:attribute name="title">
											<xsl:value-of select="/rss/channel/image/title"/>
										</xsl:attribute>
									</img>
								</a>
							</div>
						</xsl:if>
					</div>
					<xsl:for-each select="/rss/channel/item">
						<div class="item">
							<h2>
								<a>
									<xsl:attribute name="href">
										<xsl:value-of select="link"/>
									</xsl:attribute>
									<xsl:attribute name="target">_blank</xsl:attribute>
									<xsl:value-of select="title"/>
								</a>
							</h2>
							<div class="episode-time">
								<span>
									<xsl:value-of select="pubDate"/>
								</span> &#x02022;
								<span>
									<xsl:value-of select="itunes:duration" />
								</span>
							</div>
							<xsl:choose>
								<xsl:when test="description">
									<div class="description">
										<xsl:value-of select="description" disable-output-escaping="yes"/>
									</div>
								</xsl:when>
								<xsl:otherwise>
								</xsl:otherwise>
							</xsl:choose>
							<div class="audio-container">
								<audio controls="true" preload="none">
									<xsl:attribute name="src">
										<xsl:value-of select="enclosure/@url"/>
									</xsl:attribute>
								</audio>
							</div>
						</div>
					</xsl:for-each>
				</div>
			</body>
		</html>
	</xsl:template>
</xsl:stylesheet>
