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

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

	<div class="bp-c-video bp-js-video {{classes}}">
		<div class="bp-c-video__container">
			<video class="bp-c-video__source" src="{{data.path}}"></video>
		</div>

		<div class="bp-c-video__track-container">
			<button class="bp-c-video__controls">
				{{icon.default("bp-c-video__control bp-c-video__control--play", { name: "play" })}}

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

			<div class="bp-c-video__track">
				<div class="bp-c-video__inner"></div>

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

			<div class="bp-c-video__time">
				<span class="bp-c-video__duration"></span>
			</div>
		</div>
	</div>

{% endmacro %}