<div class="row" id="SectionImportExportFile">

	<div class="col-12">
		<div class="insights_widget card">
			<div class="card-header">
				<h5 class="card-title">Import Options From File</h5>
				<h6 class="card-subtitle text-muted">Supply a previously exported options file</h6>
			</div>
			<div class="card-body p-4">
				<form id="ImportExportFileForm" autocomplete="off" method="post"
					  action="{{ vars.form_action }}" enctype="multipart/form-data">
					{% for input_name,input_value in vars.form_nonce %}
						<input type="hidden" name="{{ input_name }}" value="{{ input_value }}" />
					{% endfor %}
					<div class="form-group">
						<label for="ImportFile">Select Options Import File</label>
						<input name="import_file" type="file" class="form-control-file" id="ImportFile">
					</div>
					<div class="form-group">
						<label for="_confirm_file" class="col-form-label">
							<input type="checkbox" class="form-control text-right"
								   name="confirm" id="_confirm_file" value="Y" />
							Yes, I Understand Existing Options Will Be Overwritten
							<br />
							<small class="form-text text-muted">
								Please be sure that this is what you intend - it can't be undone.
							</small>
						</label>
					</div>
					<div class="form-group text-right">
						<input id="SubmitForm" href="#" class="btn btn-primary" type="submit"
							   value="Import Options From File" />
					</div>
				</form>
			</div>
		</div>
	</div>

	<div class="col-12 insights_section">
		<div class="insights_widget card">
			<div class="card-header">
				<h5 class="card-title">Download Export File</h5>
				<h6 class="card-subtitle text-muted">Use this file on another site to import options</h6>
			</div>
			<div class="card-body p-4">
				<div class="" id="">
					<div class="form-group text-right">
						<a id="ExportDownload" href="{{ hrefs.export_file_download }}"
						   class="btn btn-primary" type="submit">Download Options Export File</a>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>

<script>
	jQuery( document ).ready( function () {
		jQuery( document ).on( "click", "a#ExportDownload", function () {
			event.preventDefault();
			jQuery.fileDownload( jQuery( this ).attr( 'href' ), {
				preparingMessageHtml: "Downloading file, please wait...",
				failMessageHtml: "There was a problem downloading the file."
			} );
			return false;
		} );
	} );
</script>