<div id="createVisitTemplateSegmentTemplate{{@$position}}" class="d-inline">
	<div moe large relative>
		<a class="" href="" show start>+ Create</a>
		<form url="/api/visitTemplateSegmentTemplate/create" right>
			<div id="createVisitTemplateSegmentTemplate{{@$position}}Component{{@$position}}" v-cloak>
				<input type="hidden" name="visitTemplateUid" value="{{ $visitTemplate->uid }}" />
				<div class="mb-2">
					<label>Segment Template<sup class="text-danger">*</sup></label>
					<select name="segmentTemplateUid" class="form-control" select-2 required>
						<option value=""></option>
						<option v-for="t in segmentTemplates" v-bind:value="t.uid">@{{ t.default_display_title }} (@{{ t.internal_name }})</option>
					</select>
				</div>
				@if(@$position)
				<input type="hidden" name="leftOrRight" value="{{ $position }}">
				@else
				<div class="mb-2">
					<label>Left or Right</label>
					<select name="leftOrRight" class="form-control" required>
						<option value="">--select--</option>
						<option value="LEFT">Left</option>
						<option value="RIGHT">Right</option>
					</select>
				</div>
				@endif
				<div class="mb-2">
					<label>Position Index<sup class="text-danger">*</sup></label>
					<input type="number" name="positionIndex" class="form-control" required />
				</div>
				<div class="mb-2">
					<label>Heading</label>
					<input type="text" name="heading" class="form-control" />
				</div>
				<div class="mb-2">
					<label>Sub-heading</label>
					<input type="text" name="subheading" class="form-control" />
				</div>
				<div class="mb-2">
					<label>Display title<sup class="text-danger">*</sup></label>
					<input type="text" name="displayTitle" class="form-control" required />
				</div>
				
			</div>
			<div class="mb-0">
				<button class="btn btn-success btn-sm" submit>Create</button>
				<button class="btn btn-default border btn-sm" cancel>Cancel</button>
			</div>
		</form>
	</div>
</div>

<script>
	var visitTemplateComponent = null;
	(function() {
		function init() {
			visitTemplateComponent = new Vue({
				el: '#createVisitTemplateSegmentTemplate{{@$position}}Component{{@$position}}',
				data: {
					segmentTemplates:[]
				},
				methods: {
					initSelect2: function(){
						var self = this;
						$('[select-2]').select2();
					},
					loadSegmentTemplates: function() {
						var self = this;
						$.get("{{ route('practice-management.segmentTemplates') }}", {response_type:'json'}, function(response) {
							self.segmentTemplates = response.data;
						}, 'json');
					},
					getSegmentTemplates: function(){
						return this.segmentTemplates;
					},
					init: function() {
						this.loadSegmentTemplates();
					}
				},
				mounted: function() {
					this.init();
				},
				updated: function(){
					var self = this;
					self.$nextTick(function(){
						self.initSelect2();
					});
				}
			});
		}
		addMCInitializer('createVisitTemplateSegmentTemplate{{@$position}}', init);
	})();
</script>