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

{% block title %}Proxmox2NetBox{% endblock %}

{% block content %}
    {# Sync Controls #}
    <div class="card mb-3">
        <h5 class="card-header d-flex justify-content-between align-items-center">
            <span><i class="mdi mdi-sync"></i> Synchronization</span>
            {% if last_synced %}
                <small class="text-muted">Last sync: {{ last_synced|timesince }} ago</small>
            {% endif %}
        </h5>
        <div class="card-body">
            {% if can_sync %}
            <div class="d-flex justify-content-center gap-2 flex-wrap">
                <button class="btn btn-outline-primary sync-btn"
                    hx-get="{% url 'plugins:proxmox2netbox:sync_devices' %}"
                    hx-target="#sync-result"
                    hx-swap="innerHTML"
                    hx-disabled-elt=".sync-btn"
                    hx-indicator=".sync-btn">
                    <i class="mdi mdi-server"></i> Sync Nodes
                </button>
                <button class="btn btn-outline-primary sync-btn"
                    hx-get="{% url 'plugins:proxmox2netbox:sync_virtual_machines' %}"
                    hx-target="#sync-result"
                    hx-swap="innerHTML"
                    hx-disabled-elt=".sync-btn"
                    hx-indicator=".sync-btn">
                    <i class="mdi mdi-monitor"></i> Sync Virtual Machines
                </button>
                <button class="btn btn-primary sync-btn"
                    hx-get="{% url 'plugins:proxmox2netbox:sync_full_update' %}"
                    hx-target="#sync-result"
                    hx-swap="innerHTML"
                    hx-disabled-elt=".sync-btn"
                    hx-indicator=".sync-btn">
                    <i class="mdi mdi-refresh"></i> Full Update
                </button>
            </div>
            {% else %}
            <div class="alert alert-warning mb-0">
                Missing permission: proxmox2netbox.change_proxmoxendpoint
            </div>
            {% endif %}

            {# Schedule #}
            <span hx-get="{% url 'plugins:proxmox2netbox:get_sync_schedule' %}"
                  hx-trigger="load"
                  hx-swap="outerHTML">
            </span>
        </div>
    </div>

    {# Sync Result #}
    <div id="sync-result" class="mb-3"></div>

    {# Endpoints #}
    {% if proxmox_endpoint_list and proxmox_endpoint_list|length > 0 %}
        <h5 class="mb-3"><i class="mdi mdi-dns"></i> Proxmox Endpoints</h5>
        <div class="row">
            {% for object in proxmox_endpoint_list %}
                {% if proxmox_endpoint_list|length == 1 %}
                    <div class="col-12 mb-3">
                {% elif proxmox_endpoint_list|length == 2 %}
                    <div class="col-md-6 mb-3">
                {% else %}
                    <div class="col-md-4 mb-3">
                {% endif %}
                    {% include "proxmox2netbox/home/proxmox_card.html" with object=object %}
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="card">
            <div class="card-body text-center">
                <h5 class="text-muted mb-3">No Proxmox Endpoints configured</h5>
                <a href="{% url 'plugins:proxmox2netbox:proxmoxendpoint_add' %}" class="btn btn-primary">
                    <i class="mdi mdi-plus"></i> Add Proxmox Endpoint
                </a>
            </div>
        </div>
    {% endif %}
{% endblock %}

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