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

{% block title %}{% trans "Object Sync" %}{% endblock %}

{% block head %}
<link rel="stylesheet" href="{% url 'plugins:netbox_nsm:plugin_asset' asset_path='css/object_sync.css' %}?v=1">
{% endblock head %}

{% block content %}
<form id="object-sync-quicksearch" method="get" action="{% url 'plugins:netbox_nsm:object_sync' %}" class="visually-hidden">
  {% if source_filter %}<input type="hidden" name="source" value="{{ source_filter }}">{% endif %}
  {% if request.GET.sync_per_page %}<input type="hidden" name="sync_per_page" value="{{ request.GET.sync_per_page }}">{% endif %}
  {% for key, value in request.GET.items %}
    {% if key|slice:":3" == "sf_" %}
    <input type="hidden" name="{{ key }}" value="{{ value }}">
    {% endif %}
  {% endfor %}
</form>

<div class="row mb-3">
  <div class="col">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'plugins:netbox_nsm:objectconfig_list' %}">{% trans "Configuration" %}</a></li>
        <li class="breadcrumb-item active">{% trans "Object Sync" %}</li>
      </ol>
    </nav>
    <h1 class="h2">{% trans "Object Sync" %}</h1>
    <p class="text-muted">{% trans "Review IPAM ↔ nsm_address sync status and apply fixes." %}</p>
  </div>
</div>

{% if not sync_enabled %}
<div class="alert alert-warning">
  {% trans "Object Sync is disabled or not configured." %}
  <a href="{{ config_edit_url }}">{% trans "Edit Object Config for nsm_address" %}</a>
</div>
{% endif %}

<div class="row mb-4">
  <div class="col-md-12">
    <div class="card">
      <h5 class="card-header">{% trans "Overview" %}</h5>
      <div class="card-body">
        <div class="row text-center">
          {% for cat, label, count in sync_category_rows %}
          <div class="col-md-2 col-6 mb-2">
            <div class="h4 mb-0">{{ count }}</div>
            <small class="text-muted">{{ label }}</small>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row mb-3">
  <div class="col-auto">
    <form method="get" class="d-flex gap-2 align-items-center">
      <label class="form-label mb-0" for="source-filter">{% trans "Source" %}</label>
      <select name="source" id="source-filter" class="form-select form-select-sm" onchange="this.form.submit()">
        <option value="">{% trans "All sources" %}</option>
        {% for value, label in source_choices %}
        <option value="{{ value }}"{% if source_filter == value %} selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </form>
  </div>
</div>

