<div data-bind="i18n: {'key': '%MODULENAME%/INFO_TEXT_CONTAINS_NO_KEYS_TO_IMPORT'},
	 visible: keysOwn().length === 0 && keysPublicExternal().length === 0"
	 style="margin-bottom: 30px;"
></div>

<div data-bind="i18n: {'key': '%MODULENAME%/INFO_TEXT_CONTAINS_OWN_KEYS_FOR_IMPORT'},
	 visible: keysOwn().length > 0"
></div>
<div class="content-block" data-bind="visible: keysOwn().length > 0" style="margin-top: 6px;">
	<div data-bind="foreach: keysOwn">
		<div class="key_item">
			<label data-bind="css: {'checked': needToImport}" class="custom_checkbox checked">
				<span class="icon"></span>
				<input type="checkbox" data-bind="checked: needToImport, attr: {'id': 'need_to_import_' + id}">
			</label>
			<label data-bind="attr: {'for': 'need_to_import_' + id}">
				<span class="key_email" data-bind="text: email"></span>
				<span data-bind="text: addInfo"></span>
				<span data-bind="text: '(external)', visible: isExternal"></span>
			</label>
		</div>
	</div>
</div>

<div data-bind="i18n: {'key': '%MODULENAME%/INFO_TEXT_CONTAINS_EXTERNAL_KEYS_FOR_IMPORT'},
	 visible: keysPublicExternal().length > 0"
></div>
<div class="content-block" data-bind="visible: keysPublicExternal().length > 0" style="margin-top: 6px;">
	<div data-bind="foreach: keysPublicExternal">
		<div class="key_item">
			<label data-bind="css: {'checked': needToImport}" class="custom_checkbox checked">
				<span class="icon"></span>
				<input type="checkbox" data-bind="checked: needToImport, attr: {'id': 'need_to_import_' + id}">
			</label>
			<label data-bind="attr: {'for': 'need_to_import_' + id}">
				<span class="key_email" data-bind="text: email"></span>
				<span data-bind="text: addInfo"></span>
				<span data-bind="text: '(external)', visible: isExternal"></span>
			</label>
		</div>
	</div>
</div>

<!-- The following keys will not be imported -->
<div data-bind="i18n: {'key': '%MODULENAME%/INFO_TEXT_CONTAINS_KEYS_EXTERNAL_PRIVATE'},
	 visible: keysPrivateExternal().length > 0"
></div>
<div class="content-block" data-bind="visible: keysPrivateExternal().length > 0" style="margin-top: 6px;">
	<div data-bind="foreach: keysPrivateExternal">
		<div class="key_item disabled">
			<label>
				<span class="key_email" data-bind="text: email"></span>
				<span data-bind="text: addInfo"></span>
				<span data-bind="text: '(external)', visible: isExternal"></span>
			</label>
		</div>
	</div>
</div>

<div data-bind="i18n: {'key': '%MODULENAME%/INFO_TEXT_CONTAINS_KEYS_ALREADY_IN_SYSTEM'},
	 visible: keysAlreadyThere().length > 0"
></div>
<div class="content-block" data-bind="visible: keysAlreadyThere().length > 0" style="margin-top: 6px;">
	<div data-bind="foreach: keysAlreadyThere">
		<div class="key_item disabled">
			<label>
				<span class="key_email" data-bind="text: email"></span>
				<span data-bind="text: addInfo"></span>
				<span data-bind="text: '(external)', visible: isExternal"></span>
			</label>
		</div>
	</div>
</div>

<div data-bind="i18n: {'key': '%MODULENAME%/INFO_TEXT_CONTAINS_KEYS_WITH_NO_EMAIL'},
	 visible: keysBroken().length > 0"
></div>
<div class="content-block" data-bind="visible: keysBroken().length > 0" style="margin-top: 6px;">
	<div data-bind="foreach: keysBroken">
		<div class="key_item disabled">
			<label style="color: red;">
				<span class="key_email" data-bind="text: email"></span>
				<span data-bind="text: addInfo"></span>
				<span data-bind="text: '(external)', visible: isExternal"></span>
			</label>
		</div>
	</div>
</div>
