<div class="popups">
	<div class="modal hide b-compose-open-pgp-content g-ui-user-select-none" data-bind="modal: modalVisibility">
		<div>
			<div class="modal-header">
				<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
				<h3>
					<span class="i18n" data-i18n="POPUPS_COMPOSE_OPEN_PGP/TITLE_COMPOSE_OPEN_PGP"></span>
				</h3>
			</div>
			<div class="modal-body">
				<div class="alert" data-bind="visible: '' !== notification()">
					<span data-bind="text: notification"></span>
				</div>
				<div class="row-fluid">
					<div class="span6">

						<div data-bind="component: {
								name: 'Checkbox',
								params: {
									label: 'POPUPS_COMPOSE_OPEN_PGP/LABEL_SIGN',
									value: sign
								}
							}, click: updateCommand"></div>

						<div class="key-list" data-bind="visible: sign">
							<div class="key-list-wrp empty" data-bind="visible: !signKey()">
								No private key found
							</div>
							<div class="key-list-wrp" data-bind="visible: signKey()">
								<div class="key-list__item row-fluid">
									<div class="key-list__item-hash span4">
										(<span data-bind="text: signKey() ? signKey().hash : ''"></span>)
									</div>
									<div class="key-list__item-names span8">
									<!-- ko if: signKey() -->
										<!-- ko foreach: signKey().users -->
											<div class="key-list__item-name" data-bind="text: $data"></div>
										<!-- /ko -->
									<!-- /ko -->
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="span6">

						<div data-bind="component: {
								name: 'Checkbox',
								params: {
									label: 'POPUPS_COMPOSE_OPEN_PGP/LABEL_ENCRYPT',
									value: encrypt
								}
							}"></div>

						<div class="key-list" data-bind="visible: encrypt">
							<div class="key-list-wrp empty" data-bind="visible: !encryptKeys() || encryptKeys().length === 0">
								No public keys selected
							</div>
							<div class="key-list-wrp" data-bind="visible: encryptKeys() && encryptKeys().length > 0">
								<!-- ko foreach: encryptKeys -->
									<div class="key-list__item row-fluid">
										<div class="key-list__item-delete span1" data-bind="click: removable() ? $parent.deletePublickKey : null, css: {'disabled': !removable()}">
											<i class="icon-trash"></i>
										</div>
										<div class="key-list__item-hash span3" data-bind="visible: !empty">
											(<span data-bind="text: hash"></span>)
										</div>
										<div class="span8">
											<span class="key-list__item-names"  data-bind="css: {'empty': empty}">
											<!-- ko foreach: users -->
												<div class="key-list__item-name" data-bind="text: $data"></div>
											<!-- /ko -->
											</span>
											<span class="key-list__item-error" data-bind="visible: empty">
												(Public key not found)
											</span>
										</div>
									</div>
								<!-- /ko -->
							</div>
						</div>
					</div>
				</div>
				<div class="row-fluid key-actions">
					<div class="span6">
						<div data-bind="visible: sign()">
							<input type="password" class="inputPassword input-block-level i18n"
								autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
								data-i18n="[placeholder]POPUPS_COMPOSE_OPEN_PGP/LABEL_PASSWORD"
								data-bind="textInput: password, hasfocus: password.focus, onEnter: doCommand" />
							<div class="form-inline" data-bind="visible: 0 < privateKeysOptions().length">
								<select class="input-block-level" data-bind="options: privateKeysOptions, value: selectedPrivateKey,
									optionsCaption: privateKeysOptionsCaption, optionsText: 'name', optionsValue: 'id',
									optionsAfterRender: addOptionClass"></select>
							</div>
						</div>
					</div>
					<div class="span6">
						<div class="form-inline" data-bind="visible: encrypt() && 0 < publicKeysOptions().length">
							<select class="input-block-level" data-bind="options: publicKeysOptions, value: selectedPublicKey,
								optionsCaption: publicKeysOptionsCaption, optionsText: 'name', optionsValue: 'id',
								optionsAfterRender: addOptionClass"></select>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn buttonDo" data-bind="command: doCommand, hasfocus: buttonFocus,
					enable: (sign() || encrypt()) && (!encrypt() || encrypt() && encryptKeys().length > 0)">
					<i data-bind="css: {'icon-key': !submitRequest(), 'icon-spinner animated': submitRequest()}"></i>
					&nbsp;&nbsp;
					<span class="i18n" data-bind="visible: sign() && !encrypt()" data-i18n="POPUPS_COMPOSE_OPEN_PGP/BUTTON_SIGN"></span>
					<span class="i18n" data-bind="visible: !sign() && encrypt()" data-i18n="POPUPS_COMPOSE_OPEN_PGP/BUTTON_ENCRYPT"></span>
					<span class="i18n" data-bind="visible: (sign() && encrypt()) || (!sign() && !encrypt())" data-i18n="POPUPS_COMPOSE_OPEN_PGP/BUTTON_SIGN_AND_ENCRYPT"></span>
				</button>
			</div>
		</div>
	</div>
</div>
