<spark-kiosk-add-discount inline-template> <div> <div class="modal fade" id="modal-add-discount" tabindex="-1" role="dialog"> <div class="modal-dialog" v-if="discountingUser"> <div class="modal-content"> <div class="modal-header"> <button type="button " class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title"> Add Discount (@{{ discountingUser.name }}) </h4> </div> <div class="modal-body"> <!-- Current Discount --> <div class="alert alert-success" v-if="currentDiscount"> This user has a discount of @{{ formattedDiscount(currentDiscount) }} for @{{ formattedDiscountDuration(currentDiscount) }}. </div> <!-- Add Discount Form --> <form class="form-horizontal" role="form"> <!-- Discount Type --> <div class="form-group" :class="{'has-error': form.errors.has('type')}"> <label class="col-sm-4 control-label">Discount Type</label> <div class="col-sm-6"> <div class="radio"> <label> <input type="radio" value="amount" v-model="form.type"> Amount </label> </div> <div class="radio"> <label> <input type="radio" value="percent" v-model="form.type"> Percentage </label> </div> <span class="help-block" v-show="form.errors.has('type')"> @{{ form.errors.get('type') }} </span> </div> </div> <!-- Discount Value --> <div class="form-group" :class="{'has-error': form.errors.has('value')}"> <label class="col-md-4 control-label"> <span v-if="form.type == 'percent'">Percentage</span> <span v-if="form.type == 'amount'">Amount</span> </label> <div class="col-md-6"> <input type="text" class="form-control" v-model="form.value"> <span class="help-block" v-show="form.errors.has('value')"> @{{ form.errors.get('value') }} </span> </div> </div> <!-- Discount Duration --> <div class="form-group" :class="{'has-error': form.errors.has('duration')}"> <label class="col-sm-4 control-label">Discount Duration</label> <div class="col-sm-6"> <div class="radio"> <label> <input type="radio" value="once" v-model="form.duration"> Once </label> </div> <div class="radio"> <label> <input type="radio" value="forever" v-model="form.duration"> Forever </label> </div> <div class="radio"> <label> <input type="radio" value="repeating" v-model="form.duration"> Multiple Months </label> </div> <span class="help-block" v-show="form.errors.has('duration')"> @{{ form.errors.get('duration') }} </span> </div> </div> <!-- Duration Months --> <div class="form-group" :class="{'has-error': form.errors.has('months')}" v-if="form.duration == 'repeating'"> <label class="col-md-4 control-label"> Months </label> <div class="col-md-6"> <input type="text" class="form-control" v-model="form.months"> <span class="help-block" v-show="form.errors.has('months')"> @{{ form.errors.get('months') }} </span> </div> </div> </form> </div> <!-- Modal Actions --> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" @click="applyDiscount" :disabled="form.busy"> <span v-if="form.busy"> <i class="fa fa-btn fa-spinner fa-spin"></i>Applying </span> <span v-else> Apply Discount </span> </button> </div> </div> </div> </div> </div> </spark-kiosk-add-discount>