<!-- form/manager/erp-sync/erp-sync.html -->
<nc-form>
	<nc-popup flowing='flowing' hoverable='hoverable' position='bottom left'>
		<span id='nc-grid-popup' slot='trigger' style='margin-top: 3em; margin-left: -1em;'></span>
		<nc-popup-content>
			<nc-label model='hdr.rows'>Rows {{ (selectedRowRecord && selectedRowRecord.order_id + ', ' + selectedRowRecord.company_id) || '' }}</nc-label>
			<nc-row width='calc(98vw - 7em)'>
				<nc-grid :doesExternalFilterPass='doesExternalFilterPass' :isExternalFilterPresent='isExternalFilterPresent' height='11.5em' id='row_area' model='grid.row_area' v-on:gridRowClicked='gridRowClicked' v-on:gridSortChanged='gridSortChanged'></nc-grid>
			</nc-row>
		</nc-popup-content>
	</nc-popup>
	<nc-row>
		<nc-col width='1/12'>
			<nc-label model='hdr.connection'>Connection</nc-label>
		</nc-col>
		<nc-col width='auto'>
			<nc-dropdown model='rec.connection' v-on:change='changeConnection("update-data")'></nc-dropdown>
		</nc-col>
	</nc-row>
	<nc-divider></nc-divider>
	<nc-row>
		<nc-tab :active-index='tabIndex.local' v-if='tabLocal && tabLocal.length > 0' v-on:change='tabChanged'>
			<nc-tab-pane :icon='item.icon' :key='item.show' :title='item.show' v-for='item in tabLocal'>
				<nc-row>
					<nc-col width='1/5'>
						<nc-image :src='rec.logo_path_local' class='store_logo' height='30' width='190'></nc-image>
					</nc-col>
					<nc-col class='nc-end-h' width='4/5'>
						<nc-button primary='primary' v-on:click='loadRows("local")'>
							<nc-translate model='hdr.external.load'>Load</nc-translate>
						</nc-button>
					</nc-col>
				</nc-row>
				<nc-row>
					<nc-grid :doesExternalFilterPass='doesExternalFilterPass' :isExternalFilterPresent='isExternalFilterPresent' height='11.5em' id='local' model='grid.local' v-on:gridRowClicked='gridRowClicked' v-on:gridSortChanged='gridSortChanged'></nc-grid>
				</nc-row>
				<nc-row>
					<nc-col width='1/9'>
						<nc-image :src='rec.logo_path_external' class='store_logo' height='30' width='190'></nc-image>
					</nc-col>
					<nc-col width='2/9'></nc-col>
					<nc-col class='nc-space-evenly' width='3/9'>
						<nc-checkbox model='rec.show_new' v-on:click.native='showRows()'>
							<nc-translate model='hdr.external.show_new'>Show new</nc-translate>
						</nc-checkbox>
						<nc-checkbox model='rec.show_changed' v-on:click.native='showRows()'>
							<nc-translate model='hdr.external.show_changed'>Show changed</nc-translate>
						</nc-checkbox>
						<nc-checkbox model='rec.show_equal' v-on:click.native='showRows()'>
							<nc-translate model='hdr.external.show_equal'>Show equal</nc-translate>
						</nc-checkbox>
					</nc-col>
					<nc-col class='nc-end-h' width='3/9'>
						<nc-button :disabled='!buttonEnabled("import")' v-on:click='saveRows("external", "import")'>
							<i class='far fa-arrow-circle-up'></i>
							<nc-translate model='hdr.external.import'>Import</nc-translate>
						</nc-button>
						<nc-button :disabled='!buttonEnabled("export")' v-on:click='saveRows("local", "export")'>
							<i class='far fa-arrow-circle-down'></i>
							<nc-translate model='hdr.external.export'>Export</nc-translate>
						</nc-button>
						<nc-button primary='primary' v-on:click='loadRows("external")'>
							<nc-translate model='hdr.external.load'>Load</nc-translate>
						</nc-button>
					</nc-col>
				</nc-row>
				<nc-row>
					<nc-grid :doesExternalFilterPass='doesExternalFilterPass' :isExternalFilterPresent='isExternalFilterPresent' height='calc(100vh - 34em)' id='external' model='grid.external' v-on:gridRowClicked='gridRowClicked' v-on:gridSortChanged='gridSortChanged'></nc-grid>
				</nc-row>
			</nc-tab-pane>
		</nc-tab>
	</nc-row>
</nc-form>
