download_template.vm

<div class="download-section $article_class.getData()">
	#if (!$heading.getData().isEmpty())
		<h4>
			#if (!$product_icon.getData().isEmpty())
				<span class="product-icon">$product_icon.getData()</span>
			#end

			$heading.getData()
		</h4>
	#end

	<div class="download">
		#if (!$download_groups.getSiblings().isEmpty())
			<select id="downloadSelect${reserved-article-id.data}" onchange="AUI().one('#download${reserved-article-id.data}').attr('href', this.value)">
				#foreach ($download_group in $download_groups.getSiblings())
					<optgroup label="$download_group.getData()">
						#foreach ($download in $download_group.downloads.getSiblings())
							<option value="$download.link.getData()">$download.getData()</option>
						#end
					</optgroup>
				#end
			</select>
		#end

		<div class="button-group">
			<a class="release-notes" href="$release_notes_link.getData()">Release Notes</a>

			<a class="btn download-btn style-b" href="$download_groups.downloads.link.getData()" id="download${reserved-article-id.data}">#language('download')</a>
		</div>
	</div>

	#if ($download_details.detail.getData() != "" || $included_tickets.title.getData() != "")
		<div class="details-section" id="detailsSection${reserved-article-id.data}">
			<a class="class-toggle" data-target-node="#detailsSection${reserved-article-id.data}" href="javascript:;">#language("details")</a>

			<div class="details toggle-content">
				#if ($download_details.detail.getData() != "")
					<div class="download-info details">
						#foreach ($download_detail in $download_details.detail.getSiblings())
							<dl>
								<dt title="$download_detail.getData()">
									$download_detail.getData():
								</dt>
								<dd>
									$download_detail.value.getData()
								</dd>
							</dl>
						#end
					</div>
				#end

				#if ($included_tickets.title.getData() != "")
					<div class="download-info blue-box">
						<h4>Security Fixes Included:</h4>

						<div class="content">
							<ul class="unstyled-list">
								#foreach ($ticket in $included_tickets.title.getSiblings())
									<li>
										<a href="$ticket.link_url.getData()">$ticket.getData()</a>
									</li>
								#end
							</ul>

							<p>
								For installation instructions please refer to the following Knowledge Base article:
							</p>

							<a href="/group/customer/knowledge/kb/-/knowledge_base/article/14991389">Applying Fix Packs to Liferay Digital Experience Platform</a>
						</div>
					</div>
				#end
			</div>
		</div>
	#end
</div>
<style type="text/css">
	.blue-box {
		border: 2px solid #0E4681;
		clear: both;
	}

	.blue-box > h4 {
		background: #0E4681;
		color: #FFF;
		margin: 0;
		padding-left: 0.5em;
	}

	.details-section.class-toggle-active .toggle-content {
		max-height: 500px;
	}

	.details-section .class-toggle:before {
		content: '+';
		margin-right: 4px;
	}

	.details-section.class-toggle-active .class-toggle:before {
		content: '-';
	}

	.details-section dd, .details-section dl, .details-section dt {
		display: inline-block;
	}

	.details-section dt {
		font-weight: bold;
	}

	.details-section dl {
		margin: 0;
		width: 40%;
	}

	.details-section .toggle-content {
		max-height: 0;
		overflow: hidden;
		transition: max-height 1s;
	}

	.download-info {
		margin-top: 1em;
	}

	.download-info.details {
		background: #EFEFEF;
		padding: 0.5em;
	}

	.download-info .content {
		box-sizing: border-box;
		padding: 0.5em;
	}

	.download-section a:not(.download-btn) {
		color: #0E4681;
		text-decoration: none;
	}

	.download-section a:not(.download-btn):hover {
		color: #EF8131;
	}

	.download-section.border-bottom {
		border-bottom: 1px solid #CCC;
	}

	.download-section .button-group {
		float: right;
	}

	.download-section .button-group .download-btn {
		vertical-align: middle;
	}

	.download-section, .download-section .download {
		padding: 0.5em 0;
	}

	.download-section .download select {
		background: #FFF;
		width: 200px;
	}

	.download-section.eula-download .download {
		margin-bottom: 0.5em;
	}

	.eula-checkbox input {
		vertical-align: baseline;
	}

	.product-icon svg, .product-icon img {
		height: 35px;
		margin-right: 0.5em;
		vertical-align: bottom;
	}

	.release-notes, .learn-more {
		margin-right: 1em;
	}

	.unstyled-list {
		list-style: none;
		padding: 0;
	}

	@media all and (max-width: 768px) {
		.details-section dl {
			width: 100%;
		}

		.download-section > h4 {
			text-align: center;
		}

		.download-section .button-group {
			float: none;
			text-align: center;
		}

		.download-section .button-group a {
			display: block;
			margin: 0.5em 0;
		}

		.download-section .download select {
			width: 100%;
		}

		.product-icon {
			display: block;
		}

		.product-icon img, .product-icon svg {
			height: 50px;
		}
	}
</style>