{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "components/icon.njk" as icon %}
{% import "components/action.njk" as action %}

{# ========================================================================== #}
{# :: Default #}
{# ========================================================================== #}
{% macro default(classes, data) %}

	<div class="bp-c-audio bp-js-audio {{classes}}">
		<audio class="bp-c-audio__source" src="{{data.path}}"></audio>

		<div class="bp-c-audio__container">
			<div class="bp-c-audio__content">
				<div class="bp-c-audio__info">
					{{icon.default("bp-c-audio__icon", { name: "audio" })}}

					<div class="bp-c-audio__meta">
						<h4 class="bp-c-audio__title">{{data.name}}</h4>

						<p class="bp-c-audio__artist">{{data.author}}</p>
					</div>
				</div>

				<div class="bp-c-audio__actions">
					<p class="bp-c-audio__duration"></p>

					<button class="bp-c-audio__controls">
						{{icon.default("bp-c-audio__control bp-c-audio__control--play", { name: "play" })}}

						{{icon.default("bp-c-audio__control bp-c-audio__control--pause", { name: "pause" })}}
					</button>

					{{action.link("bp-c-audio__download", {
						iconAfter: "download",
						url: data.path
					})}}
				</div>
			</div>

			<div class="bp-c-audio__track">
				<div class="bp-c-audio__inner"></div>

				<div class="bp-c-audio__time-container">
					<span class="bp-c-audio__time"></span>
				</div>
			</div>
		</div>
	</div>

{% endmacro %}