{% extends 'devices/router/_base.html' %}
{% block subcontent %}
<div class="row">
  <div class="col-md-2">
    {% if perms.devices.deploy_router_configuration %}
    {% if instance.is_usable_for_task %}
    <div class="form-check form-switch w-100 mb-3">
      <input class="form-check-input" type="checkbox" id="compare-switch" checked>
      <label class="form-check-label" for="compare-switch">Compare before commit</label>
    </div>
    <button type="button" class="btn btn-primary w-100 mb-3" id="deploy"{% if not instance.is_usable_for_task %} disabled{% endif %}>
      <i class="fa fa-cogs"></i> Deploy
    </button>
    {% endif %}
    {% endif %}
    {% if perms.devices.push_router_configuration_to_data_source %}
    <button type="button" class="btn btn-outline-primary w-100 mb-3" id="push-datasource">
      <i class="fa fa-cogs"></i> Push to data source
    </button>
    {% endif %}
    <button type="button" class="btn btn-secondary w-100 mb-3" id="copy-config">
      <i class="fa fa-clipboard"></i> Copy
    </button>
    <a href=".?raw" class="btn btn-outline-secondary w-100">
      <i class="fa-fw fa-solid fa-file-alt"></i> Raw output
    </a>
  </div>
  <div class="col" id="configuration"></div>
