{% if order.status == 'active' %}
    <div class="card mb-4">
        <div class="card-header">
            <div class="flex-column align-items-center py-2">
                <h1 class="mb-1">{{ 'Manage'|trans }} {{ service.domain }}</h1>
            </div>
            <nav class="nav nav-tabs card-header-tabs">
                <a class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details-tab-pane"
                   href="#">{{ 'Details'|trans }}</a>
                <a class="nav-link" id="protect-tab" data-bs-toggle="tab" data-bs-target="#protect-tab-pane"
                   href="#">{{ 'Protection'|trans }}</a>
                <a class="nav-link" id="privacy-tab" data-toggle="tab" data-bs-toggle="tab"
                   data-bs-target="#privacy-tab-pane" href="#">{{ 'Privacy'|trans }}</a>
                <a class="nav-link" id="ns-tab" data-toggle="tab" data-bs-toggle="tab" data-bs-target="#ns-tab-pane"
                   href="#">{{ 'Nameservers'|trans }}</a>
                <a class="nav-link" id="whois-tab" data-toggle="tab" data-bs-toggle="tab"
                   data-bs-target="#whois-tab-pane" href="#">{{ 'Whois'|trans }}</a>
                <a class="nav-link" id="transfer-tab" data-toggle="tab" data-bs-toggle="tab"
                   data-bs-target="#transfer-tab-pane" href="#">{{ 'Transfer'|trans }}</a>
            </nav>
        </div>
        <div class="tab-content">
            {# Domain details #}
            <div class="card-body tab-pane active" id="details-tab-pane" role="tabpanel" tabindex="0">
                <div class="tab-pane container active" id="details">
                    <h5 class="mb-3 mt-1">{{ 'Domain Details'|trans }}</h5>
                    <div class="d-flex justify-content-around py-3">
                        <div class="d-flex flex-column">
                            <span class="fs-6 text-muted">{{ 'Name'|trans }}</span>
                            <a class="fs-4" target="_blank" href="http://{{ service.domain }}">{{ service.domain }}</a>
                        </div>
                        <div class="d-flex flex-column">
                            <span class="fs-6 text-muted">{{ 'Expires on'|trans }}</span>
                            <span class="fs-4">{{ service.expires_at|format_date(pattern="MMM dd, yyyy") }}</span>
                        </div>
                        <div class="d-flex flex-column">
                            <span class="fs-6 text-muted">{{ 'Registered on'|trans }}</span>
                            <span class="fs-4">{{ service.registered_at|format_date(pattern="MMM dd, yyyy") }}</span>
                        </div>
                    </div>
                </div>
            </div>

            {# Domain protection #}
            <div class="card-body tab-pane" id="protect-tab-pane" role="tabpanel" tabindex="0">
                <div class="mb-3">
                    <h5 class="mt-1 mb-1">{{ 'Domain Protection'|trans }}</h5>
                    <span class="small text-secondary">{{ 'Domain locking is a security feature which prevents your domain name from being transferred without first unlocking it. When this is enabled, a domain cannot be transferred even with the transfer code.'|trans }}</span>
                </div>
                <button class="btn btn-danger icon-link" type="button" id="domain-unlock" {% if service.locked == 0 %}style="display:none;"{% endif %}>
                    <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 13C11.1 13 12 13.89 12 15C12 16.11 11.11 17 10 17S8 16.11 8 15 8.9 13 10 13M18 1C15.24 1 13 3.24 13 6V8H4C2.9 8 2 8.9 2 10V20C2 21.1 2.9 22 4 22H16C17.1 22 18 21.1 18 20V10C18 8.9 17.1 8 16 8H15V6C15 4.34 16.34 3 18 3S21 4.34 21 6V8H23V6C23 3.24 20.76 1 18 1M16 10V20H4V10H16Z" /></svg>
                    {{ 'Unlock'|trans }}
                </button>
                <button class="btn btn-primary icon-link" type="button" id="domain-lock" {% if service.locked == 1 %}style="display:none;"{% endif %}>
                    <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,17C10.89,17 10,16.1 10,15C10,13.89 10.89,13 12,13A2,2 0 0,1 14,15A2,2 0 0,1 12,17M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10C4,8.89 4.89,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" /></svg>
                    {{ 'Lock'|trans }}
                </button>
            </div>

            {# Domain privacy settings #}
            <div class="card-body tab-pane" id="privacy-tab-pane" role="tabpanel" tabindex="0">
                <div class="mb-3">
                    <h5 class="mt-1 mb-1">{{ 'Domain Privacy Settings'|trans }}</h5>
                    <span class="small text-muted">{{ 'If you would like to hide domain contact information which is shown on WHOIS you can enable privacy protection. Once domain privacy protection is enabled no one will know who registered this service. And once you decide to disable privacy protection, information that is listed above on "Update Domain Contact Details" section will be seen on domain WHOIS again.'|trans }}</span>
                </div>
                <button class="btn btn-warning" type="button" id="domain-disable-pp" {% if service.privacy == 0 %}style="display:none;"{% endif %}>{{ 'Disable Privacy protection'|trans }}</button>
                <button class="btn btn-primary" type="button" id="domain-enable-pp" {% if service.privacy == 1 %}style="display:none;"{% endif %}>{{ 'Enable Privacy protection'|trans }}</button>
            </div>

            {# Domain nameservers #}
            <div class="card-body tab-pane" id="ns-tab-pane" role="tabpanel" tabindex="0">
                <div class="mb-3">
                    <h5 class="mt-1 mb-1">{{ 'Update Nameservers'|trans }}</h5>
                    <span class="small text-muted">{{ 'If you would like to host this domain with another company you can update nameservers.'|trans }}</span>
                </div>

                <form method="post" action="{{ 'servicedomain/update_nameservers'|api_url }}" {{ fb_api_form({message: 'Nameservers Updated'|trans}) }}>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3 row">
                                <div class="col-md-5">
                                    <label for="ns1" class="form-label">{{ 'Nameserver 1'|trans }}</label>
                                    <input class="form-control" type="text" name="ns1" id="ns1"
                                           value="{{ request.ns1|default(service.ns1) }}" required>
                                </div>
                                <div class="col-md-5">
                                    <label for="ns2" class="form-label">{{ 'Nameserver 2'|trans }}</label>
                                    <input class="form-control" type="text" name="ns2" id="ns2"
                                           value="{{ request.ns2|default(service.ns2) }}" required>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <div class="col-md-5">
                                    <label for="ns3" class="form-label">{{ 'Nameserver 3'|trans }}</label>
                                    <input class="form-control" type="text" name="ns3" id="ns3"
                                           value="{{ request.ns3|default(service.ns3) }}">
                                </div>
                                <div class="col-md-5">
                                    <label for="ns4" class="form-label">{{ 'Nameserver 4'|trans }}</label>
                                    <input class="form-control" type="text" name="ns4" id="ns4"
                                           value="{{ request.ns4|default(service.ns4) }}">
                                </div>
                            </div>
                            <input type="hidden" name="order_id" value="{{ order.id }}">
                            <button class="btn btn-primary" type="submit">{{ 'Update'|trans }}</button>
                        </div>
                    </div>
                </form>
            </div>

            {# Domain WHOIS #}
            <div class="card-body tab-pane" id="whois-tab-pane" role="tabpanel" tabindex="0">
                <div class="mb-3">
                    <h5 class="mt-1 mb-1">{{ 'Update Domain Contact Details'|trans }}</h5>
                    <span class="small text-secondary">{{ 'Domain contact details will be displayed once someone will check WHOIS output (which is public) of your service. This will update Technical, Billing and Admin contacts for this service. You can enable domain privacy protection if you want to hide your public WHOIS information.'|trans }}</span>
                </div>
                <form method="post" action="{{ 'servicedomain/update_contacts'|api_url }}" {{ fb_api_form({message: 'Contact Details Updated'|trans}) }}>
                    <div class="mb-3 row">
                        <div class="col-md-5">
                            <label for="whois_first_name" class="form-label">{{ 'First Name'|trans }}</label>
                            <input class="form-control" type="text" name="contact[first_name]" id="whois_first_name"
                                   value="{{ request.first_name|default(service.contact.first_name) }}" required>
                        </div>
                        <div class="col-md-5">
                            <label for="whois_last_name" class="form-label">{{ 'Last Name'|trans }}</label>
                            <input class="form-control" type="text" name="contact[last_name]" id="whois_last_name"
                                   value="{{ request.last_name|default(service.contact.last_name) }}" required>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <div class="col-md-5">
                            <label for="whois_email" class="form-label">{{ 'Email'|trans }}</label>
                            <input class="form-control" type="text" name="contact[email]" id="whois_email"
                                   value="{{ request.email|default(service.contact.email) }}" required>
                        </div>
                        <div class="col-md-5">
                            <label for="whois_company" class="form-label">{{ 'Company'|trans }}</label>
                            <input class="form-control" type="text" name="contact[company]" id="whois_company"
                                   value="{{ request.company|default(service.contact.company) }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <div class="col-md-5">
                            <label for="whois_address1" class="form-label">{{ 'Address Line 1'|trans }}</label>
                            <input class="form-control" type="text" name="contact[address1]" id="whois_address1"
                                   value="{{ request.address1|default(service.contact.address1) }}" required>
                        </div>
                        <div class="col-md-5">
                            <label for="whois_address2" class="form-label">{{ 'Address Line 2'|trans }}</label>
                            <input class="form-control" type="text" name="contact[address2]" id="whois_address2"
                                   value="{{ request.address2|default(service.contact.address2) }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <div class="col-md-5">
                            <label for="whois_country" class="form-label">{{ 'Country'|trans }}</label>
                            <select class="form-select" name="contact[country]" id="whois_country" required>
                                <option value="">{{ 'Select Country'|trans }}</option>
                                {% for code, name in country_names() %}
                                    <option value="{{ code }}" {% if (request.country|default(service.contact.country)) == code %}selected{% endif %}>{{ name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-5">
                            <label for="whois_city" class="form-label">{{ 'City'|trans }}</label>
                            <input class="form-control" type="text" name="contact[city]" id="whois_city"
                                   value="{{ request.city|default(service.contact.city) }}" required>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <div class="col-md-5">
                            <label for="whois_state" class="form-label">{{ 'State'|trans }}</label>
                            <input class="form-control" type="text" name="contact[state]" id="whois_state"
                                   value="{{ request.state|default(service.contact.state) }}" required>
                        </div>

                        <div class="col-md-5">
                            <label for="whois_postcode" class="form-label">{{ 'Zip'|trans }}</label>
                            <input class="form-control" type="text" name="contact[postcode]" id="whois_postcode"
                                   value="{{ request.postcode|default(service.contact.postcode) }}" required>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <div class="col-md-5">
                            <label for="whois_phone_cc" class="form-label">{{ 'Phone Country Code'|trans }}</label>
                            <input class="form-control" type="text" name="contact[phone_cc]" id="whois_phone_cc"
                                   value="{{ request.phone_cc|default(service.contact.phone_cc) }}" inputmode="numeric" maxlength="3" pattern="[0-9]{1,3}" autocomplete="tel-country-code" required>
                        </div>
                        <div class="col-md-5">
                            <label for="whois_phone" class="form-label">{{ 'Phone Number'|trans }}</label>
                            <input class="form-control" type="text" name="contact[phone]" id="whois_phone"
                                   value="{{ request.phone|default(service.contact.phone) }}" required>
                        </div>
                    </div>
                    <input type="hidden" name="order_id" value="{{ order.id }}">
                    <button class="btn btn-primary" type="submit" value="{{ 'Update' }}">{{ 'Update'|trans }}</button>
                </form>
            </div>

            {# Domain transfer #}
            <div class="card-body tab-pane" id="transfer-tab-pane" role="tabpanel" tabindex="0">
                <div class="mb-3">
                    <h5 class="mt-1 mb-1">{{ 'Domain Secret'|trans }}</h5>
                    <span class="small text-secondary">{{ 'Most domain names (except a few top-level domains like .EU and .UK) have a Domain Secret Key/Authorization Code (EPP Code) associated with them. This code is typically required when transferring the domain to a new registrar.'|trans }}</span>
                </div>
                <button class="btn btn-primary" type="button" id="get-epp">{{ 'Get EPP Code'|trans }}</button>
            </div>
        </div>
    </div>
    {% block js %}
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                document.querySelectorAll('a[data-bs-toggle="tab"]').forEach(function(tab) {
                    tab.addEventListener('click', function(event) {
                        event.preventDefault();
                    });
                });

                document.getElementById('domain-lock').addEventListener('click', function(event) {
                    event.preventDefault();

                    FOSSBilling.api.client.post('servicedomain/lock', { order_id: {{ order.id }} },
                        () => {
                            FOSSBilling.message('Domain locked');

                            document.getElementById('domain-lock').style.display =
                                document.getElementById('domain-lock').style.display === 'none' ? '' : 'none';
                            document.getElementById('domain-unlock').style.display =
                                document.getElementById('domain-unlock').style.display === 'none' ? '' : 'none';
                        });
                });

                document.getElementById('domain-unlock').addEventListener('click', function(event) {
                    event.preventDefault();

                    FOSSBilling.api.client.post('servicedomain/unlock', { order_id: {{ order.id }} },
                        () => {
                            FOSSBilling.message('Domain unlocked');

                            document.getElementById('domain-lock').style.display =
                                document.getElementById('domain-lock').style.display === 'none' ? '' : 'none';
                            document.getElementById('domain-unlock').style.display =
                                document.getElementById('domain-unlock').style.display === 'none' ? '' : 'none';
                        });
                });

                document.getElementById('domain-enable-pp').addEventListener('click', function(event) {
                    event.preventDefault();

                    FOSSBilling.api.client.post('servicedomain/enable_privacy_protection', { order_id: {{ order.id }} },
                        (result) =>{
                            FOSSBilling.message('Privacy Protection enabled');

                            const enableBtn = document.getElementById('domain-enable-pp');
                            const disableBtn = document.getElementById('domain-disable-pp');

                            enableBtn.style.display = enableBtn.style.display === 'none' ? '' : 'none';
                            disableBtn.style.display = disableBtn.style.display === 'none' ? '' : 'none';
                        });
                });

                document.getElementById('domain-disable-pp').addEventListener('click', function(event) {
                    event.preventDefault();

                    FOSSBilling.api.client.post('servicedomain/disable_privacy_protection', { order_id: {{ order.id }} },
                        (result) => {
                            FOSSBilling.message('Privacy Protection disabled');

                            const enableBtn = document.getElementById('domain-enable-pp');
                            const disableBtn = document.getElementById('domain-disable-pp');

                            enableBtn.style.display = enableBtn.style.display === 'none' ? '' : 'none';
                            disableBtn.style.display = disableBtn.style.display === 'none' ? '' : 'none';
                        }
                    );
                });

                document.getElementById('get-epp').addEventListener('click', function(event) {
                    event.preventDefault();

                    FOSSBilling.api.client.post('servicedomain/get_transfer_code', { order_id: {{ order.id }} },
                        (result) => {
                            FOSSBilling.message('Domain transfer code is: ' + result);
                        });
                });
            });
        </script>
    {% endblock %}
{% endif %}
