{% extends "touchtechnology/admin/edit.html" %}
{% load i18n %}
{% load common %}
{% load bootstrap3 %}

{% block tab-links %}
	<li class="active">
		<a href="#bulk-create-tab" data-toggle="tab">
			<i class="fa fa-chevron-right fa-fw"></i>
			&nbsp;{% blocktrans with types=model|types %}Add {{ types }}{% endblocktrans %}
		</a>
	</li>
{% endblock %}

{% block tab-panes %}
	<div class="tab-pane active" id="bulk-create-tab">
		<div class="heading-block">
			<h3>{% blocktrans with types=model|types|capfirst %}Add {{ types }}{% endblocktrans %}</h3>
		</div>

		<p class="text-muted">{% blocktrans with types=model|types %}Each row you fill in adds one of the {{ types }}, after any that already exist. Rows left blank are ignored.{% endblocktrans %}</p>

		{{ formset.management_form }}

		{% if formset.non_form_errors %}
			<div class="alert alert-danger">{{ formset.non_form_errors }}</div>
		{% endif %}

		<table class="table table-striped table-condensed bulk-create">
			<thead>
				<tr>
					<th>{% trans "Order" %}</th>
					{% for field in formset.empty_form.visible_fields %}
						<th>{{ field.label }}</th>
					{% endfor %}
				</tr>
			</thead>
			<tbody>
				{% for form in formset %}
					<tr>
						<td>{{ form.instance.order }}{% for hidden in form.hidden_fields %}{{ hidden }}{% endfor %}</td>
						{% for field in form.visible_fields %}
							<td>{% bootstrap_field field show_label=False show_help=False %}</td>
						{% endfor %}
					</tr>
				{% endfor %}
			</tbody>
		</table>

		<div class="form-group">
			<div class="text-center">
				<button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
				&nbsp;<a class="btn btn-default" href="{% block cancel-url %}{{ cancel_url }}{% endblock %}">{% trans "Cancel" %}</a>
			</div>
		</div>
	</div>
{% endblock %}

{% block extracss %}
	{{ block.super }}
	<style type="text/css">
		{# Cancel the negative margins .form-horizontal gives each .form-group. #}
		table.bulk-create .form-group { margin: 0; }
		table.table.bulk-create > tbody > tr > td { vertical-align: middle; }
		table.bulk-create td:first-child { width: 4em; }
	</style>
{% endblock %}