<div class="row small-space-xs padding-large full-width">
	<div class="col-xs-12">
		<div class="content-box">
			<div class="flex between-xs middle-xs bottom-margin-large">
				<div>
					<span class="text-large text-dark top-margin-x-small">{{ heading_title }}</span>
					<img class="js-postcode-address-loading hidden" src="{{ loading }}" width="14" height="14">
					<span class="text-small text-gray visible-block">{{ text_example }}</span>
				</div>
				<i class="fas fa-times text-gray text-medium cursor-pointer padding-x-small js-postcode-close"></i>
			</div>
			<div class="field-entry-group">
				<div class="flex-grow-1">
					<input type="text" class="field-entry field-entry-medium" name="search_address" id="search_address" value="" placeholder="{{ text_placeholder_address }}">
				</div>
				<div>
					<button type="button" class="btn-default btn-medium-square js-postcode-list-address">
						<i class="fas fa-search"></i>
					</button>
				</div>
			</div>
		</div>
	</div>
	<div class="col-xs-12 js-result-postcode-address" style="max-height: calc(100vh - 240px); overflow-y: auto;">
		<div class="js-postcode-message">
			<div class="content-box text-center top-padding-medium bottom-padding-x-large background-gray">
				<i class="fas fa-map-marker-alt text-error bigger-text-x-large bottom-margin-small"></i>
				<span class="text-medium text-dark visible-block">{{ text_message }}</span>
			</div>
		</div>
	</div>
	<div class="col-xs-12">
		<div class="content-box flex end-xs middle-xs">
			<button type="button" class="btn-default btn-medium btn-outline js-postcode-cancel right-margin-small">
				<span>{{ text_cancel }}</span>
			</button>
			<button type="button" class="btn-default btn-medium js-postcode-apply" disabled>
				<span>{{ text_apply }}</span>
			</button>
		</div>
	</div>
</div>
