{% extends request.ajax ? 'layout_blank.html.twig' : 'layout_default.html.twig' %}

{% import 'macro_functions.html.twig' as mf %}

{% block meta_title %}{{ 'System settings'|trans }}{% endblock %}

{% set active_menu = 'system' %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ '/'|alink }}">
                <svg class="icon">
                    <use xlink:href="#home" />
                </svg>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'system'|alink }}">{{ 'Settings'|trans }}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{{ 'System settings'|trans }}</li>
    </ol>
{% endblock %}

{% block content %}
    {% set new_params = admin.extension_config_get({ 'ext': 'mod_system' }) %}
    {% set params = admin.system_get_params %}
    {% set enviroment = admin.system_env %}
    {% set external_ip = admin.system_env({ 'ip': true }) %}
    <div class="card-tabs">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" href="#tab-index" data-bs-toggle="tab" role="tab">{{ 'Company details'|trans }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#company-legal" data-bs-toggle="tab" role="tab">{{ 'Company legal'|trans }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#tab-countries" data-bs-toggle="tab" role="tab">{{ 'Countries'|trans }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#tab-cache" data-bs-toggle="tab" role="tab">{{ 'Cache'|trans }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#tab-about" data-bs-toggle="tab" role="tab">{{ 'About'|trans }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#tab-reporting" data-bs-toggle="tab" role="tab">{{ 'Error reporting'|trans }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#network-interface" data-bs-toggle="tab" role="tab">{{ 'Network interface'|trans }}</a>
            </li>
        </ul>

        <div class="card">
            <div class="tab-content">
                <div class="tab-pane fade show active" id="tab-index" role="tabpanel">
                    <form method="post" action="{{ 'api/admin/system/update_params'|link }}" class="api-form" data-api-msg="{{ 'Company updated'|trans }}">
                        <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}">
                        <div class="card-body">
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Name'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="text" name="company_name" value="{{ params.company_name }}">
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Email'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="text" name="company_email" value="{{ params.company_email }}">
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Phone'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="text" name="company_tel" value="{{ params.company_tel }}">
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Address'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control mb-2" type="text" name="company_address_1" value="{{ params.company_address_1 }}" placeholder="{{ 'Address line 1'|trans }}">
                                    <input class="form-control mb-2" type="text" name="company_address_2" value="{{ params.company_address_2 }}" placeholder="{{ 'Address line 2'|trans }}">
                                    <input class="form-control mb-2" type="text" name="company_address_3" value="{{ params.company_address_3 }}" placeholder="{{ 'Address line 3'|trans }}">
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Logo URL'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="text" name="company_logo" value="{{ params.company_logo }}">
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Logo URL (dark mode)'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="text" name="company_logo_dark" value="{{ params.company_logo_dark }}">
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Favicon'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="text" name="company_favicon" value="{{ params.company_favicon }}">
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Company number, chamber of commerce number'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="text" name="company_number" value="{{ params.company_number }}">
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'VAT number'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="text" name="company_vat_number" value="{{ params.company_vat_number }}">
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Bank Name'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="text" name="company_bank_name" value="{{ params.company_bank_name }}">
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'BIC / SWIFT Code' |trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="text" name="company_bic" value="{{ params.company_bic }}">
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Bank Account number'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="text" name="company_account_number" value="{{ params.company_account_number }}">
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Display bank account information on documents?'|trans }}</label>
                                <div class="col-md-6">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="company_display_bank_info" id="display_bank_info_yes" value="1" {% if params.company_display_bank_info == "1" %}checked{% endif %}>
                                        <label class="form-check-label" for="display_bank_info_yes">{{ 'Yes'|trans }}</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="company_display_bank_info" id="display_bank_info_no" value="0" {% if params.company_display_bank_info == "0" %}checked{% endif %}>
                                        <label class="form-check-label" for="display_bank_info_no">{{ 'No'|trans }}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Display bank account information on the bottom of every page?'|trans }}</label>
                                <div class="col-md-6">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="company_bank_info_pagebottom" id="company_bank_info_pagebottom_yes" value="1" {% if params.company_bank_info_pagebottom == "1" %}checked{% endif %}>
                                        <label class="form-check-label" for="company_bank_info_pagebottom_yes">{{ 'Yes'|trans }}</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="company_bank_info_pagebottom" id="company_bank_info_pagebottom_no" value="0" {% if params.company_bank_info_pagebottom == "0" %}checked{% endif %}>
                                        <label class="form-check-label" for="company_bank_info_pagebottom_no">{{ 'No'|trans }}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="form-label col-3 col-form-label">
                                    {{ 'Disallow guest API to fetch FOSSBilling version' | trans }}
                                    <br/>
                                    <small class="text-muted">{{'Enabling this functionality may affect modules that depend on it.' | trans }}</small>
                                </label>
                                <div class="col">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="radio_showPublicYes" type="radio" name="hide_version_public" value="1" {% if params.hide_version_public == "1" %}checked{% endif %}>
                                        <label class="form-check-label" for="radio_showPublicYes">
                                            {{ 'Yes' | trans }}
                                        </label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="radio_showPublicNo" type="radio" name="hide_version_public" value="0" {% if params.hide_version_public == "0" %}checked{% endif %}>
                                        <label class="form-check-label" for="radio_showPublicNo">
                                            {{ 'No' | trans }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="form-label col-3 col-form-label">
                                    {{ 'Hide some company information in the guest API' | trans }}
                                    <br/>
                                    <small class="text-muted">{{'Enabling this will hide some information from the "company" guest API endpoint such as the address, phone number, email, VAT number, and more.' | trans }}</small>
                                </label>
                                <div class="col">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="radio_showCompanyPublicYes" type="radio" name="hide_company_public" value="1" {% if params.hide_company_public == "1" %}checked{% endif %}>
                                        <label class="form-check-label" for="radio_showCompanyublicYes">
                                            {{ 'Yes' | trans }}
                                        </label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="radio_showCompanyPublicNo" type="radio" name="hide_company_public" value="0" {% if params.hide_company_public == "0" %}checked{% endif %}>
                                        <label class="form-check-label" for="radio_showCompanyPublicNo">
                                            {{ 'No' | trans }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Signature'|trans }}</label>
                                <div class="col-md-6">
                                    <textarea class="form-control" name="company_signature" rows="2">{{ params.company_signature }}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <button class="btn btn-primary" type="submit">{{ 'Update settings'|trans }}</button>
                        </div>
                    </form>
                </div>

                <div class="tab-pane fade" id="company-legal" role="tabpanel">
                    <form method="post" action="{{ 'api/admin/system/update_params'|link }}" class="api-form" data-api-msg="{{ 'Company updated'|trans }}">
                        <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}">
                        <div class="card-body">
                            <div class="mb-3">
                                <h3>{{ 'Company terms of service, legal regulation'|trans }}</h3>
                                <textarea class="form-control bb-textarea" name="company_tos" rows="5">{{ params.company_tos }}</textarea>
                            </div>
                            <div class="mb-3">
                                <h3>{{ 'Company privacy policy'|trans }}</h3>
                                <textarea class="form-control bb-textarea" name="company_privacy_policy" rows="5">{{ params.company_privacy_policy }}</textarea>
                            </div>
                            <div class="mb-3">
                                <h3>{{ 'Notes'|trans }}</h3>
                                <textarea class="form-control bb-textarea" name="company_note" rows="5">{{ params.company_note }}</textarea>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <button class="btn btn-primary" type="submit">{{ 'Update settings'|trans }}</button>
                        </div>
                    </form>
                </div>

                <div class="tab-pane fade" id="tab-countries" role="tabpanel">
                    <form method="post" action="{{ 'api/admin/extension/config_save'|link }}" class="api-form" data-api-msg="{{ 'Countries updated'|trans }}">
                        <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}">
                        <input type="hidden" name="ext" value="mod_system">
                        <div class="card-body">
{% set default_countries %}
AF=Afghanistan
AX=Aland Islands
AL=Albania
DZ=Algeria
AS=American Samoa
AD=Andorra
AO=Angola
AI=Anguilla
AQ=Antarctica
AG=Antigua and Barbuda
AR=Argentina
AM=Armenia
AW=Aruba
AU=Australia
AT=Austria
AZ=Azerbaijan
BS=Bahamas
BH=Bahrain
BD=Bangladesh
BB=Barbados
BY=Belarus
BE=Belgium
BZ=Belize
BJ=Benin
BM=Bermuda
BT=Bhutan
BO=Bolivia
BQ=Bonaire, Sint Eustatius and Saba
BA=Bosnia and Herzegovina
BW=Botswana
BR=Brazil
IO=British Indian Ocean Territory
VG=British Virgin Islands
BN=Brunei
BG=Bulgaria
BF=Burkina Faso
BI=Burundi
CV=Cabo Verde
KH=Cambodia
CM=Cameroon
CA=Canada
KY=Cayman Islands
CF=Central African Republic
TD=Chad
CL=Chile
CN=China
CX=Christmas Island
CC=Cocos (Keeling) Islands
CO=Colombia
KM=Comoros
CD=Congo (Democratic Republic of the)
CG=Congo (Republic of the)
CK=Cook Islands
CR=Costa Rica
CI=Cote D'Ivoire
HR=Croatia
CU=Cuba
CW=Curacao
CY=Cyprus
CZ=Czechia
DK=Denmark
DJ=Djibouti
DM=Dominica
DO=Dominican Republic
EC=Ecuador
EG=Egypt
SV=El Salvador
GQ=Equatorial Guinea
ER=Eritrea
EE=Estonia
SZ=Eswatini
ET=Ethiopia
FK=Falkland Islands (Islas Malvinas)
FO=Faroe Islands
FJ=Fiji
FI=Finland
FR=France
GF=French Guiana
PF=French Polynesia
TF=French Southern Territories
GA=Gabon
GM=Gambia
GE=Georgia
DE=Germany
GH=Ghana
GI=Gibraltar
GR=Greece
GL=Greenland
GD=Grenada
GP=Guadeloupe
GU=Guam
GT=Guatemala
GG=Guernsey
GN=Guinea
GW=Guinea-Bissau
GY=Guyana
HT=Haiti
HN=Honduras
HK=Hong Kong
HU=Hungary
IS=Iceland
IN=India
ID=Indonesia
IR=Iran
IQ=Iraq
IE=Ireland
IM=Isle of Man
IL=Israel
IT=Italy
JM=Jamaica
JP=Japan
JE=Jersey
JO=Jordan
KZ=Kazakhstan
KE=Kenya
KI=Kiribati
KW=Kuwait
KG=Kyrgyzstan
LA=Laos
LV=Latvia
LB=Lebanon
LS=Lesotho
LR=Liberia
LY=Libya
LI=Liechtenstein
LT=Lithuania
LU=Luxembourg
MO=Macau
MG=Madagascar
MW=Malawi
MY=Malaysia
MV=Maldives
ML=Mali
MT=Malta
MH=Marshall Islands
MQ=Martinique
MR=Mauritania
MU=Mauritius
YT=Mayotte
MX=Mexico
FM=Micronesia
MD=Moldova
MC=Monaco
MN=Mongolia
ME=Montenegro
MS=Montserrat
MA=Morocco
MZ=Mozambique
MM=Myanmar (Burma)
NA=Namibia
NR=Nauru
NP=Nepal
NL=Netherlands
NC=New Caledonia
NZ=New Zealand
NI=Nicaragua
NE=Niger
NG=Nigeria
NU=Niue
NF=Norfolk Island
KP=North Korea
MK=North Macedonia
MP=Northern Mariana Islands
NO=Norway
OM=Oman
PK=Pakistan
PW=Palau
PS=Palestine
PA=Panama
PG=Papua New Guinea
PY=Paraguay
PE=Peru
PH=Philippines
PN=Pitcairn Islands
PL=Poland
PT=Portugal
PR=Puerto Rico
QA=Qatar
RE=Reunion
RO=Romania
RU=Russia
RW=Rwanda
BL=Saint Barthelemy
SH=Saint Helena, Ascension and Tristan da Cunha
KN=Saint Kitts And Nevis
LC=Saint Lucia
MF=Saint Martin
VC=Saint Vincent and the Grenadines
PM=Saint Pierre And Miquelon
WS=Samoa
SM=San Marino
ST=Sao Tome And Principe
SA=Saudi Arabia
SN=Senegal
RS=Serbia
SC=Seychelles
SL=Sierra Leone
SG=Singapore
SX=Sint Maarten
SK=Slovakia
SI=Slovenia
SB=Solomon Islands
SO=Somalia
ZA=South Africa
KR=South Korea
ES=Spain
LK=Sri Lanka
SD=Sudan
SR=Suriname
SJ=Svalbard and Jan Mayen
SE=Sweden
CH=Switzerland
SY=Syria
TW=Taiwan
TJ=Tajikistan
TZ=Tanzania
TH=Thailand
TP=Timor-Leste
TG=Togo
TK=Tokelau
TO=Tonga
TT=Trinidad and Tobago
TN=Tunisia
TR=Turkey
TM=Turkmenistan
TC=Turks and Caicos Islands
TV=Tuvalu
UG=Uganda
UA=Ukraine
AE=United Arab Emirates
GB=United Kingdom
US=United States
UM=United States Minor Outlying Islands
UY=Uruguay
UZ=Uzbekistan
VU=Vanuatu
VA=Vatican City
VE=Venezuela
VN=Vietnam
VI=Virgin Islands (U.S.)
WF=Wallis and Futuna
EH=Western Sahara
YE=Yemen
ZM=Zambia
ZW=Zimbabwe
{% endset %}
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'List of countries'|trans }}</label>
                                <div class="col-md-6">
                                    <textarea class="form-control" name="countries" rows="25" placeholder="US=United States">{{ new_params.countries|default(default_countries) }}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <button class="btn btn-primary" type="submit">{{ 'Update settings'|trans }}</button>
                        </div>
                    </form>
                </div>

                <div class="tab-pane fade" id="tab-cache" role="tabpanel">
                    <div class="card-header">
                        <h3 class="card-title">{{ 'Cache control'|trans }}</h3>
                        <div class="card-actions">
                            <form method="post" action="{{ 'api/admin/system/clear_cache'|link }}" class="api-form" data-api-msg="{{ 'Cache directory is cleared'|trans }}">
                                <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                                <button class="btn btn-danger" type="submit">{{ 'Invalidate cache'|trans }}</button>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="tab-about" role="tabpanel">
                    <div class="card-header">
                        <h3 class="card-title">{{ 'About FOSSBilling'|trans }}</h3>
                    </div>
                    <div class="card-body">
                        <div class="datagrid">
                            <div class="datagrid-item">
                                <div class="datagrid-title">{{ 'FOSSBilling version'|trans }}</div>
                                <div class="datagrid-content">{{ FOSSBillingVersion }}</div>
                            </div>
                            <div class="datagrid-item">
                                <div class="datagrid-title">{{ 'PHP version'|trans }}</div>
                                <div class="datagrid-content">{{ constant('PHP_VERSION') }}</div>
                            </div>
                            <div class="datagrid-item">
                                <div class="datagrid-title">{{ 'Instance ID'|trans }}</div>
                                <div class="datagrid-content">{{ admin.system_instance_id }}</div>
                            </div>
                            <div class="datagrid-item">
                                <div class="datagrid-title">{{ 'License'|trans }}</div>
                                <div class="datagrid-content"><a href="https://github.com/FOSSBilling/FOSSBilling/blob/main/LICENSE">Apache 2.0</a></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="tab-reporting" role="tabpanel">
                    <div class="card-header">
                        <h3 class="card-title">{{ 'Error reporting'|trans }}</h3>
                    </div>
                    <div class="card-body">
                        {% set last_change = admin.system_last_error_reporting_change %}
                        {% if admin.system_error_reporting_enabled %}
                            <div class="alert alert-success" role="alert">
                                <p>{{ 'Error reporting is enabled.'|trans}}</p>
                                <p>{{ 'This FOSSBilling instance is automatically sending errors which allows us to more easily improve the software and keep it stable. Thanks!'|trans }}</p>
                                <a class="btn btn-danger api-link" href="{{ 'api/admin/system/toggle_error_reporting'|link({ 'CSRFToken': CSRFToken }) }}" data-api-msg="{{ 'Error reporting is now disabled.'|trans }}">{{'Disable error reporting'|trans}}</a>
                            </div>
                        {% else %}
                            <div class="alert alert-danger" role="alert">
                                <p>{{ 'Error reporting is disabled.'|trans}}</p>
                                <p>{{ 'Please consider enabling error reporting. Doing so allows us to provide you with better technical support and helps us to proactively improve FOSSBilling.'|trans }}</p>
                                <a class="btn btn-success api-link" href="{{ 'api/admin/system/toggle_error_reporting'|link({ 'CSRFToken': CSRFToken }) }}" data-api-msg="{{ 'Error reporting is now enabled.'|trans }}">{{'Enable error reporting'|trans}}</a>
                            </div>
                        {% endif %}
                        <p>{{ 'FOSSBilling optionally includes automated error reporting to help aid the project\'s development and stability. To find the most up-to-date information about it, you should review the links and information below.'|trans }}</p>
                        <ul>
                            <li><a href="https://fossbilling.org/docs/faq/error-reporting" target="_blank">{{ 'Learn more about error reporting'|trans }}</a></li>
                            <li>
                                <a href="https://fossbilling.org/docs/faq/error-reporting#error-reporting-changelog" target="_blank">{{ 'Error reporting changelog'|trans }}</a>
                                <span class="text-muted">({{ 'Last applicable behavior change: '|trans }} {{ last_change }})</span>
                            </li>
                        </ul>
                        <span class="text-muted">{{ 'The last applicable behavior change represents the most recent FOSSBilling version that changed error reporting which also applies to this current version. There may have been more recent changes than what\'s listed.'|trans }}</span>
                    </div>
                </div>

                <div class="tab-pane fade" id="network-interface" role="tabpanel">
                    <div class="card-header">
                        <h3 class="card-title">{{ 'Network interface'|trans }}</h3>
                    </div>
                    <div class="card-body">
                        <div class="alert {% if external_ip %}alert-success{% else %}alert-danger{% endif %}" role="alert" id="external-ip">
                            {% if external_ip %}
                                {{ 'With the current settings, your FOSSBilling instance will have an external IP address of: '|trans }} {{ external_ip }}
                            {% else %}
                                {{ 'The currently selected network interface does not appear to be able to reach the internet!'|trans }}
                            {% endif %}
                        </div>

                        <form class="api-form" method="post" action="{{ 'api/admin/system/set_interface_ip'|link }}" data-api-jsonp="onAfterInterfaceSet">
                            <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                            <p>{{ 'If your server has multiple network interfaces, you may select the default one for FOSSBilling to use when making requests here.'|trans }}</p>
                            {% set interface_ips = admin.system_get_interface_ips %}
                            
                            <div class="col-12 col-lg-3">
                                <label for="interface">{{"Select the default network interface:"|trans }}</label>
                                <select class="form-select" aria-label="Available network interfaces" name="interface" id="interface">
                                    <option value="0" {% if constant('BIND_TO') == 0 %} selected {%endif%}>{{ 'None (Default PHP Behavior)'|trans }}</option>
                                    {% for i, interface in interface_ips %}
                                    <option value="{{ interface }}" {% if constant('BIND_TO') == interface %} selected {% endif %}>{{ interface }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <br>

                            <div class="col-12 col-lg-3">
                                <label for="custom_interface">{{'Enter a custom interface to use:'|trans }}</label>
                                {% if constant('BIND_TO') not in interface_ips and constant('BIND_TO') != 0%}
                                    <input class="form-control mt-1" type="text" name="custom_interface" id="custom_interface" value="{{ constant('BIND_TO') }}">
                                {% else %}
                                    <input class="form-control mt-1" type="text" name="custom_interface" id="custom_interface">
                                {% endif %}
                            </div>
                            <span class="text-muted">{{ "If the dropdown menu doesn't have the appropriate network interface, please enter the IP address or name (e.g., eth0) of the correct one above."|trans }}</span>
                            <br>

                            <input type="submit" class="btn btn-primary mt-1" value="{{ 'Update'|trans }}">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
<script>
    function onAfterInterfaceSet(result) {
        API.admin.post('system/env', {
            ip: true,
            CSRFToken: "{{ CSRFToken }}"
        }, function (ip) {
            FOSSBilling.message(`{{ 'Network interface updated.'|trans }}`);
            if(ip){
                document.getElementById('external-ip').innerText = `{{ 'With the current settings, your FOSSBilling instance will have an external IP address of: '|trans }}` + ip;
                document.getElementById('external-ip').className = 'alert alert-success';
            } else {
                document.getElementById('external-ip').innerText = `{{ 'The currently selected network interface does not appear to be able to reach the internet!'|trans }}`;
                document.getElementById('external-ip').className = 'alert alert-danger';
            }
        });
    }
</script>
{% endblock %}

{% block head %}{{ mf.bb_editor('.bb-textarea') }}{% endblock %}
