{% extends 'base/layout.html' %}
{% load i18n %}
{% load static %}
{% load proxbox_tags %}

{% block head %}
    <script>
        window.proxboxConfig = {
            fastapiEndpoint: "{{ fastapi_url|default:''|escapejs }}",
            websocketEndpoint: "{{ fastapi_websocket_url|default:''|escapejs }}"
        };
    </script>
    {% if active_proxbox_job %}
        {% include "netbox_proxbox/inc/job_log_assets.html" %}
    {% endif %}
    {# Dashboard hydration is inlined (issue #355) so logos, status badges,
       and cluster cards render even when ``manage.py collectstatic`` was
       not run after installing/upgrading the plugin. #}
    <script>{% inline_static_script 'netbox_proxbox/js/home_inline.js' %}</script>
    {% if quick_schedule_form %}
        <link rel="stylesheet" href="{% static 'netbox_proxbox/css/quick_schedule_home.css' %}">
        {{ quick_schedule_form.media }}
    {% endif %}
{% endblock %}

{% block content %}
    {% include "netbox_proxbox/home/quick_schedule_banner.html" %}
    {% if active_proxbox_job %}
        {% include "netbox_proxbox/home/job_live_summary.html" with job=active_proxbox_job %}
    {% endif %}

    <div class="row mb-3">
        <div id="sync-progress-container" class="d-none sticky-top pt-2 mb-3" style="z-index: 1030;">
            <div class="col-12">
                <div class="card border-primary shadow-sm">
                    <div class="card-body py-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <strong id="sync-progress-label">Sync in progress</strong>
                            <span id="sync-progress-state" class="text-muted small">Working...</span>
                        </div>
                        <div class="progress mt-2" role="progressbar" aria-label="Sync progress indicator" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div align="center" id="full-update-error-message"></div>

        <div style="margin-bottom: 15px;" class="container noprint">
            {% if fastapi_endpoint_list and fastapi_endpoint_list|length > 0 %}
                {% for object in fastapi_endpoint_list %}
                    <div class="row mb-2">
                        <div class="col-12 text-center">
                            {% if object.use_websocket %}
                                {% if object.server_side_websocket %}
                                    <p>Using Polling (Server-Only)</p>
                                {% else %}
                                    <p>Using WebSocket (Client-Server)</p>
                                {% endif %}
                            {% else %}
                                <p>
                                    {% trans "Using HTTP" %}
                                    <a href="https://fastapi.tiangolo.com/advanced/stream-data/#use-cases" target="_blank" rel="noopener noreferrer">{% trans "Streaming" %}</a>
                                </p>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
                {% include "netbox_proxbox/partials/home_sync_actions_dropdown.html" %}
            {% endif %}
        </div>

        {% if fastapi_endpoint_list and fastapi_endpoint_list|length > 0 %}
            {% for object in fastapi_endpoint_list %}
                {% if object.use_websocket %}
                    {% include "netbox_proxbox/table/virtual_machines.html" %}
                    {% include "netbox_proxbox/table/devices.html" %}
                {% endif %}
            {% endfor %}
        {% endif %}

        <div class="d-flex justify-content-center flex-nowrap" style="margin-bottom: 15px;">
            <h2>Proxbox Configuration</h2>
        </div>

        {% if netbox_endpoint_list and netbox_endpoint_list|length > 0 %}
            {% for object in netbox_endpoint_list %}
                {% include "netbox_proxbox/home/netbox_card.html" %}
            {% endfor %}
        {% else %}
            <div class="d-flex flex-column align-items-center gap-2" style="margin-bottom: 15px;">
                <div><h2>There is no NetBox Endpoint configured.</h2></div>
                <p class="small text-muted text-center mb-0">
                    Quick add starts with localhost, 127.0.0.1/32, and v1 token mode. Change any value before saving.
                </p>
                <div class="d-flex flex-wrap justify-content-center gap-2">
                    <a href="{{ netbox_quick_add_url }}" class="btn btn-primary">Quick add NetBox Endpoint</a>
                    <a href="{% url 'plugins:netbox_proxbox:netboxendpoint_add' %}" class="btn btn-outline-secondary">Open blank form</a>
                    <a href="{% url 'plugins:netbox_proxbox:netboxendpoint_bulk_import' %}" class="btn btn-outline-primary"><i class="mdi mdi-upload" aria-hidden="true"></i> Import from CSV</a>
                </div>
            </div>
            <hr>
        {% endif %}

        {% if fastapi_endpoint_list and fastapi_endpoint_list|length > 0 %}
            {% for object in fastapi_endpoint_list %}
                {% include "netbox_proxbox/home/fastapi_card.html" %}
            {% endfor %}
        {% else %}
            <div class="d-flex flex-column align-items-center gap-2" style="margin-bottom: 15px;">
                <div><h2>There is no FastAPI Endpoint configured.</h2></div>
                <p class="small text-muted text-center mb-0">
                    Quick add starts with localhost and 127.0.0.1/32. Change the host or IP before saving.
                </p>
                <div class="d-flex flex-wrap justify-content-center gap-2">
                    <a href="{{ fastapi_quick_add_url }}" class="btn btn-primary">Quick add FastAPI Endpoint</a>
                    <a href="{% url 'plugins:netbox_proxbox:fastapiendpoint_add' %}" class="btn btn-outline-secondary">Open blank form</a>
                    <a href="{% url 'plugins:netbox_proxbox:fastapiendpoint_bulk_import' %}" class="btn btn-outline-primary"><i class="mdi mdi-upload" aria-hidden="true"></i> Import from CSV</a>
                </div>
            </div>
            <hr>
        {% endif %}

        {% if proxmox_endpoint_list and proxmox_endpoint_list|length > 0 %}
            {% for object in proxmox_endpoint_list %}
                {% if proxmox_endpoint_list|length == 1 %}
                    <div class="col">
                {% elif proxmox_endpoint_list|length == 2 %}
                    <div class="col col-md-6">
                {% else %}
                    <div class="col col-md-4">
                {% endif %}
                        {% include "netbox_proxbox/home/proxmox_card.html" %}
                    </div>
            {% endfor %}
        {% else %}
            <div class="d-flex flex-column align-items-center" style="margin-bottom: 15px;">
                <div><h2>There are no Proxmox Endpoints configured.</h2></div>
                <div class="d-flex flex-wrap justify-content-center gap-2">
                    <a href="{% url 'plugins:netbox_proxbox:proxmoxendpoint_add' %}" class="btn btn-primary">Create new Proxmox Endpoint</a>
                    <a href="{% url 'plugins:netbox_proxbox:proxmoxendpoint_bulk_import' %}" class="btn btn-outline-primary"><i class="mdi mdi-upload" aria-hidden="true"></i> Import from CSV</a>
                </div>
            </div>
            <hr>
        {% endif %}
    </div>

    <div class="text-center mt-4 mb-2">
        <p class="text-muted mb-0">
            Support me! If this plugin is useful to you, please consider supporting it on the
            <a href="https://github.com/sponsors/emersonfelipesp" target="_blank" rel="noopener noreferrer">Sponsors page</a>.
        </p>
    </div>
{% endblock %}

{% block footer_links %}
    {{ block.super }}
    {% include "netbox_proxbox/footer.html" %}
{% endblock %}