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

<message id="Lms.PlayQueue.template.clear-btn"><i class="fa fa-fw fa-times"></i></message>
<message id="Lms.PlayQueue.template.shuffle-btn"><i class="fa fa-fw fa-random"></i></message>
<message id="Lms.PlayQueue.template.repeat-btn"><i class="fa fa-fw fa-repeat"></i></message>
<message id="Lms.PlayQueue.template.radio-btn"><i class="fa fa-fw fa-rss"></i></message>
<message id="Lms.PlayQueue.template.save-btn"><i class="fa fa-fw fa-save"></i></message>

<message id="Lms.PlayQueue.template">
	<div class="small text-muted mb-2">${track-count} · ${duration}</div>
	<div class="mb-3">
		<div class="btn-group me-2">
			${repeat-btn class="btn-check"}
			<label class="btn btn-outline-info" title="${tr:Lms.PlayQueue.repeat}" for="${id:repeat-btn}">${tr:Lms.PlayQueue.template.repeat-btn}</label>
			${radio-btn class="btn-check"}
			<label class="btn btn-outline-info" title="${tr:Lms.PlayQueue.radio-mode}" for="${id:radio-btn}">${tr:Lms.PlayQueue.template.radio-btn}</label>
		</div>
		<div class="d-inline-block me-2" title="${tr:Lms.save}">
			${save-btn class="btn btn-secondary"}
		</div>
		<div class="d-inline-block me-2" title="${tr:Lms.PlayQueue.shuffle}">
			${shuffle-btn class="btn btn-secondary"}
		</div>
		<div class="d-inline-block me-2" title="${tr:Lms.PlayQueue.clear}">
			${clear-btn class="btn btn-warning"}
		</div>
	</div>
	${entries}
</message>

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

<message id="Lms.PlayQueue.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"}
			${del-btn class="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>${play class="dropdown-item"}</li>
					<li>${star class="dropdown-item"}</li>
					<li>${download class="dropdown-item"}</li>
				</ul>
			</div>
		</div>
	</div>
</message>

<message id="Lms.PlayQueue.template.entry-artist">
	${artist}
</message>

<message id="Lms.PlayQueue.template.save-as-tracklist">
	<div class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">${tr:Lms.save}</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<form>
						<div class="mb-2">
							<div class="form-check form-check-inline">
								${create-tracklist-btn class="form-check-input" name="action-type"}
								<label class="form-check-label" for="${id:create-tracklist-btn}">${tr:Lms.PlayQueue.create-tracklist}</label>
							</div>
							<div class="form-check form-check-inline">
								${replace-tracklist-btn class="form-check-input" name="action-type"}
								<label class="form-check-label" for="${id:replace-tracklist-btn}">${tr:Lms.PlayQueue.replace-tracklist}</label>
							</div>
						</div>
						${contents}
					</form>
				</div>
				<div class="modal-footer">
					${save-btn class="btn btn-primary me-1"}${cancel-btn class="btn btn-secondary"}
				</div>
			</div>
		</div>
	</div>
</message>

<message id="Lms.PlayQueue.template.save-as-tracklist.create-tracklist">
	${name class="form-control"}
	<div class="invalid-feedback">
		${name-info}
	</div>
</message>

<message id="Lms.PlayQueue.template.save-as-tracklist.replace-tracklist">
	${name class="form-control"}
	<div class="invalid-feedback">
		${name-info}
	</div>
</message>

</messages>
