<div class="modal-header">
    <button type="button" class="close"
        aria-hidden="true">&times;</button>
    <h4 class="modal-title" translate="yes">Log in to {{host}}</h4>
</div>

<div id="machine-change-auth" class="modal-body">
    {{^loading}}
    {{^available}}
    <p translate="yes">Unable to log in to {{#strong}}{{full_address}}{{/strong}}. The host does not accept password login or any of your SSH keys.</p>
    {{/available}}

    {{#available}}

    {{#only_password}}
    <p translate="yes">Unable to log in to {{#strong}}{{full_address}}{{/strong}} using SSH key authentication. Please provide the password. You may want to set up your SSH keys for automatic login.</p>
    {{/only_password}}

    {{#only_key}}
    <p>
        <span>The SSH key for logging in to {{#strong}}{{full_address}}{{/strong}} is protected by a password, and the host does not allow logging in with a password. Please provide the password of the key at {{#strong}}{{key}}{{/strong}}.</span>
        <span translate="yes" class="password-change-advice">You may want to change the password of the key for automatic login.</span>
    </p>
    {{/only_key}}

    {{#password_and_key}}
    <p>
        <span translate="yes">The SSH key for logging in to {{#strong}}{{full_address}}{{/strong}} is protected. You can log in with either your login password or by providing the password of the key at {{#strong}}{{key}}{{/strong}}.</span>
        <span translate="yes" class="password-change-advice">You may want to change the password of the key for automatic login.</span>
    </p>
    {{/password_and_key}}

    <br/>

    <form class="ct-form">
        <label class="control-label" id="login-authentication">
            <div translate="yes">Authentication</div>
            <div translate="yes" class="widest-title">Key password</div>
            <div translate="yes" class="widest-title">Automatic login</div>
        </label>
        <div class="radio radio-horizontal">
            <label>
                <input type="radio" name="auth" value="pass" checked/><span translate="yes">Password</span>
            </label>
            <label>
                <input type="radio" name="auth" value="key"/><span id="login-authentication-key-label" translate="yes">SSH key</span>
            </label>
        </div>

        <label translate="yes" class="control-label" id="login-diff-password">Password</label>
        <input class="form-control" id="login-custom-password" type="password" />

        <label translate="yes" class="control-label login-locked">Key password</label>
        <input class="form-control locked-identity-password" type="password" autocomplete="new-password"></input>
        <span class="help-block" translate="yes">The SSH key {{#strong}}{{key}}{{/strong}} will be made available for the remainder of the session and will be available for login to other hosts as well.</span>

        <label translate="yes" class="control-label login-setup-auto">Automatic login</label>
        <div class="login-setup-checkbox-wrapper">
            <label class="checkbox-inline">
                <input type="checkbox" id="login-setup-keys"/>
                <p id="login-setup-text"/>
            </label>
        </div>

        <div class="ct-form ct-form-box" id="login-setup-extra">
        </div>
    </form>
    {{/available}}
    {{/loading}}
</div>

<div class="modal-footer">
    {{^loading}}
    {{#available}}<button class="pf-c-button pf-m-primary" translate="yes">Log in</button>{{/available}}
    <button class="pf-c-button pf-m-link" translate="yes">Cancel</button>
    {{/loading}}
</div>
