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

{% block title %}Kentik plugin v{{ plugin_version }}{% endblock %}

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

{% block tabs %}
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item" role="presentation">
      <a class="nav-link active" id="status-tab" data-bs-toggle="tab" data-bs-target="#status-panel" type="button" role="tab" aria-selected="true">
        {% trans "Status" %}
      </a>
    </li>
     <li class="nav-item" role="presentation">
      <a class="nav-link" id="config-tab" data-bs-toggle="tab" data-bs-target="#config-panel" type="button" role="tab">
        {% trans "Config" %}
      </a>
    </li>
  </ul>
{%  endblock tabs %}

{% block content %}

  {# Status panel #}
  <div class="tab-pane show active" id="status-panel" role="tabpanel" aria-labelledby="status-tab">
    <div class="row mb-3">
      <div class="col-md-6">
        <!-- API sync status -->
        <div class="card">
          <h2 class="card-header">{% trans "API sync" %}</h2>
          {% include 'netbox_kentik/inc/job_error_alert.html' with job=api_last_job %}
          {% if api_last_run %}
          <table class="table table-hover attr-table">
              <tr>
                  <th scope="row">{% trans "Last run" %}</th>
                  <td>{{ api_last_run|isodatetime }}</td>
              </tr>
            <tr>
              <th scope="row">{% trans "Last job" %}</th>
              <td>{% include 'netbox_kentik/inc/job_status.html' with job=api_last_job %}</td>
            </tr>
             <tr>
              <th scope="row">{% trans "Expires at" %}</th>
                  <td>{% if api_expires_at %}{{ api_expires_at|isodatetime }}{% else %}{% trans "Never" %}{% endif %}</td>
            </tr>
             <tr>
              <th scope="row">{% trans "TTL" %}</th>
              <td>{{ plugin_settings.cache_ttl }} seconds</td>
            </tr>
            <tr>
              <th scope="row">{% trans "Kentik devices" %}</th>
              <td>{{ api_total_devices }}</td>
            </tr>
            <tr>
              <th scope="row">{% trans "Kentik sites" %}</th>
              <td>{{ api_total_sites }}</td>
            </tr>
          </table>
          {% elif not api_last_job or api_last_job.status == 'completed' %}
          <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">
              {% blocktrans %}
                  API sync has not been run yet.
              {% endblocktrans %}
              </span>
          </div>
          {% endif %}
          <div class="card-body">
            {% if can_run %}
              <form action="{% url 'plugins:netbox_kentik:apisync_trigger' %}" method="post">
                {% csrf_token %}
                <button type="submit" class="btn btn-primary">
                  <i class="mdi mdi-sync" aria-hidden="true"></i> {% trans "Sync now" %}
                </button>
              </form>
            {% else %}
              <span class="inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-delay="100" data-bs-placement="bottom" title="{% trans 'You do not have permission to run the Kentik API sync and reconciliation' %}">
                <button class="btn btn-primary" disabled>
                  <i class="mdi mdi-sync" aria-hidden="true"></i> {% trans "Sync now" %}
                </button>
              </span>
            {% endif %}
          </div>
        </div>
      </div>
        <div class="col-md-6">
        <!-- Reconciliation  status -->
        <div class="card">
          <h2 class="card-header">{% trans "Reconciliation" %}</h2>
          {% include 'netbox_kentik/inc/job_error_alert.html' with job=reconcile_last_job %}
          {% if rrc.has_reconciliation_run %}
          <table class="table table-hover attr-table">
            <tr>
              <th scope="row">{% trans "Last run" %}</th>
              <td>{% if rrc.last_run %}{{ rrc.last_run|isodatetime }}{% else %}{% trans "Never" %}{% endif %}</td>
            </tr>
            <tr>
              <th scope="row">{% trans "Last job" %}</th>
              <td>{% include 'netbox_kentik/inc/job_status.html' with job=reconcile_last_job %}</td>
            </tr>
            <tr>
              <th scope="row">{% trans "Last trigger" %}</th>
              <td>{{ rrc.last_trigger }}</td>
            </tr>
             <tr>
              <th scope="row">{% trans "Expires at" %}</th>
              <td>{% if rrc.expires_at %}{{ rrc.expires_at|isodatetime }}{% else %}{% trans "Never" %}{% endif %}</td>
            </tr>
             <tr>
              <th scope="row">{% trans "TTL" %}</th>
              <td>{{ plugin_settings.cache_ttl }} seconds</td>
            </tr>
            <tr>
              <th scope="row">{% trans "Device matching" %}</th>
              <td>{% include 'netbox_kentik/inc/policy_counts.html' with rows=device_policy_rows %}</td>
            </tr>
            <tr>
              <th scope="row">{% trans "Site matching" %}</th>
              <td>{% include 'netbox_kentik/inc/policy_counts.html' with rows=site_policy_rows %}</td>
            </tr>
            <tr>
              <th scope="row">{% trans "Kentik devices matched" %}</th>
              <td>{% include 'netbox_kentik/inc/match_graph.html' with matched=rrc.num_matched_kentik_devices total=api_total_devices fill=True %}</td>
            </tr>
            <tr>
              <th scope="row">{% trans "Kentik sites matched" %}</th>
              <td>{% include 'netbox_kentik/inc/match_graph.html' with matched=rrc.num_matched_kentik_sites total=api_total_sites fill=True %}</td>
            </tr>
            <tr>
              <th scope="row">{% trans "NetBox devices matched" %}</th>
              <td>{% include 'netbox_kentik/inc/match_graph.html' with matched=rrc.num_matched_netbox_devices total=netbox_total_devices fill=True %}</td>
            </tr>
            <tr>
              <th scope="row">{% trans "NetBox sites matched" %}</th>
              <td>{% include 'netbox_kentik/inc/match_graph.html' with matched=rrc.num_matched_netbox_sites total=netbox_total_sites fill=True %}</td>
            </tr>
          </table>
          {% elif not reconcile_last_job or reconcile_last_job.status == 'completed' %}
          <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">
              {% blocktrans %}
                  Reconciliation has not been run yet.
              {% endblocktrans %}
              </span>
          </div>
          {% endif %}
          <div class="card-body">
            {% if not can_run %}
              <span class="inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-delay="100" data-bs-placement="bottom" title="{% trans 'You do not have permission to run the Kentik API sync and reconciliation' %}">
                <button class="btn btn-primary" disabled>
                  <i class="mdi mdi-sync" aria-hidden="true"></i> {% trans "Reconcile now" %}
                </button>
              </span>
            {% elif reconciliation_possible %}
              <form action="{% url 'plugins:netbox_kentik:reconcile_trigger' %}" method="post">
                {% csrf_token %}
                <button type="submit" class="btn btn-primary">
                  <i class="mdi mdi-sync" aria-hidden="true"></i> {% trans "Reconcile now" %}
                </button>
              </form>
            {% else %}
              <span class="inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-delay="100" data-bs-placement="bottom" title="{% trans 'Reconciliation is not possible until the API sync cache is populated' %}">
                <button class="btn btn-primary" disabled>
                  <i class="mdi mdi-sync" aria-hidden="true"></i> {% trans "Reconcile now" %}
                </button>
              </span>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>

    {# Config panel #}
  <div class="tab-pane show" id="config-panel" role="tabpanel" aria-labelledby="config-tab">
    <div class="row mb-3">
      <div class="col">
        <!-- Configuration card -->
        <div class="card">
          <h2 class="card-header">{% trans "Configuration" %}</h2>
          <table class="table table-hover attr-table">
            <tr>
              <th scope="row">{% trans "Cache seed" %}</th>
              <td>{{ plugin_settings.cache_seed }}</td>
            </tr>
            <tr>
              <th scope="row">{% trans "Environment ID" %}</th>
              <td>{{ plugin_settings.environment }}</td>
            </tr>
            <tr>
              <th scope="row">{% trans "Environment name" %}</th>
              <td>{{ plugin_settings.environment_name }}</td>
            </tr>
            <tr>
              <th scope="row">{% trans "URL gRPC API" %}</th>
              <td>{{ plugin_settings.url_grpc_api }}</td>
            </tr>
            <tr>
              <th scope="row">{% trans "URL Portal" %}</th>
                <td><a href="{{ plugin_settings.url_portal }}" target="_blank">{{ plugin_settings.url_portal }}</a></td>
            </tr>
            <tr>
              <th scope="row">{% trans "URL Knowledgebase" %}</th>
              <td>{{ plugin_settings.url_kb }}</td>
            </tr>
            <tr>
              <th scope="row">{% trans "Authentication email" %}</th>
              <td>{{ plugin_settings.api_auth_email }}</td>
            </tr>
            <tr>
              <th scope="row">{% trans "API timeout" %}</th>
              <td>{{ plugin_settings.api_timeout }} seconds</td>
            </tr>
            <tr>
              <th scope="row">{% trans "Device matching" %}</th>
              <td>{% for policy in plugin_settings.device_matching_policies %}<code>{{ policy }}</code>{% if not forloop.last %}<br/>{% endif %}{% endfor %}</td>
            </tr>
            <tr>
              <th scope="row">{% trans "Site matching" %}</th>
              <td>{% for policy in plugin_settings.site_matching_policies %}<code>{{ policy }}</code>{% if not forloop.last %}<br/>{% endif %}{% endfor %}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="alert alert-info d-flex align-items-center" role="alert">
      <span class="text-info fs-1">
        <i class="mdi mdi-information"></i>
      </span>
      <span class="flex-fill">
      {% blocktrans with kb_url=plugin_settings.url_kb %}
          Having issues? Please visit <a href="{{ kb_url }}docs/netbox" target="_blank">{{ kb_url }}docs/netbox</a>.
      {% endblocktrans %}
      </span>
  </div>

{% endblock content %}