{% extends "templates/base.html" %}

{% block scripts %}
{{super()}}
<script type="text/javascript">
  $(function() {
    var clearAlert = function(alertSelector) {
      $('#alerts').find(alertSelector).find('> div').remove();
    };

    var showAlert = function(alertSelector, html) {
      $('#alerts').find(alertSelector).append(html);
    }

    var setupAPIRequestButton = function(buttonSelector, url, alertSelector, titleSuccess, titleError) {
      var button = $(buttonSelector);
      button.click(function() {
        clearAlert(alertSelector);
        button.attr("disabled", true);
        $(document.body).css("cursor", 'wait');

        // call Admin GUI service
        $.post(
          url,
          {
            csrf_token: '{{ csrf_token() }}'
          }
        ).done(function(data, status) {
          button.prop("disabled", false);
          $(document.body).css("cursor", '');

          // show response
          var html = '';
          html += '<div class="alert alert-light" role="alert">';
          html +=   '<strong>' + titleSuccess + '</strong>';
          html +=   '<pre>';
          html +=     data;
          html +=   '</pre>';
          html += '</div>';
          showAlert(alertSelector, html);
        }).fail(function(jqXHR, status) {
          button.prop("disabled", false);
          $(document.body).css("cursor", '');

          // show errors
          var msg = jqXHR.statusText;
          if (jqXHR.status === 504) {
            msg = `{{ i18n('interface.main.timeout_error') }}`.replace(/\n/g, "<br/>");
          }
          else if (jqXHR.responseJSON) {
            msg = jqXHR.responseJSON.replace(/\n/g, "<br/>").replace(/ /g, "&nbsp;");
          }
          else if (jqXHR.responseText.indexOf("<p>The CSRF token is invalid.</p>") != -1) {
            msg = "The CSRF token is invalid. Please reload this page and retry.";
          }
          else if (jqXHR.responseText) {
            msg = '<pre>' + jqXHR.responseText + '</pre>';
          }

          var html = '';
          html += '<div class="alert alert-danger" role="alert">';
          html +=   '<strong>' + titleError + '</strong><br/>';
          html +=   '<div style="font-family: monospace">' + msg + '</div>';
          html += '</div>';
          showAlert(alertSelector, html);
        });
      });
    }

    {% if have_config_generator %}
      setupAPIRequestButton(
        '#generate_configs',
        "{{ url_for('generate_configs') }}",
        '#alert-generate_configs',
        "Service configurations generated:",
        "Error while refreshing config cache:"
      );
    {% endif %}

    {% if solr_index_update_enabled %}
      setupAPIRequestButton(
        '#update_solr_index',
        "{{ url_for('update_solr_index') }}",
        '#alert-update_solr_index',
        "Solr search index update:",
        "Error while updating Solr search index:"
      );
    {% endif %}
  });
</script>
{% endblock %}

{% block title %}{{ i18n('interface.main.home_title') }}{% endblock %}
{% block container %}

  <h1>{{ admin_gui_title }}</h1>
  {{ admin_gui_subtitle }}

  {% if have_config_generator %}
  <br><br>
  <button id="generate_configs" class="btn btn-success">
    {{ utils.render_icon('arrow-clockwise') }} {{ i18n('interface.main.generate_configs') }}
  </button>
  {% endif %}

  {% if solr_index_update_enabled %}
  <br><br>
  <button id="update_solr_index" class="btn btn-success">
    {{ utils.render_icon('arrow-clockwise') }} Update Solr search index
  </button>
  {% endif %}

  <div id="alerts" class="row">
    <br/>
    {% if have_config_generator %}
      <div id="alert-generate_configs" class="mt-2"></div>
    {% endif %}
    {% if solr_index_update_enabled %}
      <div id="alert-update_solr_index" class="mt-2"></div>
    {% endif %}
  </div>
{% endblock %}
