<div class="headline"
	 data-bind="i18n: {'key': '%MODULENAME%/INFO_TEXT_CONTAINS_NO_KEYS_TO_IMPORT'},
	 visible: keysOwn().length === 0 && keysPublicExternal().length === 0"
></div>

<div class="headline"
	 data-bind="i18n: {'key': '%MODULENAME%/INFO_TEXT_CONTAINS_OWN_KEYS_FOR_IMPORT'},
	 visible: keysOwn().length > 0"
></div>
<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 class="headline"
	 data-bind="i18n: {'key': '%MODULENAME%/INFO_TEXT_CONTAINS_EXTERNAL_KEYS_FOR_IMPORT'},
	 visible: keysPublicExternal().length > 0"
></div>
<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>

<!-- The following keys will not be imported -->
<div class="headline"
	 data-bind="i18n: {'key': '%MODULENAME%/INFO_TEXT_CONTAINS_KEYS_EXTERNAL_PRIVATE'},
	 visible: keysPrivateExternal().length > 0"
></div>
<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 class="headline"
	 data-bind="i18n: {'key': '%MODULENAME%/INFO_TEXT_CONTAINS_KEYS_ALREADY_IN_SYSTEM'},
	 visible: keysAlreadyThere().length > 0"
></div>
<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 class="headline"
	 data-bind="i18n: {'key': '%MODULENAME%/INFO_TEXT_CONTAINS_KEYS_WITH_NO_EMAIL'},
	 visible: keysBroken().length > 0"
></div>
<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>
