{% extends 'base_software.html' %}

{% from 'host/common.html' import edit_field %}
{% from 'host/common.html' import alert_duplicate %}
{% from 'host/common.html' import green_check_icon %}

{% if request.endpoint.endswith('edit') %}
    {% set isEdit = True %}
{% else %}
    {% set isEdit = False %}
{% endif %}

{% block head %}
<script>
    $(function() {

        var spinner = $('#spinner');
        spinner.hide();

        {% if isEdit %}
            var is_password_panel_visible = false;
            var password_panel = $('#password-panel');
            password_panel.hide();

            $('#modify-password').on("click", function() {
                if (is_password_panel_visible) {
                    password_panel.hide();
                    is_password_panel_visible = false;
                } else {
                    password_panel.show();
                    is_password_panel_visible = true;
                }
            });
        {% endif %}

        // initialize the show/hide password widget
        $('#password').password();

        $('#server_type').val(function(index, currentValue) {
            toggle_server($(this).val());
            return currentValue
        });

        $('#server_type').on("change", function() {
            toggle_server($(this).val());
        });

        function toggle_server(server_type) {
            $('#authentication-panel').hide();
            $('#destination-on-host-panel').hide();
            $('#directory-panel').show();
            $('#vrf-panel').show();
            $('#verify-reachability').show();

            if (server_type == "TFTP") {
                $('#label_server_url').text('TFTP Server Path');
                $('#label_server_directory').text('File Directory (Used by CSM Server)');
            } else if (server_type == "FTP" || server_type == "SFTP" || server_type == "SCP") {
                $('#authentication-panel').show();
                $('#label_server_url').text(server_type + ' Server Address');
                $('#label_server_directory').text('Home Directory');

                if (server_type == "SCP") {
                    $('#destination-on-host-panel').show();
                }
            } else if (server_type == "LOCAL") {
                $('#label_server_url').text('Device Path (e.g. disk0:)');
                $('#verify-reachability').hide();
                $('#directory-panel').hide();
            }

            if (server_type == "LOCAL" || server_type == "SFTP" || server_type == "SCP") {
                $('#vrf-panel').hide();
            }
        }

        $('#verify-reachability').on("click", function() {
            spinner.show();

            var formData = {
                hostname: '{{ form.hostname.data }}',
                server_type: $('#server_type').val(),
                server_url: $('#server_url').val(),
                username: $('#username').val(),
                password: $('#password').val(),
                server_directory: $('#server_directory').val()
            };

            $.ajax({
                url: "/home/api/check_server_reachability",
                dataType: 'json',
                data: formData,
                success: function(response) {
                    if (response.status == 'OK') {
                        display_success();
                    } else {
                        display_error(response.status);
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    display_error(errorThrown);
                }
            });

            function display_success() {
                spinner.hide();
                $('#verify-reachability').removeClass("btn-danger");
                $('#verify-reachability').addClass("btn-primary");

                bootbox.alert("<img src=\"{{ url_for('static', filename='green_check.png') }}\">CSM Server is able to reach the server repository.<br>" +
                    "(Notice: This may allow CSM Server to browse files but does not guarantee that the host device will be able to do the same.)");
            }

            function display_error(error) {
                spinner.hide();
                $('#verify-reachability').removeClass("btn-primary");
                $('#verify-reachability').addClass("btn-danger");

                bootbox.alert("<img src=\"{{ url_for('static', filename='error.png') }}\">&nbsp;Unable to reach the server repository - " + error);
            }

        });

        function check_server_directory(server_type, server_directory) {
            if (server_directory.length == 0) {
                if (server_type == "TFTP") {
                    bootbox.alert("File Directory has not been specified.");
                } else {
                    // For FTP/SFTP/SCP
                    bootbox.alert("Home Directory has not been specified.");
                }
                return false;
            }
            return true;
        }

        function check_destination_on_host(destination) {
            if (destination.length == 0) {
                bootbox.alert("Destination on Host has not been specified.");
                return false;
            }
            return true;
        }

        $('#form').submit(function() {
            var result = true;
            var server_type = $('#server_type').val();
            var server_directory = $('#server_directory').val();
            var destination_on_host = $('#destination_on_host').val();

            if (server_type == "TFTP") {
                result = check_server_directory(server_type, server_directory);
            } else if (server_type == "FTP" || server_type == "SFTP")  {
                result = check_server_directory(server_type, server_directory);
            } else if (server_type == "SCP") {
                result = check_destination_on_host(destination_on_host);
                if (result) {
                    result = check_server_directory(server_type, server_directory);
                }
            }

            if (!result) return result;

            var hostname = $('#hostname').val();
            var acceptable_string = get_acceptable_string(hostname);

            if (acceptable_string != hostname) {
                var message = get_acceptable_string_message('Server name', hostname, acceptable_string);
                bootbox.confirm(message, function(result) {
                    if (result) {
                        $('#hostname').val(acceptable_string);
                    }
                });
            } else {
                return true;
            }

            return false;
        });

        $('[data-toggle="popover_directory"]').popover({
            trigger : 'click',
            placement : 'left',
            html : true,
            content : function() {
                return $('#popover_directory').html()
            }
        });
    });
</script>

{% endblock %}

{% block main %}
<div id="popover_directory" style="display: none">
  <pre>Note:
      1. For TFTP Server, this is the file directory which is used by CSM Server to browse software
         packages since TFTP protocol does not provide file browsing capability.  The file
         directory should reference the same location as the TFTP Server.

      2. For FTP/SFTP Server, this is the home directory when first log into the Server.  To identify
         the home directory, log into the Server and type 'pwd'.

      The File/Home Directory must be an absolute file path.
  </pre>
</div>

<div class="row">
    <div class="well col-sm-offset-2 col-sm-8">
        <form id="form" method="post" class="form-horizontal">
            <legend>{% if isEdit %}Edit Server Repository{% else %}Create Server Repository{% endif %}</legend>

            {{ alert_duplicate(form.hostname.data, duplicate_error) }}

            {{ edit_field(form.hostname, field_width="col-sm-4", class="form-control",
                placeholder="Unique Name on CSM Server") }}
            {{ edit_field(form.server_type, field_width="col-sm-2", class="form-control") }}
            {{ edit_field(form.server_url, maxlength=100, class="form-control") }}

            <div id="vrf-panel">
                {{ edit_field(form.vrf, maxlength=100, class="form-control", placeholder="Optional") }}
            </div>

            <div id="directory-panel">
                {% set extra_field ='<a href="javascript://"><span class="glyphicon glyphicon-info-sign" style="color:dodgerblue"
                           aria-hidden="true" data-toggle="popover_directory"></span></a>' %}

                {{ edit_field(form.server_directory, maxlength=100, class="form-control", extra_field=extra_field,
                    placeholder="Use Absolute File Path") }}
            </div>
            <div id="authentication-panel">

                {% if isEdit %}
                    {% set extra_field ='<a href="javascript://" id="modify-password">
                        <img src=\"/static/lock.png\" title="Show/Hide Password Field"></a>' %}
                    {{ edit_field(form.username, autocomplete="off", field_width="col-sm-4", maxlength=100, class="form-control", extra_field=extra_field ) }}
                {% else %}
                    {{ edit_field(form.username, autocomplete="off", field_width="col-sm-4", maxlength=100, class="form-control") }}
                {% endif %}

                <div id="password-panel">
                    {% if isEdit %}
                        {{ edit_field(form.password, autocomplete="off", field_width="col-sm-4", maxlength=100, class="form-control",
                        placeholder=form.password_placeholder) }}
                    {% else %}
                        {{ edit_field(form.password, autocomplete="off", field_width="col-sm-4", maxlength=100, class="form-control") }}
                    {% endif %}
                </div>
            </div>
            <div id="destination-on-host-panel">
                {{ edit_field(form.destination_on_host, maxlength=50, class="form-control") }}
            </div>
            <div class="form-actions">
                <div class="btn col-sm-offset-4">
                    <button id="verify-reachability" type="button" class="btn btn-danger">Check Reachability</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                    <button type="button" onClick="history.back(1);" class="btn btn-default">Cancel</button>
                    <img id="spinner" src="{{ url_for('static', filename='spinner.gif') }}">
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}