lms/approot/tracks.xml

<?xml version="1.0" encoding="UTF-8" ?>
<messages xmlns:if="Wt.WTemplate.conditions">
<!--FORMS message blocks-->

<message id="Lms.Explore.Tracks.template">
	<div class="d-flex justify-content-between align-items-start mb-3">
		<div class="btn-group me-1">
			${play-btn class="btn btn-primary"}
			<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"/>
			<ul class="dropdown-menu">
				<li>${play-next class="dropdown-item"}</li>
				<li>${play-last class="dropdown-item"}</li>
				<li>${play-shuffled class="dropdown-item"}</li>
			</ul>
		</div>
		<div class="d-flex">
			${search class="form-control form-control-sm me-1" type="search"}
			${sort-mode}
		</div>
	</div>
	${tracks}
</message>

<message id="Lms.Explore.Tracks.template.entry-container">
	${elements class="Lms-row-container"}
	${loading-indicator}
</message>

<message id="Lms.Explore.Tracks.template.entry">
	<div class="d-flex align-items-center mb-2">
		<div class="p-1">
			${cover}
		</div>
		<div class="row align-items-center flex-fill overflow-hidden">
			<div class="col-12 col-md-6 col-lg-4">
				<div class="p-2 overflow-hidden">
					<div class="d-block text-truncate">${name}</div>
					${<if-has-artists>}${artists class="d-block d-md-none text-truncate"}${</if-has-artists>}
				</div>
			</div>
			<div class="col-md-6 col-lg-4">
				${<if-has-artists>}${artists-md class="d-none d-md-block text-truncate"}${</if-has-artists>}
			</div>
			<div class="col-lg-4 text-truncate">
				${<if-has-release>}${release class="d-none d-lg-inline text-truncate text-decoration-none link-success"}${</if-has-release>}
			</div>
		</div>
		<div class="p-2 d-none d-sm-block text-muted text-center Lms-tracks-entry-duration">
			${duration}
		</div>
		<div class="p-2 d-flex">
			${play-btn class="d-none d-sm-block btn btn-sm btn-outline-secondary border-0"}
			${star-btn class="d-none d-sm-block btn btn-sm btn-outline-secondary border-0"}
			<div class="dropdown d-inline-block">
				${more-btn data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-sm btn-outline-secondary border-0"}
				<ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
					<li class="d-block d-sm-none">${play class="dropdown-item"}</li>
					<li>${play-next class="dropdown-item"}</li>
					<li>${play-last class="dropdown-item"}</li>
					<li>${star class="dropdown-item"}</li>
					${<if-has-download>}
					<li>${download class="dropdown-item"}</li>
					${</if-has-download>}
					<li>${track-info class="dropdown-item"}</li>
					${<if-has-lyrics>}<li>${track-lyrics class="dropdown-item"}</li>${</if-has-lyrics>}
				</ul>
			</div>
		</div>
	</div>
</message>

<message id="Lms.Explore.Tracks.template.track-info">
	<div class="modal fade" tabindex="-1">
		<div class="modal-dialog modal-dialog-scrollable">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">${tr:Lms.Explore.track-info}</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<div class="container-fluid d-grid gap-2">
						${<if-has-clusters>}
						<div class="row align-items-center">
							<div class="col-4">
								${tr:Lms.clusters}
							</div>
							<div class="col">
								${clusters}
							</div>
						</div>
						${</if-has-clusters>}
						${<if-has-artist>}
						${artist-table class="d-grid gap-2"}
						${</if-has-artist>}
						<div class="row align-items-center">
							<div class="col-4">
								${tr:Lms.Explore.duration}
							</div>
							<div class="col">
								${duration}
							</div>
						</div>
						${<if-has-codec>}
						<div class="row align-items-center">
							<div class="col-4">
								${tr:Lms.Explore.codec}
							</div>
							<div class="col">
								${codec}
							</div>
						</div>
						${</if-has-codec>}
						${<if-has-bitrate>}
						<div class="row align-items-center">
							<div class="col-4">
								${tr:Lms.Explore.bitrate}
							</div>
							<div class="col">
								${bitrate}
							</div>
						</div>
						${</if-has-bitrate>}
						<div class="row align-items-center">
							<div class="col-4">
								${tr:Lms.Explore.playcount}
							</div>
							<div class="col">
								${playcount}
							</div>
						</div>
						${<if-has-comment>}
						<hr/>
						<pre>${comment}</pre>
						${</if-has-comment>}
					</div>
				</div>
				<div class="modal-footer">
					${ok-btn class="btn btn-primary"}
				</div>
			</div>
		</div>
	</div>
</message>


<message id="Lms.Explore.Tracks.template.track-lyrics">
	<div class="modal fade" tabindex="-1">
		<div class="modal-dialog modal-dialog-scrollable">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">${tr:Lms.Explore.track-lyrics}</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					${lyrics}
				</div>
				<div class="modal-footer">
					${ok-btn class="btn btn-primary"}
				</div>
			</div>
		</div>
	</div>
</message>

</messages>