{% 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/virtual_machine.js' %}"></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>

        <div style="margin-bottom: 15px;" class="container noprint">
            <form class="m-2" method="post" action="{% url 'plugins:netbox_proxbox:sync_virtual_machines' %}" data-sync-url="{% url 'plugins:netbox_proxbox:sync_virtual_machines' %}" data-sync-kind="virtual-machines">
                {% csrf_token %}
                <button id="sync-virtual-machines-button" type="submit" class="btn btn-primary" data-sync-url="{% url 'plugins:netbox_proxbox:sync_virtual_machines' %}" data-sync-kind="virtual-machines">Sync Virtual Machines</button>
            </form>
            <a href="{% url 'plugins:netbox_proxbox:schedule_sync' %}?sync_type=virtual-machines" class="btn btn-outline-primary m-2">
                <i class="mdi mdi-clock-outline"></i> Schedule Sync
            </a>
        </div>

        <form method="post" action="{% url 'plugins:netbox_proxbox:sync_selected_virtual_machines' %}">
            {% csrf_token %}
            {% include "netbox_proxbox/table/virtual_machines.html" %}
            <div class="container mt-3 mb-2 noprint">
                <button type="submit" class="btn btn-primary">
                    <i class="mdi mdi-sync" aria-hidden="true"></i> Sync Selected
                </button>
            </div>
        </form>
    </div>
{% endblock %}