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

{% block header %}
  {{ block.super }}
  {% if new_release %}
    <div class="alert alert-info bg-info-subtle mx-3" role="alert">
      <div class="d-flex">
        <div>
          <i class="mdi mdi-information-outline p-2"></i>
        </div>
        <div>
          <h4 class="alert-title">{% trans "New Release Available" %}</h4>
          <a href="{{ new_release.url }}">NetBox v{{ new_release.version }}</a> {% trans "is available" %}.
          <a href="https://docs.netbox.dev/en/stable/installation/upgrading/" target="_blank">
            {% trans "Upgrade Instructions" context "Document title" %}
            <i class="mdi mdi-open-in-new"></i>
          </a>
        </div>
      </div>
    </div>
  {% endif %}
{% endblock %}

{% block title %}{% trans "Home" %}{% endblock %}

{% block page %}
  {# Render the user's customized dashboard #}
  <div class="grid-stack m-2" id="dashboard">
    {% for widget in dashboard %}
      {% include 'extras/dashboard/widget.html' %}
    {% endfor %}
  </div>
  <div class="collapse multi-collapse show">
    <div class="d-flex px-3">
      <div class="flex-grow-1">
        <button type="button" id="unlock_dashboard" class="btn btn-light" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
          <i class="mdi mdi-lock-open-outline"></i> {% trans "Unlock Dashboard" %}
        </button>
      </div>
    </div>
  </div>
  <div class="collapse multi-collapse">
    <div class="d-flex px-3">
      <div class="flex-grow-1">
        <button type="button" id="lock_dashboard" class="btn btn-light" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
          <i class="mdi mdi-lock-outline"></i> {% trans "Lock Dashboard" %}
        </button>
      </div>
      <div>
        <a href="#"
          hx-get="{% url 'extras:dashboardwidget_add' %}"
          hx-target="#htmx-modal-content"
          data-bs-toggle="modal"
          data-bs-target="#htmx-modal"
          class="btn btn-success"
        >
          <i class="mdi mdi-plus"></i> {% trans "Add Widget" %}
        </a>
        <button id="save_dashboard" class="btn btn-primary" data-url="{% url 'extras-api:dashboard' %}">
          <i class="mdi mdi-content-save-outline"></i> {% trans "Save Layout" %}
        </button>
        <a href="{% url 'extras:dashboard_reset' %}" class="btn btn-danger">
          <i class="mdi mdi-backspace"></i>  {% trans "Reset Dashboard" %}
        </a>
      </div>
    </div>
  </div>
{% endblock page %}

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