<script type="text/ng-template" id="changePaymentMethodModal.html">
	<form name="form" class="form-horizontal" ng-submit="_save(payment_method)" novalidate>
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="cancel()">
				<i class="ti ti-close"></i>
			</button>
			<h4 class="modal-title">Change Payment Method</h4>
		</div>
		<div class="modal-body">
			<p>Fields with <span style="color: #cc0000;">*</span> are required.</p>
			<div class="form-group">
				<label for="first_name" class="col-sm-3 control-label">First Name <span style="color: #cc0000;">*</span></label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="first_name" id="first_name" ng-model="payment_method.first_name" ng-required="true" ng-minlength="2">
					<p class="help-block" ng-show="form.first_name.$touched && form.first_name.$error.required">Value is required.</p>
					<p class="help-block" ng-show="form.first_name.$touched && form.first_name.$error.minlength">Value is too short.</p>
				</div>
			</div>
			<div class="form-group">
				<label for="last_name" class="col-sm-3 control-label">Last Name <span style="color: #cc0000;">*</span></label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="last_name" id="last_name" ng-model="payment_method.last_name" ng-required="true" ng-minlength="2">
					<p class="help-block" ng-show="form.last_name.$touched && form.last_name.$error.required">Value is required.</p>
					<p class="help-block" ng-show="form.last_name.$touched && form.last_name.$error.minlength">Value is too short.</p>
				</div>
			</div>
			<div class="form-group">
				<label for="card_number" class="col-sm-3 control-label">Card Number <span style="color: #cc0000;">*</span></label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="card_number" id="card_number" ng-model="payment_method.card_number" maxlength="16" ng-required="true" ng-minlength="16" ng-maxlength="16">
					<p class="help-block" ng-show="form.card_number.$touched && form.card_number.$error.required">Value is required.</p>
					<p class="help-block" ng-show="form.card_number.$touched && form.card_number.$error.minlength">Value is too short.</p>
					<p class="help-block" ng-show="form.card_number.$touched && form.card_number.$error.maxlength">Value is too long.</p>
				</div>
			</div>
			<div class="form-group">
				<label for="exp_month" class="col-sm-3 control-label">Exp Month <span style="color: #cc0000;">*</span></label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="exp_month" id="exp_month" ng-model="payment_method.exp_month" maxlength="2" ng-required="true" ng-minlength="1" ng-maxlength="2">
					<p class="help-block" ng-show="form.exp_month.$touched && form.exp_month.$error.required">Value is required.</p>
					<p class="help-block" ng-show="form.exp_month.$touched && form.exp_month.$error.minlength">Value is too short.</p>
					<p class="help-block" ng-show="form.exp_month.$touched && form.exp_month.$error.maxlength">Value is too long.</p>
				</div>
			</div>
			<div class="form-group">
				<label for="exp_year" class="col-sm-3 control-label">Exp Year <span style="color: #cc0000;">*</span></label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="exp_year" id="exp_year" ng-model="payment_method.exp_year" maxlength="4" ng-required="true" ng-minlength="2" ng-maxlength="4">
					<p class="help-block" ng-show="form.exp_year.$touched && form.exp_year.$error.required">Value is required.</p>
					<p class="help-block" ng-show="form.exp_year.$touched && form.exp_year.$error.minlength">Value is too short.</p>
					<p class="help-block" ng-show="form.exp_year.$touched && form.exp_year.$error.maxlength">Value is too long.</p>
				</div>
			</div>
			<div class="form-group">
				<label for="cvc" class="col-sm-3 control-label">CVC <span style="color: #cc0000;">*</span></label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="cvc" id="cvc" ng-model="payment_method.cvc" ng-required="true" maxlength="5" ng-minlength="1" ng-maxlength="5">
					<p class="help-block" ng-show="form.cvc.$touched && form.cvc.$error.required">Value is required.</p>
					<p class="help-block" ng-show="form.cvc.$touched && form.cvc.$error.minlength">Value is too short.</p>
					<p class="help-block" ng-show="form.cvc.$touched && form.cvc.$error.maxlength">Value is too long.</p>
				</div>
			</div>
		</div>
		<div class="modal-footer">
			<a class="btn btn-danger" ng-click="cancel()">
				<i class="ti ti-close" style="margin-right: 5px;"></i>
				Cancel
			</a>
			<button type="submit" ng-disabled="!form.$valid" class="btn-primary btn">
				<i class="ti ti-share" style="margin-right: 5px;"></i>
				Save
			</button>
		</div>
	</form>
</script>