{% extends 'base/layout.html' %}
{% load buttons %}
{% load custom_links %}
{% load helpers %}
{% load perms %}
{% load plugins %}
{% load tabs %}

{% block header %}
<div class="d-flex justify-content-between align-items-center">
  {# Breadcrumbs #}
  <nav class="breadcrumb-container px-3" aria-label="breadcrumb">
    <ol class="breadcrumb">
      {% block breadcrumbs %}
      <li class="breadcrumb-item"><a href="{% url object|viewname:'list' %}">{{ object|meta:'verbose_name_plural'|bettertitle }}</a></li>
      {% endblock breadcrumbs %}
    </ol>
  </nav>
  {# Object identifier #}
  <div class="float-end px-3">
    <code class="text-muted">
          {% block object_identifier %}
            {{ object|meta:"app_label" }}.{{ object|meta:"model_name" }}:{{ object.pk }}
            {% if object.slug %}({{ object.slug }}){% endif %}
          {% endblock object_identifier %}
        </code>
  </div>
</div>
{{ block.super }}
{% endblock %}

{% block title %}{{ object }}{% endblock %}

{% block subtitle %}
<div class="object-subtitle">
  <span>Created {{ object.created|annotated_date }}</span>
  <span class="separator">&middot;</span>
  <span>Updated <span title="{{ object.last_updated }}">{{ object.last_updated|timesince }}</span> ago</span>
</div>
{% endblock %}

{% block controls %}
{# Clone/Edit/Delete Buttons #}
<div class="controls">
  <div class="control-group">
    {% custom_links object %}
  </div>
{% if perms.core.sync_datasource %}
{% if object.sync.ready_for_sync %}
  <a href="#"
  hx-get="{% url 'plugins:ipfabric_netbox:ipfabricbranch_merge' pk=object.pk %}"
  hx-target="#htmx-modal-content"
  class="btn btn-sm btn-success"
  data-bs-toggle="modal"
  data-bs-target="#htmx-modal" disabled
  >
  <span class="mdi mdi-sync" aria-hidden="true"></span>&nbsp;Merge
  </a>
{% else %}
<span class="inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-delay="100" data-bs-placement="bottom">
  <button class="btn btn-sm btn-success" disabled>
    <i class="mdi mdi-sync" aria-hidden="true"></i> Merge
  </button>
</span>
{% endif %}
{% endif %}
</div>
{% endblock controls %}

{% block tabs %}
<ul class="nav nav-tabs px-3">
  {# Primary tab #}
  <li class="nav-item" role="presentation">
    <a class="nav-link{% if not tab %} active{% endif %}" href="{{ object.get_absolute_url }}">{{ object|meta:"verbose_name"|bettertitle }}</a>
  </li>
  {# Include tabs for registered model views #}
  {% model_view_tabs object %}
</ul>
{% endblock tabs %}

{% block content-wrapper %}
<div class="tab-content">
  {% block content %}
  <div class="row mb-3">
    <div class="col col-md-6">
      <div class="card">
        <h5 class="card-header">Branch Information</h5>
        <div class="card-body">
          <table class="table table-hover attr-table">
            <tr>
              <th scope="row">Name</th>
              <td>{{ object.name }}</td>
            </tr>
            <tr>
              <th scope="row">Description</th>
              <td>{{ object.description|placeholder }}</td>
            </tr>
            <tr>
              <th scope="row">Sync Object</th>
              <td><a href="{% url 'plugins:ipfabric_netbox:ipfabricsync' pk=object.sync.pk %}">{{ object.sync.name}}</a>
              </td>
            </tr>
            <tr>
              <th scope="row">Job Object</th>
              <td><a href="{% url 'core:job' pk=object.job.pk %}">{{ object.job }}</a></td>
            </tr>
            <tr>
              <th scope="row">Sync Status</th>
                <td><div id="sync_status" hx-swap-oob="true">{% include 'ipfabric_netbox/partials/branch_status.html' with object=object %}</div></td>
                <!-- <td >{% badge object.sync.get_status_display bg_color=object.sync.get_status_color %}</td> -->
              </div>
            </tr>
            <tr>
              <th scope="row">Snapshot</th>
              <td><a
                  href="{% url 'plugins:ipfabric_netbox:ipfabricsnapshot' pk=object.sync.snapshot_data.pk %}">{{object.sync.snapshot_data.name }}</a></td>
            </tr>
            <tr>
              <th scope="row">Source</th>
              <td><a
                  href="{% url 'plugins:ipfabric_netbox:ipfabricsource' pk=object.sync.snapshot_data.source.pk %}">{{object.sync.snapshot_data.source.name }}</a></td>
            </tr>
          </table>
        </div>
      </div>
      {% plugin_left_page object %}
    </div>
    <div class="col col-md-6">
      <div class="card">
        <h5 class="card-header">Statistics</h5>
        <div class="card-body">
          <table class="table table-hover attr-table">
            <tr>
              <th scope="row">Created</th>
              <td>
                {% if object.num_created %}
                {{ object.num_created }}
                {% else %}
                {{ ''|placeholder }}
                {% endif %}
              </td>
            </tr>
            <tr>
              <th scope="row">Updated</th>
              <td>
                {% if object.num_updated %}
                {{ object.num_updated }}
                {% else %}
                {{ ''|placeholder }}
                {% endif %}
              </td>
            </tr>
            <tr>
              <th scope="row">Deleted</th>
              <td>
                {% if object.num_deleted %}
                {{ object.num_deleted }}
                {% else %}
                {{ ''|placeholder }}
                {% endif %}
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div id="sync_progress">
        {% include 'ipfabric_netbox/partials/branch_progress.html' %}
      </div>
      <!-- {% include 'inc/panels/related_objects.html' %} -->
      {% include 'inc/panels/custom_fields.html' %}
      {% plugin_right_page object %}
    </div>
  </div>
  <div class="row mb-3">
    <div class="col col-md-12" {% if not object.job.completed %} hx-get="{% url 'plugins:ipfabric_netbox:ipfabricbranch_logs' pk=object.pk %}?type=info"
      hx-trigger="every 5s" hx-target="#sync_logs" hx-select="#sync_logs" hx-select-oob="#sync_status:innerHTML"
      hx-swap="innerHTML" {% endif %}>
      <div id="sync_logs">{% include 'ipfabric_netbox/partials/job_logs.html' with job=object.job %}</div>
    </div>
    {% endblock content %}
  </div>
  {% endblock content-wrapper %}

  {% block modals %}
  {% include 'inc/htmx_modal.html' with size='lg' %}
  {% endblock modals %}
