{{ define "title"}}
About
{{ end }}

{{ define "top_css"}}
{{ end }}

{{ define "username"}}
{{ .username }}
{{ end }}

{{ define "page_title"}}
About
{{ end }}

{{ define "page_content"}}
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <!-- left column -->
            <div class="col-md-6">
                <div class="card card-success">
                    <div class="card-header">
                        <h3 class="card-title">About wireguard-ui-multi</h3>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <p>
                            Native multi-server WireGuard management UI. Runs multiple independent
                            WireGuard interfaces (own name, port, keypair, subnet, peers and settings
                            each) from a single installation, without Docker.
                        </p>
                        <div class="form-group">
                            <label for="version" class="control-label">Current version</label>
                            <input type="text" class="form-control" id="version" value="{{ .appVersion }}" readonly>
                        </div>
{{ if .gitCommit }}
                        <div class="form-group">
                            <label for="version" class="control-label">git commit hash</label>
                            <input type="text" class="form-control" id="version" value="{{ .gitCommit }}" readonly>
                        </div>
{{ end }}
                        <strong>&copy; <script>document.write(new Date().getFullYear())</script> wireguard-ui-multi.</strong>
                    </div>
                </div>
                <!-- /.card -->
            </div>

            <!-- right column -->
            <div class="col-md-6">
                <div class="card card-info">
                    <div class="card-header">
                        <h3 class="card-title">System Updates (OS packages)</h3>
                    </div>
                    <div class="card-body">
                        <p class="text-muted">Read-only check against the current apt package index. Nothing is installed automatically.</p>
                        <div id="_update_status_summary">Checking...</div>
                        <div id="_update_status_reboot" style="display:none;" class="text-danger mt-2">
                            <i class="fas fa-exclamation-triangle"></i> A reboot is required to apply already-installed updates.
                        </div>
                        <pre id="_update_status_packages" style="max-height: 30vh; overflow:auto; margin-top: 10px;"></pre>
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="btn_check_updates">Check now</button>
                    </div>
                </div>
                <!-- /.card -->
            </div>
        </div>
        <!-- /.row -->
    </div>
</section>
{{ end }}

{{ define "bottom_js"}}
<script>
    function loadUpdateStatus() {
        $("#_update_status_summary").text("Checking...");
        $("#_update_status_packages").text("");
        $("#_update_status_reboot").hide();
        $.ajax({
            cache: false,
            method: 'GET',
            url: '{{.basePath}}/system/update-status',
            dataType: 'json',
            success: function (data) {
                if (!data.supported) {
                    $("#_update_status_summary").text("Not supported on this host (apt not found).");
                    return;
                }
                if (data.error) {
                    $("#_update_status_summary").text("Error: " + data.error);
                    return;
                }
                if (data.upgradable_count === 0) {
                    $("#_update_status_summary").html('<span class="text-success"><i class="fas fa-check-circle"></i> System is up to date.</span>');
                } else {
                    $("#_update_status_summary").html('<span class="text-warning"><i class="fas fa-arrow-circle-up"></i> ' +
                        data.upgradable_count + ' package(s) can be upgraded.</span>');
                    $("#_update_status_packages").text((data.packages || []).join("\n"));
                }
                if (data.reboot_required) {
                    $("#_update_status_reboot").show();
                }
            },
            error: function () {
                $("#_update_status_summary").text("Could not check update status.");
            }
        });
    }

    $(document).ready(function () {
        loadUpdateStatus();
        $("#btn_check_updates").click(function () {
            loadUpdateStatus();
        });
    });
</script>
{{ end }}