{% extends 'slurpit_nautobot/base_object_list.html' %}
{% load buttons %}
{% load i18n %}
{% load helpers %}
{% load static %}
{% load perms %}

{% block title %}
  Data Mapping
{% endblock %}

{% block header %}
  <div class="title-container ps-4 pb-3">

    {# Title #}
    
    <div id="content-title" class="d-flex align-items-center">
      {% include "slurpit_nautobot/logo.html" %}
      <h1 class="ms-3 mb-0">Data Mapping</h1>
      <style>
        h1:before {
          content: '';
        }
      </style>
      {% block subtitle %}{% endblock %}
    </div>

    {# Controls #}
    {% block controls %}{% endblock controls %}

    <ul class="nav nav-tabs px-3">    
      <li class="nav-item" role="presentation">
        <a class="nav-tab nav-link {% if request.GET.tab == 'slurpit_to_nautobot' or request.GET.tab is None %}active{% endif %}" href="?tab=slurpit_to_nautobot">
          Slurp’it to Nautobot
        </a>
      </li>

      <li class="nav-item" role="presentation">
        <a class="nav-tab nav-link {% if request.GET.tab == 'nautobot_to_slurpit' %}active{% endif %}" href="?tab=nautobot_to_slurpit">
          Nautobot to Slurp’it
        </a>
      </li>
    </ul>

  </div>
{% endblock header %}

{% block content %}
  <div class="tab-content sub-tab-content">
    {% if request.GET.tab == 'slurpit_to_nautobot' or request.GET.tab is None %}
      {% include "slurpit_nautobot/mapping/slurpit_to_nautobot.html" %}
    {% elif request.GET.tab == 'nautobot_to_slurpit' %}
      {% include "slurpit_nautobot/mapping/nautobot_to_slurpit.html" %}
    {% endif %}
  </div> 

  <script>
    const projectButtons = document.querySelectorAll('.protect-btn');
  
    projectButtons.forEach(button => {
      button.addEventListener('click', protectButton);
    });
    function protectButton(event) {
      buttonName = event.target.textContent
      setTimeout(() => recoverButton(event, buttonName), 1500);
      event.target.classList.add('disabled');
      event.target.textContent = 'Please wait'
    }
    function recoverButton(event, buttonName) {
      event.target.classList.remove('disabled');
      event.target.textContent = buttonName
    }
  </script>

{% endblock content %}

<footer class="footer container-fluid">
  {% block footer %}
    <div class="row align-items-center justify-content-between mx-0">

      <div class="col-sm-12 col-md-auto fs-4 noprint">
        <nav class="nav justify-content-center justify-content-lg-start">
          {% block footer_links %}
            <a type="button" class="nav-link h6" href="https://slurpit.io" target="_blank">
              https://slurpit.io
            </a>
          {% endblock footer_links %}
        </nav>
      </div>

      <div class="col-sm-12 col-md-auto text-center text-lg-end text-muted"  >
        <span class="d-block d-md-inline">
          {% now 'T' %}
        </span>
        <span class="ms-md-3 d-block d-md-inline">{{ settings.HOSTNAME }} (v{{ settings.VERSION }})</span>
        <span class="ms-md-3 d-block d-md-inline">Slurpit(v{{ settings.PLUGINS_CONFIG.slurpit_nautobot.version }})</span>
      </div>

    </div>
  {% endblock footer %}
</footer>

{% block javascript %}
<script>
  // Change mapping item on test modal
  $("#id_mapping_item").on('select2:select', function(e){
    var mapping_id = e.params.data.id; // or event.target.value
    var data = new URLSearchParams();
    data.append('csrfmiddlewaretoken', csrfToken);
    data.append('item_id', mapping_id);
    data.append('subtab', subtab)
    
    fetch('/plugins/slurpit/data_mapping/?tab=nautobot_to_slurpit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: data
    }).then(function(response) {
      return response.json();
    }).then(function(res){
      const deviceRequestBody = JSON.stringify(res, null, 4); 
      payloadResultTextarea.value = deviceRequestBody;

    }).catch(function(error) {

    });
  })
</script>
{% endblock javascript %}