{% load static %}

<div class="card" data-proxmox-card-url="{% url 'plugins:netbox_proxbox:proxmox_card' object.pk %}" data-proxmox-card-id="{{ object.pk }}">
    <h2 class="card-header">Proxmox Cluster</h2>
    <div class="p-1" id="proxmox-connection-error-{{ object.pk }}"></div>

    <div class="d-flex flex-row justify-content-center align-items-center p-2 mt-1">
        <div class="d-flex mx-auto position-absolute">
            <a href="{{ object.get_absolute_url }}">
                <img src="{% static 'netbox_proxbox/proxmox-logo.svg' %}" alt="Proxmox Logo" width="200">
            </a>
        </div>
        <div class="d-flex ms-auto" style="margin: 0 40px 0 0">
            <span
                id="proxmox-status-badge-{{ object.pk }}"
                class="badge p-1"
                data-service-status-url="{% url 'plugins:netbox_proxbox:keepalive_status' 'proxmox' object.pk %}"
            >Unknown</span>
        </div>
    </div>

    <div class="card-body">
        <table class="table table-hover attr-table">
            <tr>
                <th scope="row"><strong>Proxmox Cluster Name</strong></th>
                <td>
                    {% if object.name %}
                        <a href="{{ object.get_absolute_url }}">{{ object.name }}</a>
                    {% else %}
                        <span class="badge text-bg-grey">Empty</span>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <th scope="row"><strong>Proxmox Cluster Mode</strong></th>
                <td data-proxmox-field="mode">
                    <span class="badge text-bg-grey">Loading</span>
                </td>
            </tr>
            <tr>
                <th scope="row"><strong>Proxmox Version</strong></th>
                <td data-proxmox-field="version">
                    <span class="badge text-bg-grey">Loading</span>
                </td>
            </tr>
            <tr>
                <th scope="row"><strong>Proxmox RepoID</strong></th>
                <td data-proxmox-field="repoid">
                    <span class="badge text-bg-grey">Loading</span>
                </td>
            </tr>
            {% if object.domain %}
                <tr>
                    <th scope="row"><strong>Domain</strong></th>
                    <td>{{ object.domain }}</td>
                </tr>
            {% endif %}
            {% if object.ip_address %}
                <tr>
                    <th scope="row"><strong>IP Address</strong></th>
                    <td><a href="{{ object.ip_address.get_absolute_url }}">{{ object.ip_address }}</a></td>
                </tr>
            {% endif %}
            <tr>
                <th scope="row"><strong>HTTP Port</strong></th>
                <td>{{ object.port }}</td>
            </tr>
            <tr>
                <th scope="row"><strong>Proxmox User</strong></th>
                <td>{{ object.username|default:"Not configured" }}</td>
            </tr>
            <tr>
                <th scope="row"><strong>Proxmox Password</strong></th>
                <td>{% if object.password %}Configured{% else %}Not configured{% endif %}</td>
            </tr>
            <tr>
                <th scope="row"><strong>Token Name</strong></th>
                <td>{{ object.token_name|default:"Not configured" }}</td>
            </tr>
            <tr>
                <th scope="row"><strong>Token Value</strong></th>
                <td>{% if object.token_value %}Configured{% else %}Not configured{% endif %}</td>
            </tr>
            <tr>
                <th scope="row"><strong>SSL</strong></th>
                <td>
                    {% if object.verify_ssl %}
                        <span class="text-success"><i class="mdi mdi-check-bold"></i></span>
                    {% else %}
                        <span class="text-danger"><i class="mdi mdi-close-thick"></i></span>
                    {% endif %}
                </td>
            </tr>
        </table>
        <div class="d-flex justify-content-between">
            <a
                class="btn btn-outline-primary"
                target="_blank"
                href="https://github.com/emersonfelipesp/netbox-proxbox#13-configure-plugin"
            >Show Example</a>
        </div>
    </div>
</div>