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

{% block head %}
    <script>
        window.proxboxConfig = {
            fastapiEndpoint: "{{ fastapi_url|default:''|escapejs }}",
            websocketEndpoint: "{{ fastapi_websocket_url|default:''|escapejs }}"
        };
    </script>
    <script type="module" src="{% static 'netbox_proxbox/js/home.js' %}"></script>
{% endblock %}

{% block content %}
    <div class="row mb-3">
        <div id="sync-progress-container" class="d-none sticky-top pt-2 mb-3" style="z-index: 1030;">
            <div class="col-12">
                <div class="card border-primary shadow-sm">
                    <div class="card-body py-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <strong id="sync-progress-label">Sync in progress</strong>
                            <span id="sync-progress-state" class="text-muted small">Working...</span>
                        </div>
                        <div class="progress mt-2" role="progressbar" aria-label="Sync progress indicator" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div align="center" id="full-update-error-message"></div>

        {% include "netbox_proxbox/table/clusters.html" %}
    </div>
{% endblock %}