{% load static %}

<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="{% static '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 align="center">
            <br>
            <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>
            </table>
            <div class="d-flex flex-row justify-content-center align-items-center p-2 mt-1">
                <div class="d-flex ms-auto" style="margin: 0 40px 0 0">
                    <a
                        class="btn btn-outline-primary"
                        target="_blank"
                        href="https://fastapi.tiangolo.com/deployment/manually/"
                    >Show Example</a>
                </div>
            </div>
        </div>
    </div>
</div>