<div class="card mb-4" id="object-sync">
  {% if can_fix_sync_issues %}
  <form method="post" id="object-sync-form">
    {% csrf_token %}
    {% include "netbox_nsm/inc/object_sync_query_hidden.html" %}
  {% endif %}
  <h5 class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
    <span>{% trans "Sync Report" %}</span>
    {% if can_fix_sync_issues %}
    <div class="btn-list">
      <button type="submit" name="bulk_fix" value="rename" class="btn btn-warning btn-sm" title="{% trans 'Rename selected objects to the expected name' %}">
        <i class="mdi mdi-rename-box" aria-hidden="true"></i> {% trans "Rename selected" %}
      </button>
      <button type="submit" name="bulk_fix" value="replace" class="btn btn-outline-warning btn-sm" title="{% trans 'Create correctly named objects and deprecate selected ones' %}">
        <i class="mdi mdi-plus-circle-outline" aria-hidden="true"></i> {% trans "Create new selected" %}
      </button>
      <button type="submit" name="bulk_fix" value="status" class="btn btn-outline-primary btn-sm" title="{% trans 'Fix status on selected objects' %}">
        <i class="mdi mdi-wrench" aria-hidden="true"></i> {% trans "Fix status selected" %}
      </button>
      <button type="submit" name="bulk_fix" value="create" class="btn btn-primary btn-sm" title="{% trans 'Create missing NSM address objects' %}">
        <i class="mdi mdi-plus" aria-hidden="true"></i> {% trans "Create selected" %}
      </button>
    </div>
    {% endif %}
  </h5>
  <div class="table-responsive">
    <table class="table table-hover table-headings mb-0">
      <thead>
        <tr>
          {% if can_fix_sync_issues %}
          <th class="w-1">
            <input type="checkbox" id="select-all-sync" class="form-check-input" title="{% trans 'Select all fixable issues on this page' %}">
          </th>
          {% endif %}
          <th>{% trans "Category" %}</th>
          <th>{% trans "Source" %}</th>
          <th>{% trans "IPAM / Address" %}</th>
          <th>{% trans "Expected name" %}</th>
          <th>{% trans "Status" %}</th>
          <th>{% trans "Details" %}</th>
          <th class="w-1">{% trans "Fix" %}</th>
        </tr>
        {% include "netbox_nsm/inc/object_sync_filter_row.html" with filter_columns=sync_filter_columns quicksearch_form_id="object-sync-quicksearch" show_selection_column=can_fix_sync_issues show_filter_actions=True show_fix_column=True filter_active=sync_filter_active clear_filters_url=sync_clear_filters_url %}
      </thead>
      <tbody>
        {% for issue in sync_issues %}
        <tr>
          {% if can_fix_sync_issues %}
          <td>
            {% if issue.sync_selection_id %}
            <input type="checkbox" name="sync_select" value="{{ issue.sync_selection_id }}" class="sync-fix-checkbox form-check-input">
            {% endif %}
          </td>
          {% endif %}
          <td><span class="badge text-bg-secondary">{{ issue.category }}</span></td>
          <td>{{ issue.source_key|default:"—" }}</td>
          <td>
            {% if issue.ipam_obj %}
              {% include "netbox_nsm/inc/object_sync_object_link.html" with obj=issue.ipam_obj %}
            {% elif issue.address_obj %}
              {% include "netbox_nsm/inc/object_sync_object_link.html" with obj=issue.address_obj %}
            {% elif issue.group_obj %}
              {% include "netbox_nsm/inc/object_sync_object_link.html" with obj=issue.group_obj %}
            {% else %}
              &mdash;
            {% endif %}
          </td>
          <td>
            {% if issue.expected_name %}
            <code>{{ issue.expected_name }}</code>
            {% else %}
            &mdash;
            {% endif %}
          </td>
          <td>
            {% if issue.expected_status %}
              {{ issue.expected_status }}
              {% if issue.category == "missing" and not issue.can_create %}
              <span class="badge text-bg-secondary ms-1">{% trans "not buildable" %}</span>
              {% endif %}
            {% elif issue.actual_status %}
              {{ issue.actual_status }}
            {% else %}
              &mdash;
            {% endif %}
          </td>
          <td class="small">
            {% if issue.expected_status and issue.actual_status %}
            <div>{% trans "Expected status" %}: {{ issue.expected_status }} / {% trans "actual" %}: {{ issue.actual_status }}</div>
            {% endif %}
            {% if issue.addresses %}
              <div>
                {% trans "Addresses" %}:
                {% for addr in issue.addresses %}
                  {% include "netbox_nsm/inc/object_sync_object_link.html" with obj=addr %}{% if not forloop.last %}, {% endif %}
                {% endfor %}
              </div>
            {% endif %}
            {% if issue.groups %}
              <div>
                {% trans "Groups" %}:
                {% for grp in issue.groups %}
                  {% include "netbox_nsm/inc/object_sync_object_link.html" with obj=grp %}{% if not forloop.last %}, {% endif %}
                {% endfor %}
              </div>
            {% endif %}
            {% if issue.member_issues %}<div>{% trans "Member issues" %}: {{ issue.member_issues|join:", " }}</div>{% endif %}
            {% if issue.detail %}{{ issue.detail }}{% endif %}
          </td>
          <td class="text-nowrap">
            {% if issue.has_fix_actions and can_fix_sync_issues %}
            <div class="d-inline-flex flex-wrap gap-1">
              {% for action in issue.fix_actions %}
              <button type="submit"
                      name="fix"
                      value="{{ action.token }}"
                      class="btn btn-sm {{ action.btn_class }}"
                      title="{{ action.title }}">
                <i class="mdi {{ action.icon }}" aria-hidden="true"></i>
                {{ action.label }}
              </button>
              {% endfor %}
            </div>
            {% else %}
            &mdash;
            {% endif %}
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="{% if can_fix_sync_issues %}8{% else %}7{% endif %}" class="text-muted text-center">
            {% if sync_filter_active %}
              {% trans "No sync issues match the current filters." %}
            {% else %}
              {% trans "No sync issues found." %}
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% include "netbox_nsm/inc/object_sync_pagination.html" %}
  {% if can_fix_sync_issues %}
  </form>
  {% endif %}
</div>

<script src="{% url 'plugins:netbox_nsm:plugin_asset' asset_path='js/object_sync_filters.js' %}?v=1"></script>
<script>
document.getElementById('select-all-sync')?.addEventListener('change', function () {
  const table = this.closest('table');
  table?.querySelectorAll('.sync-fix-checkbox').forEach(cb => { cb.checked = this.checked; });
});
</script>
{% endblock %}