{% load static cascade_tags sekizai_tags %}

{% addtoblock "css" %}<link href="{% static 'node_modules/angular-bootstrap-plus/src/processbar/processbar.css' %}" rel="stylesheet" type="text/css" />{% endaddtoblock %}
{% addtoblock "js" %}<script src="{% static 'node_modules/angular-bootstrap-plus/src/processbar/processbar.js' %}" type="text/javascript"></script>{% endaddtoblock %}
{% add_data "ng-requires" "bs-plus.processbar" %}

<bsp-process-bar action="{{ instance.link }}">
	{% for child in instance.child_plugin_instances %}
	<bsp-process-step title="{{ child.glossary.step_title }}" ng-cloak>{% render_plugin child %}</bsp-process-step>
	{% endfor %}
</bsp-process-bar>

<script id="bsp/process-bar.html" type="text/ng-template">
	<div class="stepwizard">
		<div class="stepwizard-row">
			<div class="stepwizard-step" ng-repeat="step in bspProcessSteps" style="width: {{ step_css_width }};">
				<button type="button" class="btn btn-circle" ng-class="stepButtonClass(step)" ng-disabled="stepButtonDisabled(step)" ng-click="selectStep(step)"><strong ng-bind="$index+1"></strong></button>
				<p ng-bind="step.title"></p>
			</div>
		</div>
	</div>
</script>
