<form id="id_form_case_component">
	<table id="case-components-table" class="list" cellspacing="0" cellspan="0" width="100%">
		<thead>
			<tr>
				<th class="table_width_checkbox" align="left">
					<input id="id_checkbox_all_components" type="checkbox" class="js-select-all" />
				</th>
				<th align="left">Name</th>
				<th align="left">Product</th>
				<th align="left">Actions</th>
			</tr>
		</thead>
		<tbody>
			{% for component in test_case.component.all %}
			<tr class="{% cycle 'odd' 'even' %}">
				<td><input type="checkbox" name="component" value="{{ component.pk }}" /></td>
				<td>{{ component.name }}</td>
				<td>{{ component.product }}</td>
				<td>
					{% if perms.testcases.delete_testcasecomponent %}
					<a class="link_remove_component" href="javascript:void(0)">Remove</a>
					{% else %}
					None
					{% endif %}
				</td>
			</tr>
			 {% empty %}
			<tr>
				<td colspan="4" align="center" class="grey">No component</td>
			</tr>
			{% endfor %}
			<tr>
				<td colspan="4">
					<div class="addtag">
						{% if perms.testcases.change_testcasecomponent %}
						<input id="id_add_component" type="button" value="Add Component" />
						{% else %}
						<input id="id_add_component" type="button" value="Add Component" disabled />
						{% endif %}

						{% if perms.testcases.delete_testcasecomponent %}
						<input id="id_remove_component" type="button" name="a" value="Remove" />
						{% else %}
						<input id="id_remove_component" type="button" value="Remove" disabled />
						{% endif %}
					</div>
				</td>
			</tr>
		</tbody>
	</table>
</form>
