{% extends "base_status.html" %}

{% block title %}Edit Check Command{% endblock %}
{% block smallheader %}edit{% endblock %}
{% block largeheader %}Check Command for {{ host_name }} - {{ service_description }}{% endblock %}
{% block nav1 %}misc{% endblock %}

{% block toolbar %}

        <button class="hide btn btn-primary" onclick="run_this_check_command();">Run this check plugin</button>
{% endblock %}
{% block content %}

    {% if errors %}
    {{ errors }}
    {% else %}
        <div>
        <p>
            You are editing check command for service
            <a href="{% url adagios.status.views.status_detail %}?host_name={{ host_name }}&service_description={{ service_description }}">{{ service_description }}</a> on host <a href="{% url adagios.status.views.status_detail %}?host_name={{ host_name }}">{{ host_name }}</a>
        </p>
        <p>
            If the command takes any custom arguments or macros you can edit them and see the results in-line at the bottom of the page.
        </p>
        <div class="argument_div">
            <table class="" >
                <tbody >
                    <tr >
                        <td>Check Command</td>
                        <td style="background-color: white; margin-bottom: 10px">
                            <select style="width: 400px;" data-placeholder="Please select a check command" id="check_command_select">
                                <option value=""></option>
                                {% for i in command_names %}
                                    <option value="{{ i }}" {% if i == check_command %}selected="selected"{% endif %}>{{ i }}</option>
                                {% endfor %}
                            </select>
                        </td>
                    </tr>
                </tbody>

                <tbody id="check_command_argument_table"></tbody>

                <tbody id="service_macros_table"></tbody>

                <tbody id="other_attributes_table"></tbody>
            </table>
        </div>


        </div>

        <table id="check_command_editor_tables">
            <tr>
                <td>Actual command_line</td>
                <td>
                    <pre id="command_line_preview">Loading...</pre>
                </td>
            </tr>
            <tr>
                <td>Original Command Line</td>
                <td>
                    <pre  id="original_command_line"></pre>
                </td>
            </tr>
            <tr class="hide">
                <td>Output from plugin</td>
                <td>
                    <pre id="plugin_output">Command has not been run yet</pre>
                </td>
            </tr>

        </table>
        <button id="check_command_save_button" data-loading-text='<img src="{% url media path="select2/spinner.gif" %}"> <span id="check_command_saving_text"> Saving...</span>' class="btn btn-primary">Save changes</button>
        <style>
        .macro_in_a_text {
            color: #b70000;
            font-size:  80%;
            font-weight: bold;
        }

        .argument_div {
            border: 1px solid #eee;
            margin: 20px;
            padding: 10px;
        }
        </style>
    {% endif %}
{% endblock %}

{% block footer %}
    {{ block.super }}


        <script>

            $(document).ready(function(){

                editor = adagios.objectbrowser.CheckCommandEditor( {
                    host_name: "{{ host_name }}",
                    check_command: "{{ check_command }}",
                    service_description : "{{ service_description }}"
                });
                editor.generate_input_fields();

                // When check_command is changed, lets recreate the input fields:
                $("#check_command_select").change( function() {
                    editor.check_command = $('#check_command_select').find(":selected").text();
                    editor.generate_input_fields();
                });

                // When the special save button is called, we call save
                $("#check_command_save_button").click( function() {
                    editor.save_check_command();
                });

            });



        </script>


{% endblock %}