<div id="updateVisitTemplateSegmentTemplate{{@$template->uid}}" class="d-inline">
	<div moe>
		<a class="text-muted" href="" show start segment-template-update="{{ $template->uid }}"><i class="fas fa-pencil-alt"></i></a>
		<form url="/api/visitTemplateSegmentTemplate/swapSegmentTemplate" style="min-width:250px;">
			<div id="updateVisitTemplateSegmentTemplate{{@$template->uid}}Component{{@$template->uid}}" v-cloak>
				<input type="hidden" name="uid" value="{{ $template->uid }}" />
				<div class="mb-2">
					<label>Segment Template<sup class="text-danger">*</sup></label>
					<select name="segmentTemplateUid" class="form-control" v-model="form.segmentTemplateUid" 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>				
			</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>
	(function() {
		function init() {
			new Vue({
				el: '#updateVisitTemplateSegmentTemplate{{@$template->uid}}Component{{@$template->uid}}',
				data: {
					segmentTemplates:[],
					form:{
						segmentTemplateUid: "{{ $template->segmentTemplate->uid }}"
					}
				},
				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;
					},
					initOnOpenLoadSegmentTemplates: function(){
						var self = this;
						$('[segment-template-update={{ $template->uid }}]').click(function(){
							self.loadSegmentTemplates();
						});
					},
					init: function() {
						this.initOnOpenLoadSegmentTemplates();
					}
				},
				mounted: function() {
					this.init();
				},
				updated: function(){
					var self = this;
					self.$nextTick(function(){
						self.initSelect2();
					});
				}
			});
		}
		addMCInitializer('updateVisitTemplateSegmentTemplate{{@$template->uid}}', init);
	})();
</script>