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

{% block title %}{{ job.name }} {{ job.object }}{% endblock %}

{% block header %}
  <div class="row noprint">
    <div class="col col-md-12">
      <nav class="breadcrumb-container px-3" aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{% url 'plugins:netbox_powerdns_sync:sync_jobs' %}">Sync Jobs</a></li>
          <li class="breadcrumb-item">{{ job.created|annotated_date }}</li>
        </ol>
      </nav>
    </div>
  </div>
  {{ block.super }}
{% endblock header %}

{% block controls %}
  <div class="controls">
    <div class="control-group">
      {% if request.user|can_delete:job %}
        {% delete_button job %}
      {% endif %}
    </div>
  </div>
{% endblock controls %}

{% block content-wrapper %}
  <ul class="nav nav-tabs px-3" role="tablist">
    <li class="nav-item" role="presentation">
      <a href="#log" role="tab" data-bs-toggle="tab" class="nav-link active">Log</a>
    </li>
  </ul>
  <div class="tab-content mb-3">
    <div role="tabpanel" class="tab-pane active" id="log">
      <div class="col col-md-12"{% if not job.completed %} hx-get="{% url 'plugins:netbox_powerdns_sync:sync_result' job_pk=job.pk %}" hx-trigger="every 5s"{% endif %}>
        {% include 'netbox_powerdns_sync/htmx/sync_result.html' %}
      </div>
    </div>
  </div>
{% endblock content-wrapper %}

{% block modals %}
  {% include 'inc/htmx_modal.html' %}
{% endblock modals %}
