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

    <ul class="tabs">
        <li><a href="#tab-details">{{ 'Details'|trans }}</a></li>
        <li><a href="#tab-change-pass">{{ 'Password'|trans }}</a></li>
        <li><a href="#tab-change-domain">{{ 'Domain'|trans }}</a></li>
        <li><a href="#tab-change-username">{{ 'Username'|trans }}</a></li>
    </ul>

    <div class="tabs_container">
        <div class="tab_content" id="tab-details">
            <div class="grid_6 alpha">
                <div class="box">
                    <h2>{{ 'Details'|trans }}</h2>
                    <div class="block">
                    {% set server = service.server %}
                    {% set hp = service.hosting_plan %}
                        <table>
                            <tbody>
                                <tr>
                                    <td>{{ 'Domain'|trans }}:</td>
                                    <td>
                                        <a target="_blank" href="http://{{ service.domain }}">{{ service.domain }}</a>
                                    </td>
                                </tr>

                                <tr>
                                    <td>{{ 'Server IP'|trans }}:</td>
                                    <td>{{ server.ip }}</td>
                                </tr>

                                <tr>
                                    <td>{{ 'Server Hostname'|trans }}:</td>
                                    <td>{{ server.hostname }}</td>
                                </tr>

                                <tr>
                                    <td>{{ 'Username'|trans }}:</td>
                                    <td>{{ service.username }}</td>
                                </tr>

                                <tr>
                                    <td>{{ 'Password'|trans }}:</td>
                                    <td>******</td>
                                </tr>

                                <tr>
                                    <td>{{ 'Hosting plan'|trans }}:</td>
                                    <td>{{ hp.name }}</td>
                                </tr>

                                <tr>
                                    <td>{{ 'Bandwidth'|trans }}:</td>
                                    <td>{{ hp.bandwidth }} MB / {{ 'per month'|trans }}</td>
                                </tr>
                                <tr>
                                    <td>{{ 'Disk quota'|trans }}:</td>
                                    <td>{{ hp.quota }} MB</td>
                                </tr>

                            </tbody>
                        </table>

                        <p>
                        {% if service.domain_order_id %}
                        <a class="bb-button" href="{{ '/order/service/manage'|link }}/{{ service.domain_order_id }}">{{ 'Manage domain'|trans }}</a>
                        {% endif %}

                        <a class="bb-button bb-button-submit" href="{{ server.cpanel_url }}" target="_blank">{{ 'Jump to cPanel'|trans }}</a>

                        {% if service.reseller %}
                        <a class="bb-button bb-button-submit" href="{{ server.reseller_cpanel_url }}" target="_blank">{{ 'Reseller control panel'|trans }}</a>
                        {% endif %}
                        </p>
                    </div>
                </div>
            </div>

            <div class="grid_6 omega">

                <div class="box">
                    <h2>{{ 'Nameservers'|trans }}</h2>
                    <div class="block">
                        <table>
                            <tbody>
                                <tr>
                                    <td>{{ 'Nameserver 1'|trans }}:</td>
                                    <td>{{ server.ns1 }}</td>
                                </tr>

                                <tr>
                                    <td>{{ 'Nameserver 2'|trans }}:</td>
                                    <td>{{ server.ns2 }}</td>
                                </tr>

                                {% if server.ns3 %}
                                <tr>
                                    <td>{{ 'Nameserver 3'|trans }}:</td>
                                    <td>{{ server.ns3 }}</td>
                                </tr>
                                {% endif %}

                                {% if server.ns4 %}
                                <tr>
                                    <td>{{ 'Nameserver 4'|trans }}:</td>
                                    <td>{{ server.ns4 }}</td>
                                </tr>
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="box">
                    <h2>{{ 'FTP details'|trans }}</h2>
                    <div class="block">
                        <p>{{ 'Use these details to connect to your FTP account.'|trans }}</p>
                        <table>
                            <tbody>

                                <tr>
                                    <td>{{ 'FTP IP'|trans }}:</td>
                                    <td>{{ server.ip }}</td>
                                </tr>

                                <tr>
                                    <td>{{ 'FTP Username'|trans }}:</td>
                                    <td>{{ service.username }}</td>
                                </tr>

                                <tr>
                                    <td>{{ 'FTP Password'|trans }}:</td>
                                    <td>******</td>
                                </tr>

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

        <div class="tab_content box" id="tab-change-pass">
            <h2>{{ 'Change account password'|trans }}</h2>
            <div class="block">
                <p>{{ 'Change your FTP cPanel SSH password.'|trans }}</p>
                <form action="" method="post" id="change-password">
                    <fieldset>
                        <legend>{{ 'Change account password'|trans }}</legend>
                        <p>
                            <label>{{ 'Password'|trans }}: </label>
                            <input type="password" name="password" value="{{ request.password }}" required="required">
                        </p>

                        <p>
                            <label>{{ 'Password Confirm'|trans }}: </label>
                            <input type="password" name="password_confirm" value="{{ request.password_confirm }}" required="required">
                        </p>

                        <input type="hidden" name="order_id" value="{{ order.id }}">
                        <input class="bb-button bb-button-submit" type="submit" value="{{ 'Change password'|trans }}">
                    </fieldset>
                </form>
            </div>
        </div>

        <div class="tab_content box" id="tab-change-username">
            <h2>{{ 'Change username'|trans }}</h2>
            <div class="block">
                <form action="" method="post" id="change-username">
                    <fieldset>
                        <legend>{{ 'Change username'|trans }}</legend>
                        <p>
                            <label>{{ 'Username'|trans }}: </label>
                            <input type="text" name="username" value="{{ request.username|default(service.username) }}" required="required">
                        </p>

                        <input type="hidden" name="order_id" value="{{ order.id }}">
                        <input class="bb-button bb-button-submit" type="submit" value="{{ 'Change'|trans }}">
                    </fieldset>
                </form>
            </div>
        </div>

        <div class="tab_content box" id="tab-change-domain">
            <h2>{{ 'Change domain'|trans }}</h2>
            <div class="block">
                <form action="" method="post" id="change-domain">
                    <fieldset>
                        <legend>{{ 'Change domain'|trans }}</legend>
                        <p>
                            <label>{{ 'Domain'|trans }}: </label>
                            <input type="text" name="sld" value="{{ request.domain|default(service.sld) }}" required="required" style="width: 250px;">
                            <input type="text" name="tld" value="{{ request.domain|default(service.tld) }}" required="required" style="width: 50px;">
                        </p>

                        <input type="hidden" name="order_id" value="{{ order.id }}">
                        <input class="bb-button bb-button-submit" type="submit" value="{{ 'Change'|trans }}">
                    </fieldset>
                </form>
            </div>
        </div>

    </div>

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

<script type="text/javascript">
$(function() {
    $('#change-domain').bind('submit', function(event) {
        bb.post(
            'client/servicehosting/change_domain',
            $(this).serialize(),
            function(result) {
                bb.msg('Domain name was changed');
            }
        );

        return false;
    });

    $('#change-username').bind('submit', function(event) {
        bb.post(
            'client/servicehosting/change_username',
            $(this).serialize(),
            function(result) {
                bb.msg('Account Username was changed');
            }
        );

        return false;
    });

    $('#change-password').bind('submit', function(event) {
        bb.post(
            'client/servicehosting/change_password',
            $(this).serialize(),
            function(result) {
                bb.msg('Account Password was changed');
            }
        );

        return false;
    });
});
</script>
{% endif %}