{% extends "base.html" %}
{% block title %}Gateways — Shoreguard{% endblock %}

{% block breadcrumbs %}
<ol class="breadcrumb mb-0">
    <li class="breadcrumb-item active">Gateways</li>
</ol>
{% endblock %}

{% block content %}
<div x-data="gatewaysList" x-init="load()" @gateway-registered.window="load()">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0">Gateways</h5>
        <div class="btn-group btn-group-sm">
            <button class="btn btn-outline-secondary" @click="load()" title="Refresh" aria-label="Refresh">
                <i class="bi bi-arrow-clockwise"></i>
            </button>
            <button class="btn btn-outline-primary" @click="discover()"
                    x-show="$isAdmin" x-cloak title="Run DNS-SRV discovery">
                <i class="bi bi-broadcast me-1"></i>Discover
            </button>
            <a class="btn btn-outline-success" href="/gateways/new"
               x-show="$isAdmin" x-cloak>
                <i class="bi bi-plus-lg me-1"></i>Register
            </a>
        </div>
    </div>

    <div x-show="discoverResult" x-cloak class="alert alert-info py-2 small mb-2">
        <i class="bi bi-broadcast me-1"></i>
        Discovery: <strong x-text="discoverResult && discoverResult.registered.length"></strong> registered,
        <strong x-text="discoverResult && discoverResult.skipped.length"></strong> skipped,
        <strong x-text="discoverResult && discoverResult.errors.length"></strong> errors.
        <button type="button" class="btn-close float-end" @click="discoverResult = null"></button>
    </div>

    <!-- Loading -->
    <div x-show="loading" class="text-center text-muted py-5">
        <div class="spinner-border spinner-border-sm me-2"></div>Loading gateways...
    </div>

    <!-- Error -->
    <div x-show="error" x-cloak class="alert alert-danger" x-text="error"></div>

    <!-- Empty state -->
    <div x-show="!loading && !error && $empty(gateways)" x-cloak class="text-center text-muted py-5">
        <i class="bi bi-hdd-network fs-1 d-block mb-3"></i>
        <p>No gateways registered.</p>
        <a class="btn btn-success btn-sm" href="/gateways/new"
           x-show="$isAdmin">
            <i class="bi bi-plus me-1"></i>Register Gateway
        </a>
    </div>

    <!-- Filters -->
    <div x-show="!loading && !error" x-cloak class="row g-2 mb-2">
        <div class="col-md-4">
            <input type="text" class="form-control form-control-sm" placeholder="Filter gateways..."
                   x-model="_filterText">
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control form-control-sm" placeholder="Label filter (e.g. env:dev)"
                   x-model.debounce.300ms="filterLabel" @input="load()">
        </div>
        <div class="col-md-4">
            <button class="btn btn-sm btn-outline-secondary" @click="clearLabelFilter()" x-show="filterLabel">
                <i class="bi bi-x-circle me-1"></i>Clear label filter
            </button>
        </div>
    </div>

    <!-- Gateway table -->
    <div x-show="!loading && !error && $notEmpty(gateways)" x-cloak class="table-responsive mb-4">
        <table class="table table-striped table-hover table-sm align-middle table-clickable">
            <thead>
                <tr>
                    <th :class="sortClass('name')" @click="sortBy('name')">Name</th>
                    <th class="d-none d-lg-table-cell" :class="sortClass('description')" @click="sortBy('description')">Description</th>
                    <th>Endpoint</th>
                    <th>Auth</th>
                    <th :class="sortClass('status')" @click="sortBy('status')">Status</th>
                    <th class="d-none d-md-table-cell" :class="sortClass('last_seen')" @click="sortBy('last_seen')">Last Seen</th>
                    <th class="text-end sg-w-60"></th>
                </tr>
            </thead>
            <tbody>
                <template x-for="gw in sorted(filtered(gateways, 'name', 'description', 'endpoint'))" :key="gw.name">
                    <tr @click="navigateTo('/gateways/' + gw.name)" class="sg-cursor-pointer"
                        :class="gw.connected ? 'table-active' : ''">
                        <td><strong x-text="gw.name"></strong></td>
                        <td class="d-none d-lg-table-cell small text-muted text-truncate sg-mw-200"
                            x-text="gw.description || '\u2014'"></td>
                        <td class="font-monospace small" x-text="gw.endpoint || '\u2014'"></td>
                        <td class="small" x-text="gw.auth_mode || '\u2014'"></td>
                        <td>
                            <span class="badge" :class="SG.badges.gateway[gw.status] || 'text-bg-secondary'">
                                <i class="bi me-1" :class="'bi-' + statusIcon(gw.status)"></i>
                                <span x-text="statusLabel(gw.status)"></span>
                            </span>
                            <span x-show="$eq(gw.status, 'connected') && gw.version" class="text-muted small ms-1" x-text="gw.version"></span>
                        </td>
                        <td class="d-none d-md-table-cell small text-muted" x-text="gw.last_seen ? formatTimeAgo(gw.last_seen) : '\u2014'"></td>
                        <td class="text-end" @click.stop>
                            <button x-show="$isAdmin" x-cloak
                                    class="btn btn-sm text-muted delete-btn"
                                    @click="unregister(gw.name)" title="Unregister">
                                <i class="bi bi-trash3"></i>
                            </button>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>
</div>
{% endblock %}


{% block extra_js %}
<script src="/static/js/gateway.js"></script>
{% endblock %}