{% extends "base.html" %}


{% block header-extras %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/hmi.css" />
<script>

	$(function() {

		$('input:radio').screwDefaultButtons({
			image : 'url("{{ STATIC_URL }}img/radioSmall.jpg")',
			width : 43,
			height : 43
		});
	});

</script>
{% endblock %}

{% block body %}
<form class="full-screen-form" name="blisterSelectForm" id="blisterSelectForm" method="post">
	{% csrf_token %}
	<table class="grey-background">
		<tr>
			<td class="full-screen-td">
			<div id="change-blister-display" class="full-screen-container">
				<fieldset class="titled-border-fieldset-timezone">
					<legend class="titled-border-legend">
						Change Blister Card
					</legend>
					<p style="padding-left: 15px; padding-top: 10px;">
						<b>Current Blister Card:</b> {% for blister in blister_list %}{% if dafe.curr_card == blister.tag %}{{ blister.description }}{% endif %}{% endfor %}
					</p>

					<div class="radio">
						<table style="width: 95%;">
                            {% for blister in blister_list %}
							<tr style="height: 75px;">
								<td style="width: 50%;">
								<input type="radio" id="blister-{{ blister.id }}" name="blisterselect" value="{{ blister.tag }}" {% if dafe.curr_card == blister.tag %}checked{% endif %}/>
								<label for="blister-{{ blister.id }}">{{ blister.description }}</label></td>
							</tr>
                            {% endfor %}
						</table>
					</div>
				</fieldset>
				<div id="formButtons">
					<button style="width: 200px; height: 70px; margin-top: 5px; float: left;" id="saveblister" name="saveblister">
						Apply Changes
					</button>
					<button style="width: 200px; height: 70px; margin-top: 5px; float: right;" id="cancelblister" name="cancelblister">
						Close
					</button>
				</div>
			</div></td>
		</tr>
	</table>
</form>
{% endblock %}