{% extends 'base/layout.html' %}
{% load buttons %}
{% load helpers %}
{% load plugins %}
{% load render_table from django_tables2 %}
{% load static %}
{% load i18n %}

{% block title %}
  Onboard Devices
{% endblock %}

{% comment %}
Blocks:
  extra_controls: Additional action buttons
  bulk_buttons: Additional bulk action buttons to display beneath the objects
    list

Context:
  model: The model class being listed
  table: The table class used for rendering the list of objects
  actions: A list of buttons to display. This template checks for add, import,
    export, bulk_edit, and bulk_delete.
  filter_form: The bound filterset form for filtering the objects list (optional)
  return_url: Return URL to use for bulk actions (optional)
{% endcomment %}

{% block header %}
  <div class="title-container px-3">

    {# Title #}
    
    <div id="content-title">
      {% include "slurpit_netbox/logo.html" %}
      {# Center-align title in object-edit views #}
      <h1 class="h2 w-100">Reconcile</h1>
    </div>

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

  </div>
{% endblock header %}

{% block tabs %}
<ul class="nav nav-tabs px-3">    
  <li class="nav-item" role="presentation">
    <a class="nav-tab nav-link {% if request.GET.tab == 'ipam' or request.GET.tab is None %}active{% endif %}" href="?tab=ipam">
      IPAM {% badge ipam_count %}
    </a>
  </li>

  <li class="nav-item" role="presentation">
    <a class="nav-tab nav-link {% if request.GET.tab == 'interface' %}active{% endif %}" href="?tab=interface">
      Interfaces {% badge interface_count %}
    </a>
  </li>
  
  <li class="nav-item" role="presentation">
    <a class="nav-tab nav-link {% if request.GET.tab == 'prefix' %}active{% endif %}" href="?tab=prefix">
      Prefixes {% badge prefix_count %}
    </a>
  </li>


</ul>
{% endblock tabs %}

{% block content-wrapper %}
  <div class="tab-content">
    <div class="show active">

        <input type="hidden" results="5" name="q" id="quicksearch" class="form-control" placeholder="Quick search"
              hx-get="{{ request.full_path }}" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search" />

      
        <form method="post" class="form form-horizontal" id="reconcile_form">
          {% csrf_token %}
          <div id="select-all-box" class="d-none card noprint">
            <div class="form col-md-12">
              <div class="card-body">
                <div class="form-check">
                  <input type="checkbox" id="select-all" name="_all" class="form-check-input" />
                  <label for="select-all" class="form-check-label">
                    {% blocktrans trimmed with count=table.rows|length object_type_plural=table.data.verbose_name_plural %}
                      Select <strong>all {{ count }} {{ object_type_plural }}</strong> matching query
                    {% endblocktrans %}
                  </label>
                </div>
              </div>
            </div>
          </div>


            <div class="noprint bulk-buttons">
                <div class="bulk-button-group">
                    <div class="" role="group">
                        <a class="btn btn-success btn-sm me-2" data-bs-toggle="modal" data-bs-target="#acceptModal">
                            <i class="mdi mdi-check" aria-hidden="true"></i> 
                            <span id="syncCaption">{% trans "Accept" %}</span>
                        </a>

                        <a class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#declineModal">
                          <i class="mdi mdi-close" aria-hidden="true"></i> {% trans "Decline" %}
                        </a>
                    </div>
                </div>
            </div>

            <div class="form form-horizontal">
                {% csrf_token %}
                <input type="hidden" name="action" value="accept" id="action_input" />
                <input type="hidden" name="tab" value="{{ request.GET.tab }}" id="tab_input" />
                <input type="hidden" name="return_url" value="{% if return_url %}{{ return_url }}{% else %}{{ request.path }}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}{% endif %}" />
        
                {# Object table #}
        
                    {% if prerequisite_model %}
                      {% include 'inc/missing_prerequisites.html' %}
                    {% endif %}
        
                <div class="card">
                  <div class="card-body htmx-container table-responsive" id="object_list">
                    {% include 'htmx/table.html' %}
                  </div>
                </div>
        
                
              </div>
              
        </form>
    </div>
  </div> 

  <div class="modal fade" tabindex="-1" id="declineModal">
    <div class="modal-dialog modal-md">
      <div class="modal-content">
  
        <!-- Modal Header -->
        <div class="modal-header">
          <h6 class="modal-title">Are you sure to decline the selected records?</h6>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
  
        <!-- Modal Footer -->
        <div class="modal-footer">
            <a class="btn btn-danger btn-sm" id="decline_btn">{% trans "Decline" %}</a>
            <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
        </div>
  
        
      </div>
    </div>
  </div>

  <div class="modal fade" tabindex="-1" id="acceptModal">
    <div class="modal-dialog modal-md">
      <div class="modal-content">
  
        <!-- Modal Header -->
        <div class="modal-header">
          <h6 class="modal-title">Are you sure to accept the selected records?</h6>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
  
        <!-- Modal Footer -->
        <div class="modal-footer">
            <a class="btn btn-success btn-sm" id="accept_btn">{% trans "Accept" %}</a>
            <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
        </div>
  
        
      </div>
    </div>

    
  </div>

  <script>
    var reconcile_form = document.getElementById('reconcile_form')
    var accept_btn = document.getElementById('accept_btn')
    var decline_btn = document.getElementById('decline_btn')
    var action_input = document.getElementById('action_input')

    accept_btn.addEventListener("click", function(event) {
      action_input.value = "accept"
      reconcile_form.submit()
    });

    decline_btn.addEventListener("click", function(event) {
      action_input.value = "decline"
      reconcile_form.submit()
    });

  </script>
{% endblock content-wrapper %}




<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">{% annotated_now %} {% 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_netbox.version }})</span>
      </div>

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

   

