{% extends 'generic/_base.html' %}
{% load buttons %}
{% load helpers %}
{% load i18n %}
{% load render_table from django_tables2 %}
{% load static %}

{% block title %}Kentik Reconciliation{% endblock %}

{% block controls %}
  <img src="{% static 'netbox_kentik/logo-small.png' %}" width="96" alt="Kentik logo"/>
{% endblock controls %}

{% block tabs %}
  {% if rrc.has_reconciliation_run %}
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item" role="presentation">
      <a class="nav-link active" id="devices-match-state-tab" data-bs-toggle="tab" data-bs-target="#devices-match-state-panel" type="button" role="tab" aria-selected="true">
        {% trans "Devices" %}
      </a>
    </li>
      <li class="nav-item" role="presentation">
      <a class="nav-link" id="sites-match-state-tab" data-bs-toggle="tab" data-bs-target="#sites-match-state-panel" type="button" role="tab" aria-selected="false">
        {% trans "Sites" %}
      </a>
    </li>
  </ul>
  {% endif %}
{% endblock tabs %}

{% block content %}
  {% if rrc.has_reconciliation_run %}
  <div class="tab-content">
  {# Device state panel #}
  <div class="tab-pane show active" id="devices-match-state-panel" role="tabpanel" aria-labelledby="devices-match-state-tab">
    {% include 'netbox_kentik/inc/reconciliation_table_controls.html' with table=devices_table table_modal="DeviceStateTable_config" graph_kind="devices" search_id="devices_quicksearch" results_id="object_list" %}
    <div class="row mb-3">
      <div class="col">
        <div class="card">
          <div class="htmx-container table-responsive" id="object_list">
            {% include 'htmx/table.html' with table=devices_table %}
          </div>
        </div>
      </div>
    </div>
  </div>
  {# Site state panel #}
  <div class="tab-pane" id="sites-match-state-panel" role="tabpanel" aria-labelledby="sites-match-state-tab">
    {% include 'netbox_kentik/inc/reconciliation_table_controls.html' with table=sites_table table_modal="SiteStateTable_config" graph_kind="sites" search_id="sites_quicksearch" results_id="site_object_list" %}
    <div class="row mb-3">
      <div class="col">
        <div class="card">
          <div class="htmx-container table-responsive" id="site_object_list">
            {% include 'htmx/table.html' with table=sites_table %}
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  {%  else %}
    <div class="alert alert-warning d-flex align-items-center" role="alert">
      <span class="text-warning fs-1">
        <i class="mdi mdi-alert"></i>
      </span>
      <span class="flex-fill">
          Reconciliation has not been run yet, debug jobs via <a href="{% url 'plugins:netbox_kentik:status_view' %}">plugin status</a>.
      </span>
  </div>
  {% endif %}

{% endblock content %}

{% block modals %}
  {% table_config_form devices_table table_name="DeviceStateTable" %}
  {% table_config_form sites_table table_name="SiteStateTable" %}
  {% include 'inc/htmx_modal.html' %}
{% endblock modals %}