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

<div class="row">
    <article class="span12 data-block">
        <div class="data-container">
            <header>
                <h2>{{ 'VPS management'|trans }}</h2>
                <ul class="data-header-actions">
                    <li class="domain-tabs active"><a href="#tab-details" class="btn btn-inverse btn-alt">{{ 'Details'|trans }}</a></li>
                    <li class="domain-tabs"><a href="#tab-stats" class="btn btn-inverse btn-alt">{{ 'Statistics'|trans }}</a></li>
                    <li class="domain-tabs"><a href="#tab-manage" class="btn btn-inverse btn-alt">{{ 'Manage'|trans }}</a></li>
                    <li class="domain-tabs"><a href="#tab-ca-pass" class="btn btn-inverse btn-alt">{{ 'Control Panel'|trans }}</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>{{ 'State'|trans }}:</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">{{ 'Refresh'|trans }}</a>
                            </td>
                        </tr>

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

                        <tr>
                            <td>{{ 'Plan'|trans }}:</td>
                            <td>{{ service.plan }}</td>
                        </tr>

                        <tr>
                            <td>{{ 'Operating system'|trans }}:</td>
                            <td>{{ service.template }}</td>
                        </tr>

                        <tr>
                            <td>{{ 'IP address'|trans }}:</td>
                            <td><strong>{{ info.mainipaddress }}</strong></td>
                        </tr>

                        <tr>
                            <td>{{ 'Additional IP addresses'|trans }}:</td>
                            <td>{{ info.ipaddresses }}</td>
                        </tr>

                        <tr>
                            <td>{{ 'Type'|trans }}:</td>
                            <td>{{ info.type|title }}</td>
                        </tr>

                        <tr>
                            <td>{{ 'Root password'|trans }}:</td>
                            <td>{{ service.rootpassword ? service.rootpassword : '******'}}</td>
                        </tr>

                        {#
                        <tr>
                            <td>{{ 'Node / ID / VMID'|trans }}:</td>
                            <td>{{ info.node }} / {{service.vserverid}} / {{service.virtid}} </td>
                        </tr>

                        <tr>
                            <td>{{ 'Client area username / password'|trans }}:</td>
                            <td>{{ service.username }} / {{ service.password }} <a href="{{service.master_url}}" target="_blank" class="">{{ '[Go client area]'|trans }}</a></td>
                        </tr>

                        <tr>
                            <td>{{ 'Console user / password'|trans }}:</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>{{ 'Bandwidth'|trans }}</caption>
                            <tbody>
                            <tr>
                                <td>{{ 'Total'|trans }}:</td>
                                <td>{{ bw[0]|size }}</td>
                            </tr>
                            <tr>
                                <td>{{ 'Used'|trans }}:</td>
                                <td>{{ bw[1]|size }}</td>
                            </tr>
                            <tr>
                                <td>{{ 'Free'|trans }}:</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>{{ 'Memory'|trans }}</caption>
                            <tbody>
                            <tr>
                                <td>{{ 'Total'|trans }}:</td>
                                <td>{{ ram[0]|size }}</td>
                            </tr>
                            <tr>
                                <td>{{ 'Used'|trans }}:</td>
                                <td>{{ ram[1]|size }}</td>
                            </tr>
                            <tr>
                                <td>{{ 'Free'|trans }}:</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>{{ 'Disk usage'|trans }}</caption>
                            <tbody>
                            <tr>
                                <td>{{ 'Total'|trans }}:</td>
                                <td>{{ hdd[0]|size }}</td>
                            </tr>
                            <tr>
                                <td>{{ 'Used'|trans }}:</td>
                                <td>{{ hdd[1]|size }}</td>
                            </tr>
                            <tr>
                                <td>{{ 'Free'|trans }}:</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>{{ 'Boot up server to see statistics'|trans }}</h2>
                        <a class="btn btn-primary api-link" href="{{ 'api/client/servicesolusvm/boot'|link({ 'order_id': order.id }) }}" data-api-confirm="{{ 'Are you sure?'|trans }}" data-api-msg="{{ 'VPS booting. Reload page after a few moments.'|trans }}">{{ 'Boot'|trans }}</a>
                    </div>
                    {% endif %}

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

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

                    <div class="control-group controls-row">
                        <h2>{{ 'Change hostname'|trans }}</h2>
                        <form method="post" action="{{ 'api/client/servicesolusvm/set_hostname'|link }}" class="api-form" data-api-msg="{{ 'Hostname changed'|trans }}">
                            <fieldset>
                                <p>
                                    <label>{{ 'New hostname'|trans }}: </label>
                                    <input type="text" name="hostname" value="{{ service.hostname }}" placeholder="{{ 'Enter new hostname'|trans }}"/>
                                </p>
                                <input type="hidden" name="order_id" value="{{ order.id }}" />
                                <button class="btn btn-primary" type="submit" value="{{ 'Change'|trans }}">{{ 'Change hostname'|trans }}</button>
                            </fieldset>
                        </form>
                    </div>

                    <div class="control-group controls-row">
                        <h2>{{ 'Change operating system'|trans }}</h2>
                        <form method="post" action="{{ 'api/client/servicesolusvm/rebuild'|link }}" class="api-form" data-api-msg="{{ 'Operating system is being changed'|trans }}">
                            <fieldset>
                                <p>
                                    <label>{{ 'New operating system'|trans }}: </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="{{ 'Change'|trans %}">{{ 'Change OS'|trans }}</button>
                            </fieldset>
                        </form>
                    </div>

                    <div class="control-group controls-row">
                        <h2>{{ 'Change root password'|trans }}</h2>
                        <form method="post" action="{{ 'api/client/servicesolusvm/set_root_password'|link }}" class="api-form" data-api-msg="{{ 'Root password changed'|trans }}">
                            <fieldset>
                                <p>
                                    <label>{{ 'New password'|trans }}: </label>
                                    <input type="text" name="password" value="{{ request.domain|default(service.tld) }}" required="required" placeholder="{{ 'Enter new root password'|trans }}">
                                </p>
                                <input type="hidden" name="order_id" value="{{ order.id }}" />
                                <button class="btn btn-primary" type="submit" value="{{ 'Change'|trans }}">{{ 'Change password'|trans }}</button>
                            </fieldset>
                        </form>
                    </div>
                </div>
                <div class="tab-pane" id="tab-ca-pass">
                        <h2>{{ 'Login details'|trans }}</h2>
                    <table class="table table-striped table-bordered table-condensed">
                        <tbody>
                        <tr>
                            <td>{{ 'Username'|trans }}:</td>
                            <td>{{ service.username }}</td>
                        </tr>
                        <tr>
                            <td>{{ 'Password'|trans }}:</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">{{ 'Open control panel'|trans }}</a>
                                    <a href="#" class="btn btn-primary" onclick="$('#changepass').slideToggle(); return false;">{{ 'Change password'|trans }}</a>
                                </div>
                            </td>
                        </tr>
                        </tfoot>
                    </table>

                    <div class="control-group controls-row">
                        <div class="block" style="display: none;" id="changepass">
                            <h2>{{ 'Change client area password'|trans }}</h2>
                            <form method="post" action="{{ 'api/client/servicesolusvm/change_password'|link }}" class="api-form" data-api-msg="{{ 'Client area password changed'|trans }}">
                                <fieldset>
                                    <p>
                                        <label>{{ 'New password'|trans }}: </label>
                                        <input type="text" name="password" value="" placeholder="{{ 'Enter new password'|trans }}"/>
                                    </p>
                                    <input type="hidden" name="order_id" value="{{ order.id }}" />
                                    <button class="btn btn-primary" type="submit" value="{{ 'Change'|trans }}">{{ 'Change password'|trans }}</button>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>

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

<script>
    $(function() {
        $('.domain-tabs a').bind('click', function(e) {
            e.preventDefault();
            $(this).tab('show');
        });

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