{% extends 'base/layout.html' %}
{% load i18n %}

{% block title %}{% trans "NetBox IP History" %}{% endblock %}

{% block head %}
<style>
  /* NetBox 4.x Core semantic colors for Event Types */
  .badge-event-created, .badge-event-create, .badge-event-assigned {
    background-color: var(--bs-success, #2fb344) !important;
    color: #fff !important;
  }
  .badge-event-updated, .badge-event-update {
    background-color: var(--bs-primary, #206bc4) !important;
    color: #fff !important;
  }
  .badge-event-deleted, .badge-event-delete, .badge-event-unassigned {
    background-color: var(--bs-danger, #d63939) !important;
    color: #fff !important;
  }
  .badge-event-reassigned {
    background-color: var(--bs-cyan, #17a2b8) !important;
    color: #fff !important;
  }
  .badge-event-hostname_changed, .badge-event-dns_changed {
    background-color: var(--bs-azure, #4299e1) !important;
    color: #fff !important;
  }
  .badge-event-status_changed {
    background-color: var(--bs-yellow, #f59f00) !important;
    color: #1e293b !important;
  }
  .badge-event-description_changed, .badge-event-owner_changed, .badge-event-interface_changed {
    background-color: var(--bs-purple, #6f42c1) !important;
    color: #fff !important;
  }
  .badge-event-imported {
    background-color: var(--bs-teal, #20c997) !important;
    color: #fff !important;
  }
  .badge-event-discovered {
    background-color: var(--bs-indigo, #6574cd) !important;
    color: #fff !important;
  }
  .badge-event-unknown {
    background-color: var(--bs-secondary, #6c757d) !important;
    color: #fff !important;
  }
  .kpi-card {
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .kpi-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
  .json-viewer {
    background-color: var(--bs-tertiary-bg, rgba(128, 128, 128, 0.08));
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius, 0.375rem);
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    max-height: 400px;
    overflow-y: auto;
    color: var(--bs-body-color);
  }
  .quicksearch {
    min-width: 260px;
  }
</style>
{% endblock %}

{% block header %}
  <div class="page-header m-0">
    <div class="container-fluid mt-2 d-print-none">
      <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
        <div>
          <h1 class="page-title d-flex align-items-center gap-2">
            <i class="mdi mdi-history text-primary"></i>
            <span>{% block page_title %}{% trans "IP History" %}{% endblock page_title %}</span>
          </h1>
          {% block subtitle %}{% endblock subtitle %}
        </div>
        <div class="d-print-none">
          <div class="btn-list">
            {% block extra_buttons %}
            <a href="{% url 'plugins:netbox_ip_history:history' %}" class="btn btn-primary" role="button">
              <i class="mdi mdi-magnify me-1" aria-hidden="true"></i> {% trans "Search" %}
            </a>
            <a href="{% url 'plugins:netbox_ip_history:import' %}" class="btn btn-cyan" role="button">
              <i class="mdi mdi-upload me-1" aria-hidden="true"></i> {% trans "Import" %}
            </a>
            <div class="dropdown">
              <button type="button" class="btn btn-purple dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="mdi mdi-download me-1" aria-hidden="true"></i> {% trans "Export" %}
              </button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="{% url 'plugins:netbox_ip_history:history' %}?export=csv{% if ip %}&ip={{ ip }}{% endif %}"><i class="mdi mdi-file-delimited-outline me-2 text-success"></i>{% trans "All Data (CSV)" %}</a></li>
                <li><a class="dropdown-item" href="{% url 'plugins:netbox_ip_history:history' %}?export=json{% if ip %}&ip={{ ip }}{% endif %}"><i class="mdi mdi-code-json me-2 text-info"></i>{% trans "All Data (JSON)" %}</a></li>
              </ul>
            </div>
            {% endblock extra_buttons %}
          </div>
        </div>
      </div>
    </div>

    {# Navigation Tabs matching NetBox 4.x #}
    <div class="page-tabs mt-3">
      <div class="container-fluid">
        <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item" role="presentation">
            <a class="nav-link {% if active_tab == 'history' %}active{% endif %}" href="{% url 'plugins:netbox_ip_history:history' %}">
              <i class="mdi mdi-timeline-clock-outline me-1"></i> {% trans "Timeline & Search" %}
            </a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link {% if active_tab == 'compare' %}active{% endif %}" href="{% url 'plugins:netbox_ip_history:compare' %}">
              <i class="mdi mdi-compare-horizontal me-1"></i> {% trans "Source Comparison" %}
            </a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link {% if active_tab == 'import' %}active{% endif %}" href="{% url 'plugins:netbox_ip_history:import' %}">
              <i class="mdi mdi-upload me-1"></i> {% trans "Import Data" %}
            </a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link {% if active_tab == 'import_jobs' %}active{% endif %}" href="{% url 'plugins:netbox_ip_history:import_jobs' %}">
              <i class="mdi mdi-format-list-bulleted-type me-1"></i> {% trans "Import Jobs" %}
            </a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link {% if active_tab == 'source_support' %}active{% endif %}" href="{% url 'plugins:netbox_ip_history:source_support' %}">
              <i class="mdi mdi-layers-triple-outline me-1"></i> {% trans "Source Support Matrix" %}
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
{% endblock header %}

{% block content %}
  {% block ip_history_content %}{% endblock %}
{% endblock content %}