{% extends "secrets/secret_addedit.html" %}
{% load i18n %}
{% block "content_type_fields" %}
<script>
$(document).ready( function() {
	$('#ccform').card({
		container: '.card-wrapper',
		numberInput: 'input#id_number',
		expiryInput: 'input#id_expiration_month, input#id_expiration_year',
		cvcInput: 'input#id_security_code',
		nameInput: 'input#id_holder',
		messages: {
			validDate: '{% trans "valid\nthru" %}',
			monthYear: '{% trans "MM" %}/{% trans "YYYY" %}',
		},
		values: {
			number: '•••• •••• •••• ••••',
			name: '{% trans "Full name" %}',
			expiry: '••/••••',
			cvc: '•••'
		},
	});
});
</script>
<div class="row">
	<div class="col-md-6" id="ccform">
		<i class="fa fa-lock"></i> &nbsp;{% trans "All fields in this section will be stored securely." %}<br><br>

		<div class="form-group">
			<div class="col-sm-4">
				<label class="control-label" for="id_number">{% trans "Number" %}</label>
			</div>
			<div class="col-sm-8">
				<input type="text" class="form-control" name="number" id="id_number" required="required" placeholder="{% trans "Credit card number" %}" value="{{ form.number.value|default_if_none:"" }}">
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-4">
				<label class="control-label" for="id_holder">{% trans "Name on card" %}</label>
			</div>
			<div class="col-sm-8">
				<input type="text" class="form-control" name="holder" id="id_holder" required="required" placeholder="{% trans "Card holder" %}" value="{{ form.holder.value|default_if_none:"" }}">
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-4">
				<label class="control-label" for="id_expiration_month">{% trans "Expiration date" %}</label>
			</div>
			<div class="col-sm-8">
				<div class="row">
					<div class="col-xs-6">
						<input type="text" class="form-control text-center" name="expiration_month" id="id_expiration_month" required="required" maxlength="2" size="2" placeholder="{% trans "MM" %}" value="{{ form.expiration_month.value|default_if_none:"" }}">
					</div>
					<div class="col-xs-6">
						<input type="text" class="form-control text-center" name="expiration_year" id="id_expiration_year" required="required" maxlength="4" size="4" placeholder="{% trans "YYYY" %}" value="{{ form.expiration_year.value|default_if_none:"" }}">
					</div>
				</div>
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-4">
				<label class="control-label" for="id_security_code">{% trans "Card CVV" %}</label>
			</div>
			<div class="col-sm-4">
				<input type="text" class="form-control text-center" name="security_code" id="id_security_code" required="required" maxlength="4" size="4" placeholder="{% trans "Security Code" %}" value="{{ form.security_code.value|default_if_none:"" }}">
			</div>
		</div>
		<div class="form-group secret-details">
			<div class="col-sm-4">
				<label class="control-label" for="id_password">{% trans "Password" %}</label>
			</div>
			<div class="col-sm-8">
				<input class="form-control" id="id_password" name="password" placeholder="{% trans "(optional, for 3D-Secure/SecureCode)" %}" type="password" value="{{ form.password.value|default_if_none:"" }}">
			</div>
		</div>
	</div>
	<div class="col-md-6 card-wrapper"><br></div>
</div>
{% endblock %}
