{% extends "admin/partial/layout_logged_in.html.twig" %}

{% block title %}{{ server_label|length > 0 ? ta('manage', 'Manage "[[[SERVER_LABEL]]]"', {'SERVER_LABEL': server_label}) : ta('add_storage_server', 'Add Storage Server') }}{% endblock %}
{% block selected_page %}server_manage{% endblock %}
{% block selected_sub_page %}server_add{% endblock %}

{% block body %}
    <div class="right_col" role="main">
        <div>
            <div class="page-title">
                <div class="availability-wrapper">
                    {{ availabilityIcon|raw }}
                </div>
                <div class="title_left">
                    <h3>{{ server_label|length > 0 ? ta('manage', 'Manage "[[[SERVER_LABEL]]]"', {'SERVER_LABEL': server_label}) : ta('add_storage_server', 'Add Storage Server') }}</h3>
                </div>
            </div>
            <div class="clearfix"></div>

            {{ msg_page_notifications|raw }}

            {% if resourceUsage %}
                <!-- top tiles -->
                <div class="row tile_count no_tile_margin">
                    {% if resourceUsage['disk_primary_used_percent']|length > 0 %}
                    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                        <span class="count_top"><i class="fa fa-inbox"></i> {{ ta('hd_usage', 'HD Usage') }}</span>
                        <div class="count {% if resourceUsage['disk_primary_used_percent'] > 95 %}red{% elseif resourceUsage['disk_primary_used_percent'] > 80 %}orange{% else %}green{% endif %}">{{ resourceUsage['disk_primary_used_percent'] }}%</div>
                        <span class="count_bottom">{{ CoreHelper.formatSize(resourceUsage['disk_primary_used_bytes']) }} / {{ CoreHelper.formatSize(resourceUsage['disk_primary_total_bytes']) }}</span>
                    </div>
                    {% endif %}

                    {% if resourceUsage['memory_free_gb']|length > 0 %}
                    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                        <span class="count_top"><i class="fa fa-briefcase"></i> {{ ta('free_memory', 'Free Memory') }}</span>
                        <div class="count green">{{ resourceUsage['memory_free_gb'] }} GB</div>
                        <span class="count_bottom">{{ ta('available', 'Available') }}: {{ resourceUsage['memory_total_gb'] }} GB</span>
                    </div>
                    {% endif %}

                    {% if resourceUsage['network_total_connections']|length > 0 %}
                    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                        <span class="count_top"><i class="fa fa-sitemap"></i> {{ ta('network_connections', 'Network Connections') }}</span>
                        <div class="count green">{{ resourceUsage['network_total_connections'] }}</div>
                        <span class="count_bottom">{{ ta('total_active', 'Total active') }}</span>
                    </div>
                    {% endif %}

                    {% if resourceUsage['cpu_load_1_minute']|length > 0 %}
                    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                        <span class="count_top"><i class="fa fa-cogs"></i> {{ ta('cpu_load', 'CPU Load') }}</span>
                        <div class="count {% if resourceUsage['cpu_load_1_minute'] > resourceUsage['cpu_count'] %}orange{% else %}green{% endif %}" title="{{ resourceUsage['cpu_load_1_minute'] }} / {{ resourceUsage['cpu_load_5_minutes'] }} / {{ resourceUsage['cpu_load_15_minutes'] }}">{{ resourceUsage['cpu_load_1_minute'] }}</div>
                        <span class="count_bottom"><i class="fa fa-arrow-{{ resourceUsage['cpu_load_change'] > 0 ? 'down' : 'up' }}"></i> {{ resourceUsage['cpu_load_change'] < 0 ? resourceUsage['cpu_load_change'] * -1 : resourceUsage['cpu_load_change'] }}% {{ ta('last_15_minutes', 'last 15 minutes') }}</span>
                    </div>
                    {% endif %}

                    {% if resourceUsage['cpu_count']|length > 0 %}
                    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                        <span class="count_top"><i class="fa fa-laptop"></i> {{ ta('cpu_count', 'CPU Count') }}</span>
                        <div class="count green">{{ resourceUsage['cpu_count'] }}</div>
                        <span class="count_bottom">{{ ta('total_current', 'Total current') }}</span>
                    </div>
                    {% endif %}

                    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                        <span class="count_top"><i class="fa fa-calendar"></i> {{ ta('last_updated', 'Last Updated') }}</span>
                        <div class="count green">{{ CoreHelper.formatDate(resourceUsage['date_created'], 'g:ia') }}</div>
                        <span class="count_bottom">{{ CoreHelper.formatDate(resourceUsage['date_created'], 'jS M Y') }}</span>
                    </div>

                    <div class="clear"></div>
                </div>
                <!-- /top tiles -->
            {% endif %}

            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <form action="{{ form_action }}" method="POST" class="form-horizontal form-label-left">
                        <div role="tabpanel" data-example-id="togglable-tabs">
                            <ul id="myTab" class="nav nav-tabs bordered" role="tablist">
                                <li role="presentation" class="active">
                                    <a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab"
                                       aria-expanded="true">{{ ta('server_details', 'Server Details') }}</a>
                                </li>
                                <li role="presentation" style="display: none;"
                                    class="localSSHWrapper directSSHWrapper serverAccessWrapper">
                                    <a href="#tab_content1ssh" role="tab" id="profile-tab" data-toggle="tab"
                                       aria-expanded="false">{{ ta('ssh_details', 'SSH Details') }}</a>
                                </li>
                                <li role="presentation">
                                    <a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab"
                                       aria-expanded="false">{{ ta('cdn_support', 'CDN Support') }}</a>
                                </li>
                                <li role="presentation">
                                    <a href="#tab_content3" role="tab" id="profile-tab" data-toggle="tab"
                                       aria-expanded="false">{{ ta('storage_options', 'Storage Options') }}</a>
                                </li>
                                <li role="presentation">
                                    <a href="#tab_content4" role="tab" id="profile-tab" data-toggle="tab"
                                       aria-expanded="false">{{ ta("geo_targetting", "Geo Targeting") }}</a>
                                </li>
                                <li role="presentation">
                                    <a href="#tab_content5" role="tab" id="profile-tab" data-toggle="tab"
                                       aria-expanded="false">{{ ta("account_type_targetting", "Account Type Targeting") }}</a>
                                </li>
                            </ul>
                            <div id="myTabContent" class="tab-content">
                                <div role="tabpanel" class="tab-pane fade active in" id="tab_content1"
                                     aria-labelledby="home-tab">
                                    <div class="x_title">
                                        <h2>{{ ta('server_details', 'Server Details') }}:</h2>
                                        <div class="clearfix"></div>
                                    </div>

                                    <p>{{ ta('use_the_form_below_to_add_editfile_server_details', 'Use the form below to [[[FORM_TYPE]]] file server details.', {'FORM_TYPE': formType}) }}<br/><br/></p>

                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("server_label", "Server Label") }}:</label>
                                        <div class="col-md-5 col-sm-5 col-xs-12">
                                            <input name="server_label" id="server_label"
                                                   placeholder="i.e. File Server 1" type="text" class="form-control"
                                                   value="{{ server_label }}"
                                                   class="xlarge"/>
                                            <p class="text-muted">{{ ta('for_your_own_internal_reference', 'For your own internal reference only.') }}</p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("server_type", "Server Type") }}:</label>
                                        <div class="col-md-9 col-sm-9 col-xs-12">
                                            {% if fileServerId is null or server_type == 'local' %}
                                            <a href="#" id="server_type_local" class="btn btn-radio-lg{{ fileServerId is not null ? ' static' : ''}}" onclick="setFileServerType('local'); return false;">
                                                <img src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/images/icons/server/128/local.png"/>
                                                <span class="content-block">
                                                    <span class="title">{{ ta('local_storage', 'Local Storage') }}</span>
                                                    <span class="description">{{ ta('stored_on_the_same_location_as_this_site', 'Stored on the same location as this site.<br/><br/>Use when storage on the current site isn\'t an issue.')|raw }}</span>
                                                </span>
                                            </a>
                                            {% endif %}

                                            {% if fileServerId is null or server_type == 'direct' %}
                                            <a href="#" id="server_type_direct" class="btn btn-radio-lg{{ fileServerId is not null ? ' static' : ''}}" onclick="setFileServerType('direct'); return false;">
                                                <img src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/images/icons/server/128/direct.png"/>
                                                <span class="content-block">
                                                    <span class="title">{{ ta('external_server_direct', 'External Server (Direct)') }}</span>
                                                    <span class="description">{{ ta('files_are_uploaded_and_downloaded_directly', 'Files are uploaded &amp; downloaded directly with a remote file server.<br/><br/>Use for large filesizes and busy sites.')|raw }}</span>
                                                </span>
                                            </a>
                                            {% endif %}

                                            {% if fileServerId is null or server_type == 'ftp' %}
                                            <a href="#" id="server_type_ftp" class="btn btn-radio-lg{{ fileServerId is not null ? ' static' : ''}}" onclick="setFileServerType('ftp'); return false;">
                                                <img src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/images/icons/server/128/ftp.png"/>
                                                <span class="content-block">
                                                    <span class="title">{{ ta('ftp', 'FTP') }}</span>
                                                    <span class="description">{{ ta('use_any_ftp_server_to_store_files', 'Use any FTP server to store files.<br/><br/>Uploads/downloads are sent to FTP via your site. Smaller filesizes or personal sites only.')|raw }}</span>
                                                </span>
                                            </a>
                                            {% endif %}
                                            <div class="clear"></div>

                                            {% for k,additionalServerType in additionalServerTypes %}
                                                {% if fileServerId is null or server_type == additionalServerType['filestore_key'] %}
                                                <a href="#" id="server_type_{{ additionalServerType['filestore_key'] }}" class="btn btn-radio-lg{{ fileServerId is not null ? ' static' : ''}}" onclick="setFileServerType('{{ additionalServerType['filestore_key'] }}'); return false;">
                                                    <img src="{{ PLUGIN_WEB_ROOT }}/{{ k }}/assets/img/icons/128px.png"/>
                                                    <span class="content-block">
                                                        <span class="title">{{ additionalServerType['filestore_title'] }}</span>
                                                        <span class="description">{{ additionalServerType['filestore_description']|replace({"\n": "<br/>"})|raw }}</span>
                                                    </span>
                                                </a>
                                                {% endif %}
                                            {% endfor %}
                                            <div class="clear"></div>

                                            {% for k,flySystemContainer in flySystemContainers %}
                                                {% if fileServerId is null or server_type == flySystemContainer['entrypoint'] %}
                                                <a href="#" id="server_type_{{ flySystemContainer['entrypoint'] }}" class="btn btn-radio-lg{{ fileServerId is not null ? ' static' : ''}}" onclick="setFileServerType('{{ flySystemContainer['entrypoint'] }}'); return false;">
                                                    <img src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/images/icons/server/128/cloud.png"/>
                                                    <span class="content-block">
                                                        <span class="title">{{ flySystemContainer['label'] }}</span>
                                                        <span class="description">{{ ta('flysystem_storage_adapter', 'Flysystem storage adapter') }}</span>
                                                    </span>
                                                </a>
                                                {% endif %}
                                            {% endfor %}
                                        </div>
                                    </div>

                                    <div class="form-group" style="display: none;">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("server_type", "Server Type") }}:</label>
                                        <div class="col-md-9 col-sm-9 col-xs-12">
                                            <select name="server_type" id="server_type" class="form-control" onChange="showHideFTPElements();
                                        return false;">
                                                <optgroup label="Storage Options">
                                                    <option value="local"{{ server_type == 'local' ? ' SELECTED' : '' }}>
                                                        {{ ta('local_storage_located_on_the_same_server_as_your_site', 'Local (storage located on the same server as your site - if you don\'t need external storage)') }}
                                                    </option>
                                                    <option value="direct"{{ server_type == 'direct' ? ' SELECTED' : '' }}>
                                                        {{ ta('remove_direct_files_are_uploaded_and_downloaded_directly', 'Remote Direct (files are uploaded and downloaded directly with the remote file server - for large filesizes and busy sites)') }}
                                                    </option>
                                                    <option value="ftp"{{ server_type == 'ftp' ? ' SELECTED' : '' }}>
                                                        {{ ta('ftp_uses_ftp_via_PHP_to_upload_files', 'FTP (uses FTP via PHP to upload files into storage - for smaller filesizes or personal sites)') }}
                                                    </option>
                                                    {% for additionalServerType in additionalServerTypes %}
                                                        <option value="{{ additionalServerType['filestore_key'] }}"{{ server_type == additionalServerType['filestore_key']?' SELECTED':'' }}>{{ additionalServerType['filestore_label'] }}</option>
                                                    {% endfor %}
                                                </optgroup>
                                                {{ flysystemFileServerTypesOptionsHtml|raw }}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("status", "Status") }}:</label>
                                        <div class="col-md-5 col-sm-5 col-xs-12">
                                            <select name="status_id" id="status_id" class="form-control">
                                                {% for statusDetail in statusDetails %}
                                                    <option value="{{ statusDetail['id'] }}"{{ status_id == statusDetail['id']?' SELECTED':'' }}>{{ statusDetail['label']|title }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <span class="flysystemWrapper" style="display: none;"></span>

                                    <span class="localElements" style="display: none;">
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("file_server_direct_server_path_to_install", "Server Path To Install") }}:</label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    <input name="script_root_path" id="local_script_root_path"
                                           placeholder="/home/admin/public_html" type="text"
                                           value="{{ script_root_path }}" class="form-control" DISABLED/>
                                    <p class="text-muted">{{ ta('the_full_server_path_to_your_install', 'The full server path to your install. If you\'re unsure, leave empty and it\'ll be auto generated.') }}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("file_storage_path", "File Storage Path") }}:</label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    <input name="local_storage_path" id="local_storage_path" type="text"
                                           value="{{ storage_path }}"
                                           class="form-control" {{ isDefaultServer ? 'DISABLED' : '' }}/>
                                    <p class="text-muted">{{ ta('which_folder_to_storage_files_in_on_the_server', 'Which folder to store files in on the server, relating to the script root. Normally "files/". Supports symlinks') }}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("improved_download_management", "Improved Downloads") }}:</label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    <select name="local_dlAccelerator" id="dlAccelerator1" class="form-control">
                                        {% for k,dlAcceleratorOption in dlAcceleratorOptions %}
                                            <option value="{{ k }}"{{ download_accelerator == k?' SELECTED':'' }}>{{ dlAcceleratorOption|title }}</option>
                                        {% endfor %}
                                    </select>
                                    <p class="text-muted">{{ ta('this_dramatically_increases_server_performance_for_busy_sites', 'This dramatically increases server performance for busy sites by handing the process away from PHP to Apache, Nginx or LiteSpeed. Important: You must make the server changes listed in the relevant link below for this to work.') }}</p>
                                    <ul>
                                        <li><a href="https://support.mfscripts.com/public/kb_view/1/" target="_blank"
                                               style="text-decoration: underline;">{{ ta('enable_xsendfile_for_apache', 'Enable XSendFile for Apache') }}</a>.</li>
                                        <li><a href="https://support.mfscripts.com/public/kb_view/2/" target="_blank"
                                               style="text-decoration: underline;">{{ ta('enable_x_accel_redirect_for_nginx', 'Enable X-Accel-Redirect for Nginx') }}</a>.</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("monitor_server_resources", "Monitor Server Resources") }}:</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <select name="monitor_server_resources_local" id="monitor_server_resources_local" class="form-control">
                                        {% for k,yesNoOption in yesNoOptions %}
                                            <option value="{{ k }}"{{ monitor_server_resources == k ? ' SELECTED' : '' }}>{{ yesNoOption }}</option>
                                        {% endfor %}
                                    </select>
                                    <p class="text-muted">{{ ta('you_can_monitor_server_resource_usage_on_local_or_direct_servers', 'You can monitor server resource usage on local or direct servers. Once enabled, ensure you\'ve <a href="https://support.mfscripts.com/public/kb_view/26/" target="_blank">configured the "process_server_resources" cron</a> on each server.')|raw }}</p>
                                </div>
                            </div>

                        </span>

                        <span class="ftpElements" style="display: none;">
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("ftp_host", "FTP Host") }}:</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <input name="ftp_host" id="ftp_host" type="text" class="form-control"
                                           value="{{ ftp_host }}"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("ftp_port", "FTP Port") }}:</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <input name="ftp_port" id="ftp_port" type="text" class="form-control"
                                           value="{{ ftp_port }}" class="small"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("ftp_username", "FTP Username") }}:</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <input name="ftp_username" id="ftp_username" type="text" class="form-control"
                                           value="{{ ftp_username }}"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("ftp_password", "FTP Password") }}:</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <input name="ftp_password" id="ftp_password" type="password" class="form-control"
                                           value="{{ ftp_password }}"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("file_storage_path", "File Storage Path") }}:</label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    <input name="ftp_storage_path" id="ftp_storage_path" type="text" class="form-control"
                                           value="{{ storage_path }}" class="large"/>
                                    <p class="text-muted">{{ ta('as_the_ftp_user_would_see_it_login_with_this_ftp_user_using_an_ftp_client', 'As the FTP user would see it. Login with this FTP user using an FTP client to confirm<br/>the path to use.')|raw }}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("ftp_server_type", "FTP Server Type") }}:</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <select name="ftp_server_type" id="ftp_server_type" class="form-control">
                                        {% for k,ftpServerType in ftpServerTypes %}
                                            <option value="{{ k }}"{{ ftp_server_type == k?' SELECTED':'' }}>{{ ftpServerType|title }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("ftp_enable_passive_mode", "Enable Passive Mode") }}:</label>
                                <div class="col-md-3 col-sm-3 col-xs-12">
                                    <select name="ftp_passive_mode" id="ftp_passive_mode" class="form-control">
                                        {% for k,serverPassiveOption in serverPassiveOptions %}
                                            <option value="{{ k }}"{{ ftp_passive_mode == k?' SELECTED':'' }}>{{ serverPassiveOption|title }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </span>

                        <span class="directElements" style="display: none;">
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("file_server_domain_name", "File Server Domain Name") }}:</label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    <div class="input-group">
                                        <span class="input-group-addon">{{ ConfigHelper.getSiteProtocol() }}://</span>
                                        <input name="file_server_domain_name" id="file_server_domain_name"
                                               class="form-control" placeholder="i.e. fs1.{{ ConfigHelper.getSiteHostURL() }}"
                                               type="text" value="{{ file_server_domain_name }}"
                                               onKeyUp="updateUrlParams();" class="large"/>
                                    </div>
                                    <p class="text-muted">{{ ta('uploads_must_use_the_same_protocol_as_this_site', 'Uploads must use the same protocol as this site ([[[_CONFIG_SITE_PROTOCOL]]]) due to browser security restrictions.', {'_CONFIG_SITE_PROTOCOL': ConfigHelper.getSiteProtocol()}) }}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("file_server_direct_server_path_to_install", "Server Path To Install") }}:</label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    <input name="script_root_path" id="direct_script_root_path"
                                           placeholder="/home/admin/public_html" type="text"
                                           value="{{ script_root_path }}" class="form-control"/>
                                    <p class="text-muted">{{ ta('the_full_server_path_to_the_script_install', 'The full server path to the script install on your file server. If you\'re unsure, leave empty and it\'ll be auto generated.') }}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("file_storage_path", "File Storage Path") }}:</label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    <input name="storage_path" id="direct_storage_path" type="text"
                                           value="{{ storage_path }}" class="form-control"/>
                                    <p class="text-muted">{{ ta('which_folder_to_storage_files_in_on_the_file_server', 'Which folder to store files in on the file server, relating to the script root. Normally files/') }}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("url_path", "URL Path") }}:</label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    <input name="script_path" id="script_path" type="text"
                                           placeholder={{ ta('root_unless_you_installed_into_a_subfolder', '/ - root, unless you\'ve installed into a sub-folder')|json_encode()|raw }}
                                           value="{{ script_path }}" class="form-control" onKeyUp="updateUrlParams();"/>
                                    <p class="text-muted">{{ ta('use_forward_slash_root_unless_you_installed_into_a_subfolder', 'Use /, unless you\'ve installed into a sub-folder on the file server domain above.') }}</p>
                                </div>
                            </div>
                            <div class="clearfix alt-highlight" style="display: none;">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("use_main_site_url", "Use Main Site URL") }}:</label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    <select name="route_via_main_site" id="route_via_main_site" class="form-control">
                                        {% for k,routeViaMainSiteOption in routeViaMainSiteOptions %}
                                            <option value="{{ k }}"{{ route_via_main_site == k?' SELECTED':'' }}>{{ routeViaMainSiteOption|title }}</option>
                                        {% endfor %}
                                    </select>
                                    <p class="text-muted">{{ ta('if_yes_site_url_will_be_used_for_all_download_urls_generated_on_the_site', 'If \'yes\' [[[_CONFIG_SITE_HOST_URL]]] will be used for all download urls generated on the site. Otherwise the above \'File Server Domain Name\' will be used. Changing this will not impact any existing download urls.', {'_CONFIG_SITE_HOST_URL': ConfigHelper.getSiteHostURL()}) }}</p>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("improved_download_management", "Improved Downloads") }}:</label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    <select name="dlAccelerator" id="dlAccelerator2" class="form-control">
                                        {% for k,dlAcceleratorOption in dlAcceleratorOptions %}
                                            <option value="{{ k }}"{{ download_accelerator == k?' SELECTED':'' }}>{{ dlAcceleratorOption|title }}</option>
                                        {% endfor %}
                                    </select>
                                    <p>{{ ta('this_dramatically_increases_server_performance_for_busy_sites', 'This dramatically increases server performance for busy sites by handing the process away from PHP to Apache, Nginx or LiteSpeed. Important: ou must make the server changes listed in the relevant link below for this to work.') }}</p>
                                    <ul>
                                        <li><a href="https://support.mfscripts.com/public/kb_view/1/" target="_blank"
                                               style="text-decoration: underline;">{{ ta('enable_xsendfile_for_apache', 'Enable XSendFile for Apache') }}</a>.</li>
                                        <li><a href="https://support.mfscripts.com/public/kb_view/2/" target="_blank"
                                               style="text-decoration: underline;">{{ ta('enable_x_accel_redirect_for_nginx', 'Enable X-Accel-Redirect for Nginx') }}</a>.</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("file_server_download_proto", "File Server Download Protocol") }}:</label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    <select name="file_server_download_proto" id="file_server_download_proto"
                                            class="form-control">
                                        {% for k,downloadProtocolOption in downloadProtocolOptions %}
                                            <option value="{{ k }}"{{ file_server_download_proto == k?' SELECTED':'' }}>{{ downloadProtocolOption|title }}</option>
                                        {% endfor %}
                                    </select>
                                    <p class="text-muted">{{ ta('generally_use_the_same_as_the_site_protocol', 'Generally use the same as this site ([[[_CONFIG_SITE_PROTOCOL]]]). Note that this is only for download urls.', {'_CONFIG_SITE_PROTOCOL': ConfigHelper.getSiteProtocol()}) }}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("monitor_server_resources", "Monitor Server Resources") }}:</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <select name="monitor_server_resources_direct" id="monitor_server_resources_direct" class="form-control">
                                        {% for k,yesNoOption in yesNoOptions %}
                                            <option value="{{ k }}"{{ monitor_server_resources == k ? ' SELECTED' : '' }}>{{ yesNoOption }}</option>
                                        {% endfor %}
                                    </select>
                                    <p class="text-muted">{{ ta('you_can_monitor_server_resource_usage_on_local_or_direct_servers', 'You can monitor server resource usage on local or direct servers. Once enabled, ensure you\'ve <a href="https://support.mfscripts.com/public/kb_view/26/" target="_blank">configured the "process_server_resources" cron</a> on each server.')|raw }}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("enable_availability_checker", "Enable Availability Checker") }}:</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <select name="enable_availability_checker" id="enable_availability_checker" class="form-control">
                                        {% for k,yesNoOption in yesNoOptions %}
                                            <option value="{{ k }}"{{ enable_availability_checker == k ? ' SELECTED' : '' }}>{{ yesNoOption }}</option>
                                        {% endfor %}
                                    </select>
                                    <p class="text-muted">{{ ta('you_can_regularly_ping_this_server_to_ensure_its_available', 'You can regularly ping this server to ensure it\'s available. If it goes offline, it\'ll be temporarily removed from the server pool until it\'s available again. Once enabled, ensure you\'ve <a href="https://support.mfscripts.com/public/kb_view/26/" target="_blank">configured the "process_server_monitoring" cron</a> only on the main server.')|raw }}</p>
                                </div>
                            </div>
                        </span>

                                </div>
                                <div role="tabpanel" class="tab-pane fade" id="tab_content1ssh"
                                     aria-labelledby="profile-tab">
                        <span class="localSSHWrapper serverAccessWrapper" style="display: none;">
                            <div class="x_title">
                                <h2>{{ ta("local_server_ssh_details_this_server", "Local Server SSH Details (This Server)") }}:</h2>
                                <div class="clearfix"></div>
                            </div>
                            <p>{{ ta('the_following_information_should_be_fill_in_if_youre_using_the_media_converter_plugin_or_archive_manager', 'The following information should be filled in if you\'re using the media converter plugin or archive manager. If you have openssl_encrypt() functions available within your server PHP setup, these details will be encrypted in your database using AES256. In a future release we\'ll be able to use these details to automatically update your site.') }}<br/><br/></p>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("local_server_direct_ip_address", "Local Server IP Address") }}:</label>
                                <div class="col-md-4 col-sm-4 col-xs-12">
                                    <input name="local_file_server_direct_ip_address" id="file_server_direct_ip_address_2"
                                           placeholder="i.e. 124.194.125.34" type="text"
                                           value="{{ file_server_direct_ip_address }}" class="form-control"/>
                                    <p class="text-muted">{{ ta('the_servers_public_up_address', 'The servers public IP address.') }}</p>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("local_server_direct_ssh_port", "Local SSH Port") }}:</label>
                                <div class="col-md-3 col-sm-3 col-xs-12">
                                    <input name="local_file_server_direct_ssh_port" id="file_server_direct_ssh_port_2"
                                           type="text" placeholder="22" value="{{ file_server_direct_ssh_port }}"
                                           class="form-control"/>
                                    <p class="text-muted">{{ ta('normally_port_22', 'Normally port 22.') }}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("local_server_direct_ssh_authentication_type", "Authentication Type") }}:</label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    <select name="local_file_server_direct_ssh_authentication_type"
                                            id="file_server_direct_ssh_authentication_type_2" class="form-control"
                                            onchange="toggleSSHAuthType(); return false;">
                                        {% for k,authenticationTypeOption in authenticationTypeOptions %}
                                            <option value="{{ k }}"{{ file_server_direct_ssh_authentication_type == k?' SELECTED':'' }}>{{ authenticationTypeOption }}</option>
                                        {% endfor %}
                                    </select>
                                    <p class="text-muted">{{ ta('whether_to_authenticate_using_ssh_keys_or_a_password', 'Whether to authenticate using SSH keys or a password.') }}</p>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("local_server_direct_ssh_username", "Local SSH Username") }}:</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <input name="local_file_server_direct_ssh_username" id="file_server_direct_ssh_username_2"
                                           placeholder="i.e. root" type="text"
                                           value="{{ file_server_direct_ssh_username }}" class="form-control"/>
                                    <p class="text-muted">{{ ta('root_equivalent_user', 'Root equivalent user.') }}</p>
                                </div>
                            </div>

                            <div class="form-group ssh-password-wrapper" style="display: none;">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("local_server_direct_ssh_password", "Local SSH Password") }}:</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <input name="local_file_server_direct_ssh_password" id="file_server_direct_ssh_password_2"
                                           type="password" value="" class="form-control"/>
                                    <p class="text-muted">{{ ta('leave_blank_to_keep_existing_value', 'Leave blank to keep existing value, if updating.') }}</p>
                                </div>
                            </div>
                            <div class="form-group ssh-key-wrapper" style="display: none;">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("local_server_direct_ssh_key", "Local SSH Private Key") }}:</label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    <textarea name="local_file_server_direct_ssh_key" id="file_server_direct_ssh_key_2"
                                              class="form-control" rows="5" style="font-family: monospace;"
                                              placeholder="{{ file_server_direct_ssh_key|length > 0?(file_server_direct_ssh_key|slice(0, 170)~'...\n[CURRENT KEY HIDDEN]\n...'~file_server_direct_ssh_key|slice(file_server_direct_ssh_key|length-170, 170)):'No key set.' }}"></textarea>
                                    <p class="text-muted">{{ ta('use_a_private_ssh_key_to_authenticate', 'Use a private SSH key (RSA) to authenticate. Leave blank to keep existing, if updating. Guide for setting up SSH keys <a href="https://www.digitalocean.com/community/tutorials/how-to-set-up-ssh-keys-2" target="_blank">here</a>.')|raw }}</p>
                                </div>
                            </div>
                        </span>
                                    <span class="directSSHWrapper serverAccessWrapper" style="display: none;">
                            <div class="x_title">
                                <h2>{{ ta("file_server_ssh_details", "File Server SSH Details") }}:</h2>
                                <div class="clearfix"></div>
                            </div>
                            <p>{{ ta('the_following_information_should_be_fill_in_if_youre_using_the_media_converter_plugin_or_archive_manager', 'The following information should be filled in if you\'re using the media converter plugin or archive manager. If you have openssl_encrypt() functions available within your server PHP setup, these details will be encrypted in your database using AES256. In a future release we\'ll be able to use these details to automatically create and upgrade your file servers.') }}</p>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("file_server_direct_ip_address", "File Server IP Address") }}:</label>
                                <div class="col-md-4 col-sm-4 col-xs-12">
                                    <input name="file_server_direct_ip_address" id="file_server_direct_ip_address"
                                           placeholder="i.e. 124.194.125.34" type="text"
                                           value="{{ file_server_direct_ip_address }}" class="form-control"/>
                                    <p class="text-muted">{{ ta('the_servers_public_ip_address', 'The servers public IP address.') }}</p>
                                </div>
                                <label class="control-label col-md-2 col-sm-2 col-xs-12">{{ ta("file_server_direct_ssh_port", "Server SSH Port") }}:</label>
                                <div class="col-md-3 col-sm-3 col-xs-12">
                                    <input name="file_server_direct_ssh_port" id="file_server_direct_ssh_port"
                                           type="text" placeholder="22" value="{{ file_server_direct_ssh_port }}"
                                           class="form-control"/>
                                    <p class="text-muted">{{ ta('normally_port_22', 'Normally port 22.') }}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("local_server_direct_ssh_authentication_type", "Authentication Type") }}:</label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    <select name="file_server_direct_ssh_authentication_type"
                                            id="file_server_direct_ssh_authentication_type" class="form-control"
                                            onchange="toggleSSHAuthType('direct'); return false;">
                                        {% for k,authenticationTypeOption in authenticationTypeOptions %}
                                            <option value="{{ k }}"{{ file_server_direct_ssh_authentication_type == k?' SELECTED':'' }}>{{ authenticationTypeOption }}</option>
                                        {% endfor %}
                                    </select>
                                    <p class="text-muted">{{ ta('whether_to_authenticate_using_ssh_keys_or_a_password', 'Whether to authenticate using SSH keys or a password.') }}</p>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("file_server_direct_ssh_username", "Server SSH Username") }}:</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <input name="file_server_direct_ssh_username" id="file_server_direct_ssh_username"
                                           placeholder="i.e. root" type="text"
                                           value="{{ file_server_direct_ssh_username }}" class="form-control"/>
                                    <p class="text-muted">{{ ta('root_equivalent_user', 'Root equivalent user.') }}</p>
                                </div>
                            </div>
                            <div class="form-group ssh-password-wrapper" style="display: none;">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("file_server_direct_ssh_password", "Server SSH Password") }}:</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <input name="file_server_direct_ssh_password" id="file_server_direct_ssh_password"
                                           type="password" value="" class="form-control"/>
                                    <p class="text-muted">{{ ta('leave_blank_to_keep_existing_value', 'Leave blank to keep existing value, if updating.') }}</p>
                                </div>
                            </div>
                            <div class="form-group ssh-key-wrapper" style="display: none;">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("server_server_direct_ssh_key", "Server SSH Private Key") }}:</label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    <textarea name="file_server_direct_ssh_key" id="file_server_direct_ssh_key"
                                              class="form-control" rows="5" style="font-family: monospace;"
                                              placeholder="{{ file_server_direct_ssh_key|length > 0?(file_server_direct_ssh_key|slice(0, 170)~'...\n[CURRENT KEY HIDDEN]\n...'~file_server_direct_ssh_key|slice(file_server_direct_ssh_key|length-170, 170)):'No key set.' }}"></textarea>
                                    <p class="text-muted">{{ ta('use_a_private_ssh_key_to_authenticate', 'Use a private SSH key (RSA) to authenticate. Leave blank to keep existing, if updating. Guide for setting up SSH keys <a href="https://www.digitalocean.com/community/tutorials/how-to-set-up-ssh-keys-2" target="_blank">here</a>.')|raw }}</p>
                                </div>
                            </div>
                        </span>

                                    <span class="directElements" style="display: none;">
                            <div class="x_title">
                                <h2>{{ ta("file_server_direct_install", "Direct File Server Install") }}:</h2>
                                <div class="clearfix"></div>
                            </div>
                            <p>{{ ta('direct_file_servers_require_additional_setup_on_other_a_vps_or_dedicated_server', 'Direct file servers require additional setup on either a VPS or dedicated server.') }}</p>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("file_server_setup", "File Server Setup") }}:</label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    {{ ta('direct_file_server_setup_guidance', 'Direct file server requirements: PHP7.4+, Apache Mod Rewrite or Nginx, remote access to your MySQL database.<br/><br/>
                                    So that your direct file server can receive the uploads and process downloads, it needs a copy of the full codebase installed. Upload all the files from your main site ([[[_CONFIG_SITE_HOST_URL]]]) to your new file server. This includes any plugin files within the plugin folder.<br/><br/>
                                    Once uploaded, replace the /_config.inc.php file on the new file server with the one listed below. Set your database password in the file (_CONFIG_DB_PASS). We\'ve removed it for security.<br/><br/>
                                        <ul class="adminList"><li><a id="configLink"
                                        href="server_manage_direct_get_config_file?fileName=_config.inc.php"
                                        target="_blank" style="text-decoration: underline;">_config.inc.php</a></li></ul><br/>
                                        In addition, if you\'re using Apache, replace the \'.htaccess\' on the file server with the one listed below.<br/><br/>
                                    <ul class="adminList"><li><a id="htaccessLink"
                                                                 href="server_manage_direct_get_config_file?fileName=.htaccess&REWRITE_BASE=/"
                                                                 target="_blank" style="text-decoration: underline;">.htaccess</a></li></ul><br/>
                                    For Nginx users, set your rules to the same as the main server. See /___NGINX_RULES.txt for details.<br/><br/>
                                    Ensure the following folders are CHMOD 755 (or 777 depending on your host) on this file server:<br/><br/>
                                    <ul class="adminList">
                                        <li>/files/</li>
                                        <li>/cache/</li>
                                        <li>/logs/</li>
                                        <li>/plugins/</li>
                                    </ul>', {'_CONFIG_SITE_HOST_URL': ConfigHelper.getSiteHostURL()})|raw }}
                                </div>
                            </div>
                        </span>
                                </div>

                                <div role="tabpanel" class="tab-pane fade" id="tab_content2"
                                     aria-labelledby="profile-tab">
                                    <div class="x_title">
                                        <h2>{{ ta('cdn_support', 'CDN Support') }}:</h2>
                                        <div class="clearfix"></div>
                                    </div>
                                    <p>
                                        {{ ta('you_can_use_content_delivery_networks_to_handle_image_previews', 'You can use Content Delivery Networks (CDNs) such as Akamai to handle image previews, file icons and other static assets. File downloads can not be handled by CDNs however users will see a big performance improvement using the file manager if this is set.') }}
                                    </p>
                                    <p>
                                        {{ ta('cdns_work_by_caching_a_copy_of_the_requested_file_on_their_own_servers/', 'CDNs work by caching a copy of the requested file on their own servers, then sending that to the user from a server closer to their physical location.') }}
                                        <br/><br/>
                                    </p>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("cdn_url", "CDN URL") }}:</label>
                                        <div class="col-md-9 col-sm-9 col-xs-12">
                                            <input name="cdn_url" id="cdn_url" type="text" value="{{ cdn_url }}" class="form-control"/>
                                            {{ ta('ensure_youve_pointed_the_cdn_url_at_this_file_server_url', 'Ensure you\'ve pointed the CDN url at this file server url. Exclude the https or http in the url. For Flysystem type servers this should be the main domain name of your site. Leave blank to disable.') }}
                                        </div>
                                    </div>
                                </div>

                                <div role="tabpanel" class="tab-pane fade" id="tab_content3"
                                     aria-labelledby="profile-tab">
                                    <div class="x_title">
                                        <h2>{{ ta('storage_options', 'Storage Options') }}:</h2>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("max_storage_bytes", "Max Storage (bytes)") }}:</label>
                                        <div class="col-md-9 col-sm-9 col-xs-12">
                                            <input name="max_storage_space" id="max_storage_space" type="text"
                                                   value="{{ max_storage_space }}" class="form-control"
                                                   placeholder="2199023255552 = 2TB"/>&nbsp;{{ ta('bytes', 'bytes') }}. {{ ta('use_zero_for_unlimited', 'Use zero for unlimited.') }}
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta("server_priority", "Server Priority") }}:</label>
                                        <div class="col-md-9 col-sm-9 col-xs-12">
                                            <input name="server_priority" id="server_priority" type="text"
                                                   value="{{ server_priority }}" class="form-control"/>&nbsp;{{ ta('a_number_in_order_from_lowest_zero_to_ignore', 'A number. In order from lowest. 0 to ignore.<br/><br/>- Use for multiple servers when others are full. So when server with priority of 1 is full, server<br/>with priority of 2 will be used next for new uploads. 3 next and so on. "Server selection method"<br/>must be set to "Until Full" to enable this functionality.')|raw }}
                                        </div>
                                    </div>
                                </div>

                                <div role="tabpanel" class="tab-pane fade" id="tab_content4"
                                     aria-labelledby="profile-tab">
                                    <div class="x_title">
                                        <h2>{{ ta("geo_targetting", "Geo Targeting") }}:</h2>
                                        <div class="clearfix"></div>
                                    </div>
                                    <p>{{ ta('target_storage_servers_for_specific_countries', 'Target storage servers for specific countries. Any countries selected below will use this server for uploads. To use this server for all countries, ensure nothing is selected below.') }}</p>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('countries', 'Countries') }}:</label>
                                        <div class="col-md-9 col-sm-9 col-xs-12">
                                            <select multiple name="geo_upload_countries[]" id="geo_upload_countries"
                                                    class="form-control" style="height: 250px;">
                                                {% for countryOption in countryOptions %}
                                                    <option value="{{ countryOption['iso_alpha2'] }}"{{ countryOption['iso_alpha2'] in geo_upload_countries?' SELECTED':'' }}>{{ countryOption['name']|title }}</option>
                                                {% endfor %}
                                            </select>
                                            <p class="text-muted">{{ ta('hold_ctrl_and_click_to_select_multiple_countries', 'Hold ctrl & click to select multiple or <a
                                                        href="#" onClick="$(\'#geo_upload_countries option:selected\').removeAttr(\'selected\');
                                                return false;">clear selected</a>.') }}</p>
                                        </div>
                                    </div>
                                </div>

                                <div role="tabpanel" class="tab-pane fade" id="tab_content5"
                                     aria-labelledby="profile-tab">
                                    <div class="x_title">
                                        <h2>{{ ta("account_type_targetting", "Account Type Targeting") }}{{ ta("account_type_targetting", "Account Type Targeting") }}:</h2>
                                        <div class="clearfix"></div>
                                    </div>
                                    <p>{{ ta('target_storage_servers_for_specific_account_types', 'Target storage servers for specific account types. Any account types selected
                                        below will use this server for uploads. To use this server for all types, ensure
                                        nothing is selected below.') }}</p>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('account_types', 'Account Types') }}:</label>
                                        <div class="col-md-9 col-sm-9 col-xs-12">
                                            <select multiple name="account_upload_types[]" id="account_upload_types"
                                                    class="form-control" style="height: 250px;">
                                                {% for accountTypeOption in accountTypeOptions %}
                                                    <option value="{{ accountTypeOption['id'] }}"{{ accountTypeOption['id'] in account_upload_types?' SELECTED':'' }}>{{ accountTypeOption['label']|title }}</option>
                                                {% endfor %}
                                            </select>
                                            <p class="text-muted">{{ ta('hold_ctrl_and_click_to_select_multiple_upload_types', 'Hold ctrl & click to select multiple or <a
                                                        href="#" onClick="$(\'#account_upload_types option:selected\').removeAttr(\'selected\');
                                                return false;">clear selected</a>.') }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="x_panel">
                            <div class="x_content">
                                <div class="ln_solid"></div>
                                <div class="form-group">
                                    <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                                        <button type="button" class="btn btn-default" onClick="window.location = '{{ ADMIN_WEB_ROOT }}/server_manage';">{{ ta('cancel', 'Cancel') }}</button>
                                        <button type="submit" class="btn btn-primary">{{ server_label|length > 0 ? ta('update_storage_server', 'Update Storage Server') : ta('add_storage_server', 'Add Storage Server') }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <input name="submitted" type="hidden" value="1"/>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block head_js %}
    <script>
        $(document).ready(function () {
            showHideFTPElements();
            updateUrlParams();
            toggleSSHTab();
            setActiveServerType();
        });

        function showHideFTPElements()
        {
            hideAllElements();
            var serverType = $('#server_type').val();
            if (serverType == 'ftp') {
                $('.ftpElements').show();
            }
            else if (serverType == 'direct') {
                $('.directElements').show();
                toggleSSHAuthType('direct');
            }
            else if (serverType == 'local') {
                $('.localElements').show();
                toggleSSHAuthType('local');
            }
            else if ($('#server_type').val().substr(0, 10) == "flysystem_") {
                // flysystem adapters
                extraFields = $('#server_type option:selected').attr('data-fields');
                renderFlysystemOptions($('#server_type').val(), extraFields);
            }
            toggleSSHTab();
        }

        function renderFlysystemOptions(flysystemAdapter, extraFields)
        {
            hideAllElements();

            // create form
            var html = '';
            var extraFieldsObj = jQuery.parseJSON(extraFields);
            for (i in extraFieldsObj)
            {
                html += '<div class="form-group">';
                html += '    <label class="control-label col-md-3 col-sm-3 col-xs-12">' + extraFieldsObj[i]['label'] + ':</label>';
                html += '    <div class="col-md-5 col-sm-5 col-xs-12">';
                if (extraFieldsObj[i]['type'] == 'select')
                {
                    html += '        <select name="flysystem_config[' + flysystemAdapter + '_' + i + ']" id="' + flysystemAdapter + '_' + i + '" class="form-control flysystem-field">';
                    for (o in extraFieldsObj[i]['option_values'])
                    {
                        html += '        <option value="' + o + '"';
                        if (extraFieldsObj[i]['default'] == o)
                        {
                            html += ' SELECTED';
                        }
                        html += '>' + extraFieldsObj[i]['option_values'][o] + '</option>';
                    }
                    html += '        </select>';
                } else
                {
                    html += '        <input name="flysystem_config[' + flysystemAdapter + '_' + i + ']" id="' + flysystemAdapter + '_' + i + '" type="text" value="' + extraFieldsObj[i]['default'] + '" class="form-control flysystem-field"/>';
                }
                html += '    </div>';
                html += '</div>';
            }

            $('.flysystemWrapper').html(html);
            $('.flysystemWrapper').show();
        }

        function hideAllElements()
        {
            $('.directElements').hide();
            $('.ftpElements').hide();
            $('.localElements').hide();
            $('.flysystemWrapper').hide();
        }

        function updateUrlParams()
        {
            // file server domain name
            var SITE_HOST = $('#file_server_domain_name').val();
            SITE_HOST = SITE_HOST.replace(/\s/g, "");
            $('#file_server_domain_name').val(SITE_HOST);
            if (SITE_HOST.length == 0)
            {
                SITE_HOST = '';
            }

            // rewrite base
            var REWRITE_BASE = $('#script_path').val();
            REWRITE_BASE = REWRITE_BASE.replace(/\s/g, "");
            $('#script_path').val(REWRITE_BASE);
            if (REWRITE_BASE.length == 0)
            {
                REWRITE_BASE = '/';
            }

            $('#configLink').attr('href', 'server_manage_direct_get_config_file?fileName=_config.inc.php&REWRITE_BASE=' + REWRITE_BASE + '&SITE_HOST=' + SITE_HOST);
            $('#htaccessLink').attr('href', 'server_manage_direct_get_config_file?fileName=.htaccess&REWRITE_BASE=' + REWRITE_BASE);
        }

        function toggleSSHAuthType(group) {
            var eleIdAppend = '_2';
            if(group == 'direct') {
                eleIdAppend = '';
            }

            if($('#file_server_direct_ssh_authentication_type'+eleIdAppend+' option:selected').val() == 'ssh_password') {
                $('.ssh-key-wrapper').hide();
                $('.ssh-password-wrapper').show();
            }
            else {
                $('.ssh-password-wrapper').hide();
                $('.ssh-key-wrapper').show();
            }
        }

        function toggleSSHTab() {
            $('.serverAccessWrapper').hide();
            if($('#server_type').val() === 'local' || $('#server_type').val() === 'direct') {
                $('.'+$('#server_type').val()+'SSHWrapper').show();
            }
        }

        function setFileServerType(type) {
            $('#server_type').val(type);
            setActiveServerType();
            showHideFTPElements();
        }

        function setActiveServerType() {
            $('.btn-radio-lg').removeClass('active');
            $('.btn-radio-lg').addClass('inactive');
            $('#server_type_'+$('#server_type').val()).removeClass('inactive').addClass('active');
        }
    </script>
{% endblock %}