{% if order.status == 'active' %}

<div class="row">
    <article class="span12 data-block">
        <div class="data-container">
            <header>
                <h2>{% trans 'VPS management' %}</h2>
                <ul class="data-header-actions">
                    <li class="domain-tabs active"><a href="#tab-details" class="btn btn-inverse btn-alt">{% trans 'Details' %}</a></li>
                    <li class="domain-tabs"><a href="#tab-stats" class="btn btn-inverse btn-alt">{% trans 'Statistics' %}</a></li>
                    <li class="domain-tabs"><a href="#tab-manage" class="btn btn-inverse btn-alt">{% trans 'Manage' %}</a></li>
                    <li class="domain-tabs"><a href="#tab-ca-pass" class="btn btn-inverse btn-alt">{% trans 'Control Panel' %}</a></li>
                </ul>
            </header>
            <section class="tab-content">
                <div class="tab-pane active" id="tab-details">
                    {% set info = client.servicesolusvm_info({"order_id":order.id}) %}
                    <table class="table table-striped table-bordered table-condensed">
                        <tbody>
                        <tr>
                            <td>{% trans 'State' %}:</td>
                            <td>
                                <span id="vps-status" class="label label- label-{% if info.state == 'online'%}success{% elseif info.state == 'offline'%}inverse{% endif %}">{{ info.state }}</span>
                                <span class="span1 offset1">&nbsp;</span>
                                <a href="{{ 'api/client/servicesolusvm/status'|link({'order_id' : order.id}) }}" data-api-jsonp="onAfterStatusCheck" class="api-link btn btn-primary btn-mini">{% 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>
                <div class="tab-pane" id="tab-stats">
                    {% if info.state == 'online' %}

                    <div class="body" style="width: 34%; float: left;">
                        {% set bw = info.bandwidth|split(',') %}
                        <table class="table table-striped table-bordered table-condensed">
                            <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="progress progress-{% if ram[3] < 50 %}success{% elseif ram[3] < 75%}warning{% else %}danger{% endif %}" >
                                        <div class="bar" style="width: {{bw[3]}}%;"></div>
                                    </div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>

                    <div class="body" style="width: 32%; float: left;">
                        {% set ram = info.memory|split(',') %}
                        <table class="table table-striped table-bordered table-condensed">
                            <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="progress progress-{% if ram[3] < 50 %}success{% elseif ram[3] < 75%}warning{% else %}danger{% endif %}" >
                                        <div class="bar" style="width: {{ram[3]}}%;"></div>
                                    </div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>

                    <div class="body" style="width: 34%; float: left;">
                        {% set hdd = info.hdd|split(',') %}
                        <table class="table table-striped table-bordered table-condensed">
                            <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="progress progress-{% if ram[3] < 50 %}success{% elseif ram[3] < 75%}warning{% else %}danger{% endif %}" >
                                        <div class="bar" style="width: {{hdd[3]}}%;"></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 class="btn btn-primary api-link" href="{{ 'api/client/servicesolusvm/boot'|link({'order_id' : order.id}) }}" data-api-confirm="{% trans 'Are you sure?' %}" data-api-msg="{% trans 'VPS booting. Reload page after a few moments.' %}">{% trans 'Boot' %}</a>
                    </div>
                    {% endif %}

                </div>
                <div class="tab-pane" id="tab-manage">

                    <div class="control-group controls-row">
                        <h2>{% trans 'Change status' %}</h2>
                        <a href="{{ 'api/client/servicesolusvm/reboot'|link({'order_id' : order.id}) }}" data-api-confirm="Are you sure?" data-api-msg="{% trans 'VPS rebooting. Refresh page after a few moments.' %}" class="btn btn-warning api-link">{% trans 'Reboot' %}</a>
                        <a href="{{ 'api/client/servicesolusvm/boot'|link({'order_id' : order.id}) }}" data-api-confirm="Are you sure?" data-api-msg="{% trans 'VPS booting. Refresh page after a few moments.' %}" class="btn btn-success api-link">{% trans 'Boot' %}</a>
                        <a href="{{ 'api/client/servicesolusvm/shutdown'|link({'order_id' : order.id}) }}" data-api-confirm="Are you sure?" data-api-msg="{% trans 'VPS shutdown' %}" class="btn btn-danger api-link">{% trans 'Shutdown' %}</a>
                    </div>

                    <div class="control-group controls-row">
                        <h2>{% trans 'Change hostname' %}</h2>
                        <form method="post" action="{{ 'api/client/servicesolusvm/set_hostname'|link }}" 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 }}" />
                                <button class="btn btn-primary" type="submit" value="{% trans 'Change' %}">{% trans 'Change hostname' %}</button>
                            </fieldset>
                        </form>
                    </div>

                    <div class="control-group controls-row">
                        <h2>{% trans 'Change operating system' %}</h2>
                        <form method="post" action="{{ 'api/client/servicesolusvm/rebuild'|link }}" 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 }}" />
                                <button class="btn btn-primary" type="submit" value="{% trans 'Change' %}">{% trans 'Change OS' %}</button>
                            </fieldset>
                        </form>
                    </div>

                    <div class="control-group controls-row">
                        <h2>{% trans 'Change root password' %}</h2>
                        <form method="post" action="{{ 'api/client/servicesolusvm/set_root_password'|link }}" 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 }}" />
                                <button class="btn btn-primary" type="submit" value="{% trans 'Change' %}">{% trans 'Change password' %}</button>
                            </fieldset>
                        </form>
                    </div>
                </div>
                <div class="tab-pane" id="tab-ca-pass">
                        <h2>{% trans 'Login details' %}</h2>
                    <table class="table table-striped table-bordered table-condensed">
                        <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="btn btn-primary">{% trans 'Open control panel' %}</a>
                                    <a href="#" class="btn btn-primary" onclick="$('#changepass').slideToggle(); return false;">{% trans 'Change password' %}</a>
                                </div>
                            </td>
                        </tr>
                        </tfoot>
                    </table>

                    <div class="control-group controls-row">
                        <div class="block" style="display: none;" id="changepass">
                            <h2>{% trans 'Change client area password' %}</h2>
                            <form method="post" action="{{ 'api/client/servicesolusvm/change_password'|link }}" 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 }}" />
                                    <button class="btn btn-primary" type="submit" value="{% trans 'Change' %}">{% trans 'Change password' %}</button>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>

            </section>
        </div>
    </article>
</div>


<script type="text/javascript">
    $(function() {
        $('.domain-tabs a').bind('click',function(e){
            e.preventDefault();
            $(this).tab('show');
        });
        function onAfterStatusCheck(result)
        {
            $('#vps-status').text(result);
        }
    });
</script>
{% endif %}