{% load static %}

<div class="card h-100">
    <div class="card-header d-flex justify-content-between align-items-center">
        <a href="{{ object.get_absolute_url }}" class="fw-bold text-decoration-none">
            <i class="mdi mdi-server-network"></i>
            {{ object.name|default:"Endpoint" }}
        </a>
        <div class="d-flex align-items-center gap-2">
            {% if object.mode == 'cluster' %}
                <span class="badge text-bg-purple"><i class="mdi mdi-server"></i> Cluster</span>
            {% elif object.mode == 'standalone' %}
                <span class="badge text-bg-blue"><i class="mdi mdi-server"></i> Standalone</span>
            {% endif %}
            <span
                id="proxmox-status-badge-{{ object.pk }}"
                class="badge"
                hx-get="{% url 'plugins:proxmox2netbox:keepalive_status' 'proxmox' object.pk %}"
                hx-trigger="load"
                hx-target="#proxmox-status-badge-{{ object.pk }}"
                hx-swap="outerHTML">
                <span class="spinner-border spinner-border-sm"></span>
            </span>
        </div>
    </div>

    {% if error %}
        <div class="alert alert-danger m-2 mb-0 py-1 px-2">
            <small><i class="mdi mdi-alert"></i> {{ error }}</small>
        </div>
    {% endif %}

    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            {% if object.version %}
            <tr>
                <td class="ps-3"><strong>Version</strong></td>
                <td><span class="badge text-bg-secondary">{{ object.version }}</span></td>
            </tr>
            {% endif %}
            {% if object.domain %}
            <tr>
                <td class="ps-3"><strong>Domain</strong></td>
                <td>{{ object.domain }}</td>
            </tr>
            {% endif %}
            {% if object.ip_address %}
            <tr>
                <td class="ps-3"><strong>IP</strong></td>
                <td><a href="{{ object.ip_address.get_absolute_url }}">{{ object.ip_address }}</a></td>
            </tr>
            {% endif %}
            <tr>
                <td class="ps-3"><strong>Port</strong></td>
                <td>{{ object.port }}</td>
            </tr>
            <tr>
                <td class="ps-3"><strong>Auth</strong></td>
                <td>
                    {% if object.token_name %}
                        <span class="badge text-bg-info">Token</span>
                    {% elif object.password %}
                        <span class="badge text-bg-warning">Password</span>
                    {% else %}
                        <span class="badge text-bg-danger">None</span>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <td class="ps-3"><strong>SSL</strong></td>
                <td>
                    {% if object.verify_ssl %}
                        <span class="text-success"><i class="mdi mdi-check-bold"></i> Verified</span>
                    {% else %}
                        <span class="text-warning"><i class="mdi mdi-alert"></i> Disabled</span>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <td class="ps-3"><strong>Sync</strong></td>
                <td>
                    {% if object.sync_enabled %}
                        <span class="badge text-bg-success">Enabled</span>
                    {% else %}
                        <span class="badge text-bg-secondary">Disabled</span>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <td class="ps-3"><strong>Targets</strong></td>
                <td>
                    {% if object.sync_nodes %}<span class="badge text-bg-primary">Nodes</span>{% endif %}
                    {% if object.sync_qemu_vms %}<span class="badge text-bg-primary">QEMU</span>{% endif %}
                    {% if object.sync_lxc_containers %}<span class="badge text-bg-primary">LXC</span>{% endif %}
                </td>
            </tr>
        </table>
    </div>

    <div class="card-footer text-muted small d-flex justify-content-between">
        <span>
            {% if object.last_synced %}
                Last sync: {{ object.last_synced|timesince }} ago
            {% else %}
                Never synced
            {% endif %}
        </span>
        {% if object.last_sync_status == 'completed' %}
            <span class="text-success"><i class="mdi mdi-check-circle"></i></span>
        {% elif object.last_sync_status == 'failed' %}
            <span class="text-danger"><i class="mdi mdi-alert-circle"></i></span>
        {% endif %}
    </div>
</div>