{% if order.status == 'active' %}
<div class="widget simpleTabs tabsRight">
    <div class="head">
        <h2 class="dark-icon i-services">{% trans 'VPS management' %}</h2>
    </div>

    <ul class="tabs">
        <li><a href="#tab-details">{% trans 'Details' %}</a></li>
        <li><a href="#tab-stats">{% trans 'Statistics' %}</a></li>
        <li><a href="#tab-manage">{% trans 'Manage' %}</a></li>
        <li><a href="#tab-ca-pass">{% trans 'Control panel' %}</a></li>
    </ul>

    <div class="tabs_container">

        <div class="tab_content" id="tab-details">
{% set info = client.servicesolusvm_info({"order_id":order.id}) %}

<table>
    <tbody>
        <tr>
            <td>{% trans 'State' %}:</td>
            <td><span id="vps-status">{{ info.state }}</span> <a href="client/servicesolusvm/status?order_id={{order.id}}" data-api-jsonp="onAfterStatusCheck" class="api-link bb-button bb-button-white">{% trans 'Refresh' %}</a></td>
        </tr>

        <tr>
            <td>{% trans 'Hostname' %}:</td>
            <td>
                <a target="_blank" href="http://{{ service.hostname }}">{{ service.hostname }}</a>
            </td>
        </tr>

        <tr>
            <td>{% trans 'Plan' %}:</td>
            <td>{{ service.plan }}</td>
        </tr>
        
        <tr>
            <td>{% trans 'Operating system' %}:</td>
            <td>{{ service.template }}</td>
        </tr>
        
        <tr>
            <td>{% trans 'IP address' %}:</td>
            <td><strong>{{ info.mainipaddress }}</strong></td>
        </tr>
        
        <tr>
            <td>{% trans 'Additional IP addresses' %}:</td>
            <td>{{ info.ipaddresses }}</td>
        </tr>
        
        <tr>
            <td>{% trans 'Type' %}:</td>
            <td>{{ info.type|title }}</td>
        </tr>
        
        <tr>
            <td>{% trans 'Root password' %}:</td>
            <td>{{ service.rootpassword ? service.rootpassword : '******'}}</td>
        </tr>
        
        {#
        <tr>
            <td>{% trans 'Node / ID / VMID' %}:</td>
            <td>{{ info.node }} / {{service.vserverid}} / {{service.virtid}} </td>
        </tr>
        
        <tr>
            <td>{% trans 'Client area username / password' %}:</td>
            <td>{{ service.username }} / {{ service.password }} <a href="{{service.master_url}}" target="_blank" class="">{% trans '[Go client area]' %}</a></td>
        </tr>
        
        <tr>
            <td>{% trans 'Console user / password' %}:</td>
            <td>{{ service.consoleuser }} / {{ service.consolepassword }}</td>
        </tr>
        #}
    </tbody>
</table>

            <div class="clear"></div>
        </div>

        <div class="tab_content" id="tab-manage">
                <div class="block">
                     <h2>{% trans 'Change status' %}</h2>
                    <div class="block">
                        <a href="client/servicesolusvm/reboot?order_id={{order.id}}" data-api-confirm="Are you sure?" data-api-msg="{% trans 'VPS rebooting. Refresh page after a few moments.' %}" class="bb-button bb-button-submit api-link">{% trans 'Reboot' %}</a>
                        <a href="client/servicesolusvm/boot?order_id={{order.id}}" data-api-confirm="Are you sure?" data-api-msg="{% trans 'VPS booting. Refresh page after a few moments.' %}" class="bb-button bb-button-submit api-link">{% trans 'Boot' %}</a>
                        <a href="client/servicesolusvm/shutdown?order_id={{order.id}}" data-api-confirm="Are you sure?" data-api-msg="{% trans 'VPS shutdown' %}" class="bb-button bb-button-submit api-link">{% trans 'Shutdown' %}</a>
                    </div>
                    
                    <h2>{% trans 'Change hostname' %}</h2>
                    <form method="post" action="client/servicesolusvm/set_hostname" class="api-form" data-api-msg="{% trans 'Hostname changed' %}">
                        <fieldset>
                            <p>
                                <label>{% trans 'New hostname' %}: </label>
                                <input type="text" name="hostname" value="{{service.hostname}}" placeholder="{% trans 'Enter new hostname' %}"/>
                            </p>
                            <input type="hidden" name="order_id" value="{{ order.id }}" />
                            <input class="bb-button bb-button-submit" type="submit" value="{% trans 'Change' %}">
                        </fieldset>
                    </form>

                    <h2>{% trans 'Change operating system' %}</h2>
                    <form method="post" action="client/servicesolusvm/rebuild" class="api-form" data-api-msg="{% trans 'Operating system is being changed' %}">
                        <fieldset>
                            <p>
                                <label>{% trans 'New operating system' %}: </label>
                                {% set plans = guest.servicesolusvm_get_templates({"type":info.type}) %}
                                {{ mf.selectbox('template', plans, service.template, 1, 'Select template') }}
                            </p>
                            <input type="hidden" name="order_id" value="{{ order.id }}" />
                            <input class="bb-button bb-button-submit" type="submit" value="{% trans 'Change' %}">
                        </fieldset>
                    </form>

                    <h2>{% trans 'Change root password' %}</h2>
                    <form method="post" action="client/servicesolusvm/set_root_password" class="api-form" data-api-msg="{% trans 'Root password changed' %}">
                        <fieldset>
                            <p>
                                <label>{% trans 'New password' %}: </label>
                                <input type="text" name="password" value="{{ request.domain|default(service.tld) }}" required="required" placeholder="{% trans 'Enter new root password' %}">
                            </p>
                            <input type="hidden" name="order_id" value="{{ order.id }}" />
                            <input class="bb-button bb-button-submit" type="submit" value="{% trans 'Change' %}">
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
            
        <div class="tab_content" id="tab-stats">
                {% if info.state == 'online' %}

                <div class="body" style="width: 34%; float: left;">
                    {% set bw = info.bandwidth|split(',') %}
                    <table class="tableStatic wide with-border">
                        <caption>{% trans 'Bandwidth' %}</caption>
                        <tbody>
                            <tr>
                                <td>{% trans 'Total' %}:</td>
                                <td>{{ bw[0]|size }}</td>
                            </tr>
                            <tr>
                                <td>{% trans 'Used' %}:</td>
                                <td>{{ bw[1]|size }}</td>
                            </tr>
                            <tr>
                                <td>{% trans 'Free' %}:</td>
                                <td>{{ bw[2]|size }}</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="2">
                                    <div class="progressbar" style="border: 1px solid #DDD; padding: 2px;">
                                        <div style="background-color: #82d453; width: {{bw[3]}}%; height: 20px;"></div>
                                    </div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <div class="body" style="width: 32%; float: left;">
                    {% set ram = info.memory|split(',') %}
                    <table class="tableStatic wide with-border">
                        <caption>{% trans 'Memory' %}</caption>
                        <tbody>
                            <tr>
                                <td>{% trans 'Total' %}:</td>
                                <td>{{ ram[0]|size }}</td>
                            </tr>
                            <tr>
                                <td>{% trans 'Used' %}:</td>
                                <td>{{ ram[1]|size }}</td>
                            </tr>
                            <tr>
                                <td>{% trans 'Free' %}:</td>
                                <td>{{ ram[2]|size }}</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="2">
                                    <div class="progressbar" style="border: 1px solid #DDD; padding: 2px;">
                                        <div style="background-color: #82d453; width: {{ram[3]}}%; height: 20px;"></div>
                                    </div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <div class="body" style="width: 34%; float: left;">
                    {% set hdd = info.hdd|split(',') %}
                    <table class="tableStatic wide with-border">
                        <caption>{% trans 'Disk usage' %}</caption>
                        <tbody>
                            <tr>
                                <td>{% trans 'Total' %}:</td>
                                <td>{{ hdd[0]|size }}</td>
                            </tr>
                            <tr>
                                <td>{% trans 'Used' %}:</td>
                                <td>{{ hdd[1]|size }}</td>
                            </tr>
                            <tr>
                                <td>{% trans 'Free' %}:</td>
                                <td>{{ hdd[2]|size }}</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="2">
                                    <div class="progressbar" style="border: 1px solid #DDD; padding: 2px;">
                                        <div style="background-color: #82d453; width: {{hdd[3]}}%; height: 20px;"></div>
                                    </div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                
            <div class="clear"></div>
            <div class="block" style="text-align: center;">
                <img src="{{service.master_url}}{{ info.trafficgraph }}" alt="" style="margin-bottom: 2em;">
                <img src="{{service.master_url}}{{ info.loadgraph }}" alt="" style="margin-bottom: 2em;">
                <img src="{{service.master_url}}{{ info.memorygraph }}" alt="">
            </div>
            {% else %}
            <div class="block" style="text-align: center;">
                <h2>{% trans 'Boot up server to see statistics' %}</h2>
                <a href="client/servicesolusvm/boot?order_id={{order.id}}" data-api-confirm="{% trans 'Are you sure?' %}" data-api-msg="{% trans 'VPS booting. Reload page after a few moments.' %}" class="bb-button bb-button-big bb-button-submit api-link">{% trans 'Boot' %}</a>
            </div>
            {% endif %}
        </div>

        <div class="tab_content" id="tab-ca-pass">
            
                <div class="block">
                    <h2>{% trans 'Login details' %}</h2>
                </div>

                <table>
                    <tbody>
                        <tr>
                            <td>{% trans 'Username' %}:</td>
                            <td>{{ service.username }}</td>
                        </tr>
                        <tr>
                            <td>{% trans 'Password' %}:</td>
                            <td>{{ service.password ? service.password : '*********' }}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="2">
                                <div class="aligncenter">
                                    <a href="{{service.master_url}}" target="_blank" class="bb-button bb-button-submit">{% trans 'Open control panel' %}</a>
                                    <a href="#" class="bb-button bb-button-submit" onclick="$('#changepass').slideToggle(); return false;">{% trans 'Change password' %}</a>
                                </div>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            
            <div class="block" style="display: none;" id="changepass">
                <h2>{% trans 'Change client area password' %}</h2>
                <form method="post" action="client/servicesolusvm/change_password" class="api-form" data-api-msg="{% trans 'Client area password changed' %}">
                    <fieldset>
                        <p>
                            <label>{% trans 'New password' %}: </label>
                            <input type="text" name="password" value="" placeholder="{% trans 'Enter new password' %}"/>
                        </p>
                        <input type="hidden" name="order_id" value="{{ order.id }}" />
                        <input class="bb-button bb-button-submit" type="submit" value="{% trans 'Change' %}">
                    </fieldset>
                </form>
            </div>
        </div>

    </div>

<script type="text/javascript">
    function onAfterStatusCheck(result)
    {
        $('#vps-status').text(result);
    }
</script>
{% endif %}