{% extends 'base/layout.html' %}
{% load i18n %}
{% 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>
    {% if quick_schedule_form %}
        <link rel="stylesheet" href="{% static 'netbox_proxbox/css/quick_schedule_home.css' %}">
        {{ quick_schedule_form.media }}
    {% endif %}
{% endblock %}

{% block content %}
    {% include "netbox_proxbox/home/quick_schedule_banner.html" %}

    <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">
            {% if fastapi_endpoint_list and fastapi_endpoint_list|length > 0 %}
                {% for object in fastapi_endpoint_list %}
                    <div class="row mb-2">
                        <div class="col-12 text-center">
                            {% if object.use_websocket %}
                                {% if object.server_side_websocket %}
                                    <p>Using Polling (Server-Only)</p>
                                {% else %}
                                    <p>Using WebSocket (Client-Server)</p>
                                {% endif %}
                            {% else %}
                                <p>
                                    {% trans "Using HTTP" %}
                                    <a href="https://fastapi.tiangolo.com/advanced/stream-data/#use-cases" target="_blank" rel="noopener noreferrer">{% trans "Streaming" %}</a>
                                </p>
                            {% endif %}
                        </div>
                        <div
                            class="d-flex justify-content-center noprint"
                            data-use-websocket="{% if object.use_websocket %}true{% else %}false{% endif %}"
                            data-server-side-websocket="{% if object.server_side_websocket %}true{% else %}false{% endif %}"
                        >
                            <form class="m-2" method="post" action="{% url 'plugins:netbox_proxbox:sync_devices' %}">
                                {% csrf_token %}
                                <button id="sync-nodes-button" type="submit" class="btn btn-primary" data-sync-url="{% url 'plugins:netbox_proxbox:sync_devices' %}" data-sync-kind="devices">Sync Nodes</button>
                            </form>
                            <form class="m-2" method="post" action="{% url 'plugins:netbox_proxbox:sync_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>
                            <form class="m-2" method="post" action="{% url 'plugins:netbox_proxbox:sync_virtual_disks' %}">
                                {% csrf_token %}
                                <button id="sync-virtual-disks-button" type="submit" class="btn btn-primary" data-sync-url="{% url 'plugins:netbox_proxbox:sync_virtual_disks' %}" data-sync-kind="virtual-disks">Sync Virtual Disks</button>
                            </form>
                            <form class="m-2" method="post" action="{% url 'plugins:netbox_proxbox:sync_vm_backups' %}">
                                {% csrf_token %}
                                <button id="sync-backups-button" type="submit" class="btn btn-primary" data-sync-url="{% url 'plugins:netbox_proxbox:sync_vm_backups' %}" data-sync-kind="backups">Sync Backups</button>
                            </form>
                            <form class="m-2" method="post" action="{% url 'plugins:netbox_proxbox:sync_vm_snapshots' %}">
                                {% csrf_token %}
                                <button id="sync-snapshots-button" type="submit" class="btn btn-primary" data-sync-url="{% url 'plugins:netbox_proxbox:sync_vm_snapshots' %}" data-sync-kind="snapshots">Sync Snapshots</button>
                            </form>
                            <form class="m-2" method="post" action="{% url 'plugins:netbox_proxbox:sync_full_update' %}">
                                {% csrf_token %}
                                <button id="sync-full-update-button" type="submit" class="btn btn-primary" data-sync-url="{% url 'plugins:netbox_proxbox:sync_full_update' %}" data-sync-kind="full-update">Full Update Sync</button>
                            </form>
                        </div>
                    </div>
                {% endfor %}
            {% endif %}
        </div>

        {% if fastapi_endpoint_list and fastapi_endpoint_list|length > 0 %}
            {% for object in fastapi_endpoint_list %}
                {% if object.use_websocket %}
                    {% include "netbox_proxbox/table/virtual_machines.html" %}
                    {% include "netbox_proxbox/table/devices.html" %}
                {% endif %}
            {% endfor %}
        {% endif %}

        <div class="d-flex justify-content-center flex-nowrap" style="margin-bottom: 15px;">
            <h2>Proxbox Configuration</h2>
        </div>

        {% if netbox_endpoint_list and netbox_endpoint_list|length > 0 %}
            {% for object in netbox_endpoint_list %}
                {% include "netbox_proxbox/home/netbox_card.html" %}
            {% endfor %}
        {% else %}
            <div class="d-flex flex-column align-items-center" style="margin-bottom: 15px;">
                <div><h2>There is no NetBox Endpoint configured.</h2></div>
                <div class="justify-content-center">
                    <a href="{% url 'plugins:netbox_proxbox:netboxendpoint_add' %}" class="btn btn-primary">Create new NetBox Endpoint</a>
                </div>
            </div>
            <hr>
        {% endif %}

        {% if fastapi_endpoint_list and fastapi_endpoint_list|length > 0 %}
            {% for object in fastapi_endpoint_list %}
                {% include "netbox_proxbox/home/fastapi_card.html" %}
            {% endfor %}
        {% else %}
            <div class="d-flex flex-column align-items-center" style="margin-bottom: 15px;">
                <div><h2>There is no FastAPI Endpoint configured.</h2></div>
                <div class="justify-content-center">
                    <a href="{% url 'plugins:netbox_proxbox:fastapiendpoint_add' %}" class="btn btn-primary">Create new FastAPI Endpoint</a>
                </div>
            </div>
            <hr>
        {% endif %}

        {% if proxmox_endpoint_list and proxmox_endpoint_list|length > 0 %}
            {% for object in proxmox_endpoint_list %}
                {% if proxmox_endpoint_list|length == 1 %}
                    <div class="col">
                {% elif proxmox_endpoint_list|length == 2 %}
                    <div class="col col-md-6">
                {% else %}
                    <div class="col col-md-4">
                {% endif %}
                        {% include "netbox_proxbox/home/proxmox_card.html" %}
                    </div>
            {% endfor %}
        {% else %}
            <div class="d-flex flex-column align-items-center" style="margin-bottom: 15px;">
                <div><h2>There are no Proxmox Endpoints configured.</h2></div>
                <div class="justify-content-center">
                    <a href="{% url 'plugins:netbox_proxbox:proxmoxendpoint_add' %}" class="btn btn-primary">Create new Proxmox Endpoint</a>
                </div>
            </div>
            <hr>
        {% endif %}
    </div>

    <div class="text-center mt-4 mb-2">
        <p class="text-muted mb-0">
            Support me! If this plugin is useful to you, please consider supporting it on the
            <a href="https://github.com/sponsors/emersonfelipesp" target="_blank" rel="noopener noreferrer">Sponsors page</a>.
        </p>
    </div>
{% endblock %}

{% block footer_links %}
    {{ block.super }}
    {% include "netbox_proxbox/footer.html" %}
{% endblock %}