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

{% block head %}
    <script src="https://unpkg.com/htmx.org@1.7.0"></script>
    <script>
        const fastapiEndpoint = '{{ fastapi_url }}'
        const websocketEndpoint = '{{ fastapi_websocket_url }}/ws'
    </script>
    <script type="module">
        import * as HomeScripts from "{% static 'netbox_proxbox/js/home.js' %}";
        window.HomeScripts = HomeScripts
    </script>
    <script type="module">
        import ProxboxWebSocket from "{% static 'netbox_proxbox/js/websocket.js' %}";
        window.ProxboxWebSocket = ProxboxWebSocket
    </script>
{% endblock %}
{% block content %}
    <div>
        <div class="row mb-3">

            <div align=center id="full-update-error-message"></div>
            {# Full Update Button#}
            <div style="margin-bottom: 15px;" class="d-flex justify-content-center noprint">
                

                {% for object in fastapi_endpoint_list %}
                    <form class="m-2" action="" onsubmit="window.ProxboxWebSocket.sendMessage('Sync Nodes')">
                        {% if perms.netbox_proxbox.add_proxmoxvm %}
                            <button id="full-update-button" class="btn btn-primary">Sync Nodes</button>
                        {% endif %}
                    </form>
                    <form class="m-2" action="" onsubmit="window.ProxboxWebSocket.sendMessage('Sync Virtual Machines')">
                        {% if perms.netbox_proxbox.add_proxmoxvm %}
                            <button id="full-update-button" class="btn btn-primary">Sync Virtual Machines</button>
                        {% endif %}
                    </form>
                    <form class="m-2" action="" onsubmit="window.ProxboxWebSocket.sendMessage('Full Update Sync')">
                        {% if perms.netbox_proxbox.add_proxmoxvm %}
                            <button id="full-update-button" class="btn btn-primary">Full Update Sync</button>
                        {% endif %}
                    </form>
                {% endfor %}
            </div>
            <br>
            <br>

            {% include "netbox_proxbox/virtual_machines_table/table.html" %}
            {% include "netbox_proxbox/devices_table/table.html" %}


            <div class="d-flex justify-content-center flex-nowrap" style="margin-bottom: 15px;">
                <h2>
                    Proxbox Configuration
                </h2>
            </div>
         
            {# Netbox Card #}
            {% for object in netbox_endpoint_list %}
                {% include "netbox_proxbox/home/netbox_card.html" %}
            {% endfor %}
            
            {# FastAPI Card #}
            {% for object in fastapi_endpoint_list %}
                {% include "netbox_proxbox/home/fastapi_card.html" %}
            {% endfor %}

            {# Proxmox Card #}
            {% for object in proxmox_endpoint_list %}
                {% include "netbox_proxbox/home/proxmox_card.html" %}
            {% endfor %}
            
        </div>

        {% include "netbox_proxbox/home/log_messages.html" %}
    </div>
{% endblock %}

{% block footer_links %}
    {{ block.super }}

    {% include "netbox_proxbox/footer.html" %}
{% endblock %}