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

{% block content %}
    <div class="row mb-3">
        <div style="margin-bottom: 15px;" class="container noprint">
            <div class="row mb-2">
                <div class="col-12 text-center">
                    <p>Out-of-the-box mode is enabled. Configure only Proxmox credentials and run sync.</p>
                </div>
                <div class="d-flex justify-content-center noprint">
                    <a class="m-2" href="{% url 'plugins:netbox_proxbox:sync_devices' %}">
                        <button id="sync-nodes-button" class="btn btn-primary">Sync Nodes</button>
                    </a>
                    <a class="m-2" href="{% url 'plugins:netbox_proxbox:sync_virtual_machines' %}">
                        <button id="sync-virtual-machines-button" class="btn btn-primary">Sync Virtual Machines</button>
                    </a>
                    <a class="m-2" href="{% url 'plugins:netbox_proxbox:sync_full_update' %}">
                        <button id="sync-full-update-button" class="btn btn-primary">Full Update Sync</button>
                    </a>
                </div>
            </div>
        </div>

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

        {% 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 %}
                        <span
                            id="proxmox-card-{{ object.pk }}"
                            hx-get="{% url 'plugins:netbox_proxbox:proxmox_card' object.pk %}"
                            hx-trigger="load"
                            hx-target="#proxmox-card-{{ object.pk }}"
                            hx-swap="outerHTML"
                        >Loading Proxmox endpoint {{ object.pk }}...</span>
                    </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' %}">
                        <button class="btn btn-primary">Create new Proxmox Endpoint</button>
                    </a>
                </div>
            </div>
            <hr>
        {% endif %}
    </div>
{% endblock %}

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