{% load static %}
{% load proxbox_tags %}

<div class="col col-md-6">
    <div class="card">
        <h2 class="card-header">FastAPI (Backend Service)</h2>
        <div class="p-1" id="fastapi-connection-error-{{ object.pk }}"></div>

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

        <div class="text-center mb-2">
            <p>This service must be reachable for ProxBox to work.<br>NetBox exposes status visibility here, but it does not manage the backend service lifecycle.</p>
        </div>

        <div class="card-body">
            <table class="table table-hover attr-table">
                <tr><th scope="row"><strong>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>
                {% 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 %}
                {% if object.url %}<tr><th scope="row"><strong>HTTP URL</strong></th><td><a href="{{ object.url }}" target="_blank">{{ object.url }}</a></td></tr>{% endif %}
                {% if fastapi_websocket_url and object.use_websocket %}<tr><th scope="row"><strong>WebSocket URL</strong></th><td><a href="{{ fastapi_websocket_url }}" target="_blank">{{ fastapi_websocket_url }}</a></td></tr>{% endif %}
                <tr><th scope="row"><strong>Port</strong></th><td>{{ object.port }}</td></tr>
                <tr>
                    <th scope="row"><strong>API key</strong></th>
                    <td>
                        {% if object.credential_encryption_state == "Recovery required" %}
                            <span class="badge text-bg-danger">Recovery required</span>
                        {% elif object.credential_encryption_state == "Configured" %}
                            <span class="badge text-bg-success">Configured</span>
                        {% else %}
                            <span class="badge text-bg-secondary">Not configured</span>
                        {% endif %}
                    </td>
                </tr>
            </table>
            <div class="d-flex justify-content-between align-items-center p-2 mt-1">
                <a
                    class="btn btn-outline-primary"
                    target="_blank"
                    href="https://fastapi.tiangolo.com/deployment/manually/"
                >Show Example</a>
                {% if perms.netbox_proxbox.change_fastapiendpoint %}
                <button
                    type="button"
                    class="btn btn-outline-warning btn-sm"
                    data-proxbox-quick-edit-url="{% url 'plugins:netbox_proxbox:home_quick_edit' 'fastapi' object.pk %}"
                    title="Quick edit this FastAPI endpoint"
                >
                    <i class="mdi mdi-pencil" aria-hidden="true"></i> Edit
                </button>
                {% endif %}
            </div>
        </div>
    </div>
</div>