{% load i18n %}
{% load staticfiles %}
{% get_current_language as LANGUAGE_CODE %}
<div class="content">
    <table>
        <tr>
            <th>{% trans "Protocol" %}:</th>
            <td>

                <div class="boxhelp">
                    <div class="help">
                        <div class="icon">
                            <img src="{% static "icons/information-frame.png" %}" alt="{% trans "Help" %}" />
                        </div>
                        <div class="boxhelp-box">
                            {% if i.template.os_type == 'linux' %}
                            <p>{% blocktrans %}You can access Linux machines through
                            the SSH protocol (we recommend
                            <a href="http://www.chiark.greenend.org.uk/~sgtatham/putty/">
                                PuTTY</a> for Windows and OpenSSH for all other systems).
                            {% endblocktrans %}</p>
                            {% if i.template.access_type == 'nx' %}
                            <p>{% blocktrans %}Graphical log in is also supported with
                            the <a href="http://www.nomachine.com/download.php">
                            NoMachine NX Client</a> application.{% endblocktrans %}</p>
                            {% endif %}
                            {% else %}
                            <p>{% blocktrans %}You can access Windows machines through
                            the remote desktop protocol.{% endblocktrans %}</p>
                            <p>{% blocktrans %}We recommend the built-in remote desktop
                            client for Windows and Remmina for Linux.{% endblocktrans %}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {{i.template.access_type|upper}}
            </td>
        </tr>
        <tr{% if i.is_ipv6 %} class="faded"{% endif %}>
            <th>{% trans "IPv4 Host" %}{% if i.is_ipv6 %} ({% trans "You are using IPv6" %}){% endif %}:</th>
            <td>{{ i.hostname_v4 }}<strong>:{{ i.port_v4 }}</strong></td>
        </tr>
        <tr{% if not i.is_ipv6 %} style="display: none"{% endif %}>
            <th>{% trans "IPv6 Host" %}{% if not i.is_ipv6 %} ({% trans "You are using IPv4" %}){% endif %}:</th>
            <td>{{ i.hostname_v6 }}<strong>:{{ i.port_v6 }}</strong></td>
        </tr>
        <tr>
            <th>{% trans "Username" %}:</th>
            <td>cloud</td>
        </tr>
        <tr>
            <th>{% trans "Password" %}:</th>
            <td><input id="vm-password" type="password" class="hidden-password" value="{{ i.pw }}" /></td>
        </tr>
    </table>
    <script type="text/javascript">
        $('#vm-password').click(function(e) {
            if(e.offsetX > 130) {
                if ($(this).attr('type') == 'password') {
                    $(this).attr('type', 'text');
                    $(this).addClass('shown');
                    this.select();
                } else {
                    $(this).attr('type', 'password');
                    $(this).removeClass('shown');
                    this.selectionStart = this.selectionEnd = 0;
                }
            }
        });
    </script>
</div>
