{% extends "base.html" %}
{% load i18n %}

{% block content %}
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>{% trans 'Name' %}</th>
            <th>{% trans 'Status' %}</th>
            <th>{% trans 'IP Address' %}</th>
            <th><i class="fas fa-map-marker-alt" title="{% trans 'Location' %}"></i></th>
            <th><i class="far fa-clock" title="{% trans 'Last Seen' %}"></i></th>
            <th><i class="fas fa-cogs" title="{% trans 'Config Version' %}"></i></th>

            <th><i class="far fa-edit"></i></th>
        </tr>
    </thead>
    <tbody>
        {% for worker in workers %}
        <tr>
            <td>{{ worker.name }}</td>
            <td style="width: 1%; white-space: nowrap;">
                {% if worker.error_status %}
                    <i class="fas fa-exclamation-triangle text-danger blink" title="{{ worker.get_error_status_display }}"></i>
                {% else %}
                    {% if worker.enabled %}
                        {% if cluster_settings.config_version != worker.workerstatus.config_version  %}
                            <i class="fas fa-sync text-primary blink" {% trans 'Configuration sync in progress' %}></i>
                        {% else %}
                            <i class="fas fa-check text-green"></i>
                        {% endif %}
                    {% else %}
                        <i class="fas fa-times text-gray"></i>
                    {% endif %}
                {% endif %}
                {% if current_worker_version != worker.workerstatus.worker_version %}
                    <i class="fas fa-cloud-download-alt text-primary blink" title="{% trans 'The worker is outdated. Please update it to the latest version.' %}"></i>
                {% endif %}
            </td>
            <td>
                {% if worker.ip_address %}
                    {{ worker.ip_address }}
                    {% if worker.ip_lock %}
                        <i class="fas fa-lock text-warning" title="{% trans 'IP Lock Enabled' %}"></i>
                    {% endif %}
                {% else %}
                    <span class="text-muted">{% trans 'Not set' %}</span>
                {% endif %}
            </td>
            <td>
                {% if worker.country or worker.city %}
                    {% if worker.city %}{{ worker.city }}{% endif %}{% if worker.city and worker.country %}, {% endif %}{% if worker.country %}{{ worker.country }}{% endif %}
                {% else %}
                    <span class="text-muted">{% trans 'Not set' %}</span>
                {% endif %}
            </td>
            <td style="width: 1%; white-space: nowrap;">
                {% if worker.workerstatus %}
                    {{ worker.workerstatus.last_seen|date:"M d, H:i" }}
                {% else %}
                    <span class="text-muted">{% trans 'Never' %}</span>
                {% endif %}
            </td>
            <td style="width: 1%; white-space: nowrap;">
                {% if worker.workerstatus %}
                    {{ worker.workerstatus.config_version }}
                    {% if worker.workerstatus.config_pending %}
                        <i class="fas fa-clock text-warning" title="{% trans 'Config Pending' %}"></i>
                    {% endif %}
                {% else %}

                {% endif %}
            </td>


            <td style="width: 1%; white-space: nowrap;">
                <a href="/cluster/worker/manage/?uuid={{ worker.uuid }}" title="{% trans 'Edit' %}"><i class="far fa-edit"></i></a>
            </td>
        </tr>
        {% empty %}
        <tr>
            <td colspan="8" class="text-center text-muted">{% trans 'No workers configured' %}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
<a href="/cluster/worker/manage/" class="btn btn-primary">{% trans 'Add Worker' %}</a>
<a href="/cluster/settings/" class="btn btn-secondary">{% trans 'Cluster Settings' %}</a>
<button id="btn-cluster-info" class="btn btn-outline-info float-right">{% trans 'Cluster Information' %}</button>

<div id="cluster-info-table" style="display: none; margin-top: 20px;">
    <h4>{% trans 'Cluster Information' %}</h4>
    <table class="table table-bordered" style="width: 50%;">
        <tbody>
            <tr>
                <th>{% trans 'Enabled' %}</th>
                <td>
                    {% if cluster_settings.enabled %}
                    <i class="fas fa-check text-green"></i>
                    {% else %}
                    <i class="fas fa-times text-gray"></i>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <th>{% trans 'Cluster Mode' %}</th>
                <td>{{ cluster_settings.get_cluster_mode_display }}</td>
            </tr>
            <tr>
                <th>{% trans 'Config Version' %}</th>
                <td>{{ cluster_settings.config_version }}</td>
            </tr>
            <tr>
                <th>{% trans 'Stats Sync Interval' %}</th>
                <td>{{ cluster_settings.stats_sync_interval }}s</td>
            </tr>
            <tr>
                <th>{% trans 'Stats Cache Interval' %}</th>
                <td>{{ cluster_settings.stats_cache_interval }}s</td>
            </tr>
            <tr>
                <th>{% trans 'Restart Mode' %}</th>
                <td>{{ cluster_settings.get_restart_mode_display }}</td>
            </tr>
            <tr>
                <th>{% trans 'Worker Display' %}</th>
                <td>{{ cluster_settings.get_worker_display_display }}</td>
            </tr>
            <tr>
                <th>{% trans 'Primary WireGuard' %}</th>
                <td>
                    {% if cluster_settings.primary_enable_wireguard %}
                        <i class="fas fa-check text-green"></i>
                    {% else %}
                        <i class="fas fa-times text-gray"></i>
                    {% endif %}
                </td>
            </tr>
        </tbody>
    </table>
</div>

{% endblock %}

{% block custom_page_scripts %}
    <script>
        $(document).ready(function () {
            $('#btn-cluster-info').click(function () {
                $('#cluster-info-table').slideToggle();
            });
        });
    </script>
{% endblock %}