{% load static %}            

<div class="col col-md-6">
    <div class="card">
        <h2 class="card-header">FastAPI (Backend Service)</h2>

        <!-- FastAPI is currently the Proxbox Backend which communicates with Proxmox Cluster API. It MUST run so that Proxbox works. -->
        <!-- Placeholder for Connection Error Messages -->
        <div class="p-1" id="fastapi-connection-error">

        </div>

        <!-- Stop/Start/Restat buttons -->
        <div class="flex d-flex flex-row  justify-content-left align-items-left p-1 mt-1">
            <div class="flex d-flex m-1">
                <a href="{% url 'plugins:netbox_proxbox:stop-proxbox-backend' %}">
                    <button class="badge text-bg-red" title='Stop Service'>
                        <i class='mdi mdi-stop'></i>
                    </button>
                </a>
            </div>
            <div class="flex d-flex m-1" >
                <a href="{% url 'plugins:netbox_proxbox:fix-proxbox-backend' %}">
                    <button class="badge text-bg-green" title='Start Service'>
                        <i class='mdi mdi-play'></i>
                    </button>
                </a>
            </div>
            <div class="flex d-flex m-1" >
                <a href="{% url 'plugins:netbox_proxbox:restart-proxbox-backend' %}">
                    <button class="badge text-bg-yellow" title='Restart Service'>
                        <i class='mdi mdi-restart'></i>
                    </button>
                </a>
            </div>
            <div class="flex d-flex m-1" >
                <a href="{% url 'plugins:netbox_proxbox:status-proxbox-backend' %}">
                    <button class="badge text-bg-blue" title='Check Service Status'>
                        <i class='mdi mdi-exclamation'></i>
                    </button>
                </a>
            </div>
        </div>


        <div class="flex d-flex flex-row  justify-content-center align-items-center p-1 mt-1">

            <!-- FastAPI logo -->
            <div class="flex 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="200px">
                </a>
                
            </div>
            
            <!-- Status Badge. Default value is 'Unkown' and is changed based on API response status -->
            <div
                class="d-flex ms-auto" 
                style="margin: 0 40px 0 0"
            >
                <span
                    id="fastapi-status-badge-{{ object.pk }}"
                    class="proxmox-connection-check badge p-1"
                    hx-get="{% url 'plugins:netbox_proxbox:keepalive_status' 'fastapi' object.pk %}"
                    hx-trigger="load"
                    hx-target="#fastapi-status-badge-{{ object.pk }}"
                    hx-swap="outerHTML"
                >Unknown</span>
            </div>

        </div>
        
        <div align=center>
            <br>
            <p>This service <strong>MUST</strong> be running to Proxbox work.<br>It's the backend which communicates with Proxmox Clusters.</br></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 %}
                            <span title='FastAPI Endpoint Name'>
                                <a href="{{ object.get_absolute_url }}">{{ object.name }}</a>
                            </span>
                        {% else %}
                            <span class='badge text-bg-grey' title='Netbox Name'>
                                <strong>Empty</strong>
                        {% endif %}
                    </td>
                </tr>
                {% if object.domain %}
                    <tr>
                        <th scope="row"><strong>Domain</strong></th>
                        <td id="fastapi-domain">
                            {{ object.domain }}
                        </td>
                    </tr>
                {% endif %}
                {% if object.ip_address %}
                    <tr>
                        <th scope="row"><strong>IP Address</strong></th>
                        <td id="fastapi-ip-address">
                            <a href="{{ object.ip_address.get_absolute_url }}">
                                {{ object.ip_address }}
                            </a>
                        </td>
                    </tr>
                {% endif %}
                {% if fastapi_url %}
                    <tr>
                        <th scope="row"><strong>HTTP URL</strong></th>
                        <td id="fastapi-url">
                            <a href="{{ fastapi_url }}" target="_blank">{{ fastapi_url }}</a>
                        </td>
                    </tr>
                {% endif %}
                {% if fastapi_websocket_url and object.use_websocket %}
                    <tr>
                        <th scope="row"><strong>WebSocket URL</strong></th>
                        <td id="fastapi-websocket-url">
                            <a href="{{ fastapi_websocket_url }}" target="_blank">{{ fastapi_websocket_url }}</a>
                        </td>
                    </tr>
                {% endif %}
                </tr>
                {% if object.port %}
                    <tr>
                        <th scope="row"><strong>Port</strong></th>
                            <td id="uvicorn-port">{{ object.port }}
                        </td>
                    </tr>
                {% endif %}
            </table>
            <div class="flex d-flex flex-row  justify-content-center align-items-center p-2 mt-1">
                <!-- Status Badge. Default value is 'Unkown' and is changed based on API response status -->
                <div class="d-flex ms-auto " style="margin: 0 40px 0 0">
                    <button class="btn btn-outline-primary" type="button">
                        <a
                            style="text-decoration: none; color: inherit"
                            target="_blank"
                            href="https://fastapi.tiangolo.com/deployment/manually/"
                        >Show Example</a>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>