{% 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/#{service.domain_order_id}"|url }}'>{{ 'Manage Domain'|trans }}</a>
                        {% endif %}
                        <a class="btn btn-primary" href="{{ 'servicehosting/get_login_url'|api_url(query: { 'order_id':  order.id }) }}" {{ fb_api_link({callback: '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 action="{{ 'servicehosting/change_password'|api_url }}" method="post" {{ fb_api_form({message: 'Password Changed'|trans}) }}>
                    <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 action="{{ 'servicehosting/change_domain'|api_url }}" method="post" {{ fb_api_form({message: 'Domain Name Changed'|trans}) }}>
                    <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 method="post" action="{{ 'servicehosting/change_username'|api_url }}" {{ fb_api_form({message: 'Username Changed'|trans}) }}>
                    <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>
    function onAfterLoginLinkCreated(url){
        window.open(url, "_blank");
    }
</script>
{% endblock %}
{% endif %}