</div>
{% if perms.devices.deploy_router_configuration and instance.is_usable_for_task %}
<div class="modal fade" id="main-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" id="main-dialog" role="document">
    <div class="modal-content" id="main-content">
      <div class="modal-header" id="main-header">
        <h5 class="modal-title" id="main-title">Configuration Deployment</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="main-body">
      </div>
      <div class="modal-footer" id="main-footer">
        <button type="button" class="btn btn-primary invisible" id="commit">Commit changes</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}
{% block javascript %}
<script>
  $(document).ready(function () {
    $.ajax({
      method: 'get',
      url: "{% url 'devices-api:router-configuration' pk=instance.pk %}"
    }).done(function (r) {
      $('#configuration').html('<div class="text-center" style="font-size: 2rem;"><i class="fa-fw fa-solid fa-rotate fa-spin"></i> Working</div>');
      configDoneHandler(r);
    }).fail(function () {
      $('#configuration').html('<p>Unable to render router configuration.</p>');
    });
  });

  // Bind copy to clipboard function to the button
  $('#copy-config').click(function () {
    var temp = $('<textarea>');
    $('body').append(temp);
    temp.val($('.pre-scrollable').text()).select();
    document.execCommand('copy');
    temp.remove();
  });

  function configDoneHandler(r) {
    switch (r['status']['value']) {
      case 'pending':
      case 'running':
        setTimeout(function() {
          PeeringManager.pollJob(r, configDoneHandler);
        }, 2000);
        break;
      case 'completed':
        var formatted;
        var config = r['output'];
        if (config == "") {
          formatted = '<p>Configuration is empty.</p>';
        } else {
          formatted = '<pre class="pre-scrollable"><code>' + PeeringManager.escapeHTML(config) + '</code></pre>';
        }
        $('#configuration').html(formatted);
        break;
      case 'errored':
      case 'failed':
      default:
        $('#configuration').html('<p>An error occured while generating the configuration.</p>');
        break;
    }
  }

  {% if perms.devices.deploy_router_configuration and instance.is_usable_for_task %}
  function deployFailHandler() {
    PeeringManager.setFailedButton($('#commit'), 'An error occurred');
  }
  function deployDoneHandler(r) {
    switch (r['status']['value']) {
      case 'pending':
      case 'running':
        setTimeout(function () {
          PeeringManager.pollJob(r, deployDoneHandler, deployFailHandler);
        }, 2000);
        break;
      case 'completed':
        PeeringManager.setSuccessButton($('#commit'), 'Configuration saved');
        break;
      case 'errored':
      case 'failed':
      default:
        $('#main-body').html('<p>An error occured while trying to commit the configuration changes.</p><p>You can find more details in the napalm logs or below.</p><pre class="pre-scrollable">' + r['output'] + '</pre>');
        PeeringManager.setFailedButton($('#commit'), 'Configuration not saved');
        break;
    }
  }
  function checkDoneHandler(r) {
    switch (r['status']['value']) {
      case 'pending':
      case 'running':
        setTimeout(function() {
          PeeringManager.pollJob(r, checkDoneHandler);
        }, 2000);
        break;
      case 'completed':
        var modal_text;
        var output = r['output'];
        if (output == "") {
          modal_text = '<p>No configuration differences found.</p>';
        } else {
          modal_text = '<p>Configuration differences:</p><pre class="pre-scrollable">' + PeeringManager.escapeHTML(output) + '</pre>';
          if (maintenance) {
            modal_text = '<div class="alert alert-warning" role="alert">This router is in maintenance, proceed with care!</div>' + modal_text;
          }
          $('#commit').removeClass('invisible');
        }
        $('#main-body').html(modal_text);
        break;
      case 'errored':
      case 'failed':
      default:
        $('#main-body').html('<p>An error occured while trying to check for changes.</p><p>The router may be unreachable, the configuration may be locked by another user or the configuration may be invalid.</p><p>You can find more details in the <code>logs/napalm.log</code> logs file or below.</p><pre class="pre-scrollable">' + r['output'] + '</pre>');
        break;
    }
  }

  // When the modal is closed, reset the button back to its defaults
  $('#main-modal').on('hidden.bs.modal', function (e) {
    var button = $('#commit');
    button.removeAttr('disabled');
    button.removeClass(['btn-warning', 'btn-danger', 'btn-success']).addClass(['btn-primary', 'invisible']);
    button.html('Commit changes');
    console.log(button);
  });

  var maintenance = {% if instance.status == 'maintenance' %}true{% else %}false{% endif %};
  $('#deploy').click(function () {
    // Enable compare before commit if switch is checked or if the router is in maintenance mode
    var commit = true;
    if ($('#compare-switch').is(':checked') || maintenance) {
      commit = false;
    }

    $.ajax({
      method: 'post',
      url: "{% url 'devices-api:router-configure' %}",
      headers: { 'X-CSRFTOKEN': '{{ csrf_token }}' },
      data: { 'routers': [{{ instance.pk }}], 'commit': commit },
    }).done(function (r) {
      $('#main-body').html('<div class="text-center" style="font-size: 2rem;"><i class="fa-fw fa-solid fa-rotate fa-spin"></i> Working</div>');
      $('#main-modal').modal('show');
      checkDoneHandler(r[0]);
    }).fail(function (r) {
      $('#main-body').html('<p>Unable to schedule configuration deployment.</p><pre class="pre-scrollable">' + r + '</pre>');
      $('#main-modal').modal('show');
    });
  });
  $('#commit').click(function () {
    $.ajax({
      method: 'post',
      url: "{% url 'devices-api:router-configure' %}",
      headers: { 'X-CSRFTOKEN': '{{ csrf_token }}' },
      data: { 'routers': [{{ instance.pk }}], 'commit': true },
    }).done(function (r) {
      PeeringManager.setWorkingButton($('#commit'));
      deployDoneHandler(r[0]);
    });
  });
  {% endif %}
  {% if perms.devices.push_router_configuration_to_data_source %}
  function configPushDataSourceHandler(r) {
    switch (r['status']['value']) {
      case 'pending':
      case 'running':
        setTimeout(function() {
          PeeringManager.pollJob(r, configPushDataSourceHandler);
        }, 2000);
        break;
      case 'completed':
        PeeringManager.setSuccessOutlineButton($('#push-datasource'), 'Pushed to data source');
        break;
      case 'errored':
      case 'failed':
      default:
        PeeringManager.setFailedOutlineButton($('#push-datasource'), 'Failed data source push');
        break;
    }
  }
  $('#push-datasource').click(function () {
    $.ajax({
      method: 'post',
      url: "{% url 'devices-api:router-push-datasource' %}",
      headers: { 'X-CSRFTOKEN': '{{ csrf_token }}' },
      data: { 'routers': [{{ instance.pk }}] },
    }).done(function (r) {
      PeeringManager.setWorkingOutlineButton($('#push-datasource'));
      configPushDataSourceHandler(r[0]);
    });
  });
  {% endif %}
</script>
{% endblock %}