{% extends 'layout.html' %}
{% import '_macros.html' as macros %}

{% block head %}
    {% if config.OFFLINE_MODE %}
    <link href='{{ url_for('static', filename='datatables-buttons-2.2.1/buttons.semanticui.min.css') }}' rel='stylesheet' type='text/css'>

    <script src="{{ url_for('static', filename='datatables-buttons-2.2.1/dataTables.buttons.min.js') }}"></script>
    <script src="{{ url_for('static', filename='datatables-buttons-2.2.1/buttons.semanticui.min.js') }}"></script>
    <script src="{{ url_for('static', filename='jszip-3.7.1/jszip.min.js') }}"></script>
    <script src="{{ url_for('static', filename='datatables-buttons-2.2.1/buttons.html5.min.js') }}"></script>
    {% else %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-buttons-se/2.2.1/buttons.semanticui.min.css" integrity="sha512-hl3VMm68d4X+QrotTnQNhYnc3zkDumRs7DzR+alVMCbtYB7yAcEB1KCnZNNbtV8pyt/jsL/fB59ZsOXnBFJSvw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables-buttons/2.2.1/js/dataTables.buttons.min.js" integrity="sha512-jkZdPkP9WyF6ZI8552JPp6HutV7Pb7Hhn++DCKkuToPPlTvB8Y7N3u+HoITJn/LQP9dEXarrfzqPlAmCA++BQw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-buttons-se/2.2.1/buttons.semanticui.min.js" integrity="sha512-b2Tf8aCqx6EZY5mJBmHlKfpwk2Zq8K1bRrsO4pogAUiZYTmHsIU+kxcjrU5wwHQRvdhHxTUQg7/sUe1JHrTt9g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js" integrity="sha512-xQBQYt9UcgblF6aCMrwU1NkVA7HCXaSN2oq0so80KO+y68M+n64FOcqgav4igHe6D5ObBLIf68DWv+gfBowczg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables-buttons/2.2.1/js/buttons.html5.min.js" integrity="sha512-LqvN9oWRj2YUmy7ZDYHOjWKc52n5zvDfYSmSEr07eOTFfmWXIfAmRD2ecj4jS+npR41A2xEZaWFf38SWfJIqig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    {% endif %}

    <style>
    .ui.buttons {
        margin-left: 2rem;
    }
    </style>
{% endblock head %}

{% block content %}
<h2>Compose</h2>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="ui {{ category }} message">
  {{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}

<script type="text/javascript">
  $(document).ready(function() {
    if (window.location.href.indexOf("#") > -1) {
        const pb_query = document.getElementById("query");
        const hrefArray = window.location.href.split("#");
        pb_query.value = decodeURI(hrefArray[1]);
    }
  });
</script>

<script type="text/javascript">
    function chgAction()
        {
        const pb_form = document.getElementById("form");
        const pb_query = document.getElementById("query");
        pb_form.action = pb_form.action + "#" + encodeURI(pb_query.value);
        pb_form.submit();
        }
</script>

<div class="ui form">
  <form method="POST" id="form" action="{{ url_for('query', env=current_env) }}">
    {{ form.csrf_token }}
    <div class="field {% if form.query.errors %} error {% endif %}">
      {{ form.query(autofocus="autofocus", rows=5, placeholder="nodes { certname = \"hostname\" }") }}
    </div>
    <div class="inline fields">
      <div class="field">
        API Endpoint: {{ form.endpoints() }}
      </div>
      <div class="field">
        {{ form.rawjson(active=True) }} Raw (but pretty and colored) JSON
      </div>
      <div class="ui active submit button" onclick="chgAction()">
          Submit
      </div>
    </div>
  </form>
</div>

{% if result or zero_results or error_text %}

<div class="row">
 <div class="span12">
  <h2 id="results_header">Result</h2>

  {% if result %}
    <p id="number_of_results" class="info_message">Number of results: {{ result | length }}</p>
    {% if form.rawjson.data %}
    <pre class="result" id="result"></pre>
    <script>
    try {
        $("#result").html(pretty_print(JSON.parse('{{ result | tojson }}')));
    } catch (e) {
        $("#result").html(pretty_print({{ result | tojson }}));
    }
    </script>
    {% else %}
    <table id="query_table" class='ui fixed compact very basic sortable table'>
        <thead>
        <tr>
        {% for column in columns %}
            <th>{{ column }}</th>
        {% endfor %}
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    {% endif %}

  {% elif zero_results %}

    <div class="ui warning message">
        <div class="header">Zero results</div>
        <p id="zero_results" class="warning_message">The query was successful but the response is empty. Please try changing query conditions.</p>
    </div>

  {% elif error_text %}

    <div class="ui error message">
        <div class="header">Invalid query</div>
        <pre id="invalid_query" class="error_message">{{ error_text }}</pre>
    </div>

  {% endif %}

 </div>
</div>
{% endif %}
{% endblock content %}

{% block onload_script %}
{% if not form.rawjson.data %}
    {% macro extra_options(caller) %}
    'columns': [
        {% for column in columns %}
        {
            "title": "{{ quote_columns_data(column) }}",
    {% if column in ['node', 'certname'] %}
            "render": function (data, type, full, meta) {
                return `<a href='{{ url_for("node", node_name="") }}${data}'>${data}</a>`
            },
    {% endif %}
        },
        {% endfor %}
    ],
    'serverSide': false,
    {% endmacro %}

    {% if not result %}
        {% set result = [] %}
    {% endif %}
    {{ macros.datatable_init(table_html_id="query_table", ajax_url=None, data=result|tojson, default_length=config.NORMAL_TABLE_COUNT, length_selector=config.TABLE_COUNT_SELECTOR, extra_options=extra_options) }}
{% endif %}
{% endblock onload_script %}