{% if order.status == 'active' %}
<div class="card mb-4">
    <div class="card-header">
        <h2>{{ 'Manage hosting account'|trans }}</h2>
    </div>
    <div class="card-body">
        <ul class="nav nav-tabs mb-2">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#details">{{ 'Details'|trans }}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#password">{{ 'Password'|trans }}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#domain">{{ 'Domain'|trans }}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#username">{{ 'Username'|trans }}</a>
            </li>
        </ul>
        <div class="tab-content">
            {# Hosting details #}
            <div class="tab-pane fade active show" role="tabpanel" id="details">
                <h3>{{ 'Details'|trans }}</h3>
                {% set server = service.server %}
                {% set hp = service.hosting_plan %}
                <table class="table table-striped table-bordered table-sm">
                    <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>
                <div class="control-group">
                    <div class="controls">
                        {% if service.domain_order_id %}
                            <a class="btn btn-primary" href="{{ '/order/service/manage'|link }}/{{ service.domain_order_id }}">{{ 'Manage domain'|trans }}</a>
                        {% endif %}
                        <a class="btn btn-primary api-link" href="{{ 'api/client/servicehosting/get_login_url'|link({ 'order_id':  order.id, 'CSRFToken': CSRFToken }) }}" data-api-jsonp="onAfterLoginLinkCreated">{{ 'Login to control panel'|trans }}</a>
                    </div>
                </div>
            </div>
            {# Hosting password #}
            <div class="tab-pane fade" role="tabpanel" id="password">
                <h3>{{ 'Change your control panel/FTP/SSH password'|trans }}</h3>
                <form class="api-form" action="{{ 'api/client/servicehosting/change_password'|link }}" method="post" data-api-msg="{{ 'Password changed'|trans }}">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <fieldset>
                        <div class="control-group">
                            <label class="col-form-label" >{{ 'Password'|trans }}: </label>
                            <div class="controls">
                                <input class="form-control" type="password" name="password" value="{{ request.password }}" required="required">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="col-form-label" >{{ 'Password confirm'|trans }}: </label>
                            <div class="controls">
                                <input class="form-control" type="password" name="password_confirm" value="{{ request.password_confirm }}" required="required">
                            </div>
                        </div>

                        <input type="hidden" name="order_id" value="{{ order.id }}">
                        <div class="control-group mt-1">
                            <div class="controls">
                                <button class="btn btn-primary" type="submit" value="{{ 'Change password'|trans }}">{{ 'Change password'|trans }}</button>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
            {# Hosting domain #}
            <div class="tab-pane fade" role="tabpanel" id="domain">
                <h3>{{ 'Change domain'|trans }}</h3>
                <form class="api-form" action="{{ 'api/client/servicehosting/change_domain'|link }}" method="post" data-api-msg="{{ 'Domain name changed'|trans }}">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <fieldset>
                        <div class="control-group">
                            <label class="col-form-label" >{{ 'New domain'|trans }}: </label>
                            <div class="controls row">
                                <input class="form-control w-50 ms-2" type="text" name="sld" value="{{ request.domain|default(service.sld) }}" required="required" class="span2">
                                <input class="form-control w-25" type="text" name="tld" value="{{ request.domain|default(service.tld) }}" required="required" class="span1">
                            </div>
                        </div>
                        <input type="hidden" name="order_id" value="{{ order.id }}">
                        <div class="control-group mt-1">
                            <div class="controls">
                                <button class="btn btn-primary" type="submit" value="{{ 'Change domain'|trans }}">{{ 'Change domain'|trans }}</button>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
            {# Hosting username #}
            <div class="tab-pane fade" role="tabpanel" id="username">
                <h3>{{ 'Change username'|trans }}</h3>
                <form class="api-form" action="{{ 'api/client/servicehosting/change_username'|link }}" method="post" data-api-msg="{{ 'Username changed'|trans }}">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <fieldset>
                    <div class="control-group">
                        <label class="col-form-label" >{{ 'Username'|trans }}: </label>
                        <div class="controls">
                            <input class="form-control" type="text" name="username" value="{{ request.username|default(service.username) }}" required="required">
                        </div>
                    </div>

                        <input type="hidden" name="order_id" value="{{ order.id }}">
                        <div class="control-group mt-1">
                            <div class="controls">
                                <button class="btn btn-primary" type="submit" value="{{ 'Change username'|trans }}">{{ 'Change username'|trans }}</button>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>

{% block js %}
<script type="text/javascript">
    function onAfterLoginLinkCreated(url){
        window.open(url, "_blank");
    }
</script>
{% endblock %}
{% endif %}
