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

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

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8" x-data="gatewayRegisterPage()">
        <h5 class="mb-3"><i class="bi bi-plus-circle me-2"></i>Register Gateway</h5>

        <div class="alert alert-info small d-flex" role="alert">
            <i class="bi bi-info-circle me-2 mt-1"></i>
            <div>
                Most solo setups don't need this. If OpenShell runs on this machine, restart
                ShoreGuard with <code>shoreguard --local</code> and your gateway is auto-detected —
                no certificates required. This form connects a <strong>remote</strong> gateway
                (needs an endpoint and mTLS certificates).
            </div>
        </div>

        <div class="card sg-card-themed">
            <div class="card-body">
                <form @submit.prevent="submit()">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" x-model="fName" placeholder="my-gateway" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Endpoint</label>
                            <input type="text" class="form-control" x-model="fEndpoint" placeholder="10.0.0.5:8443" required>
                            <div class="form-text">host:port of the OpenShell gateway</div>
                        </div>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-6">
                            <label class="form-label">Scheme</label>
                            <select class="form-select" x-model="fScheme">
                                <option value="https" selected>https (mTLS)</option>
                                <option value="http">http (insecure)</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Auth Mode</label>
                            <select class="form-select" x-model="fAuthMode">
                                <option value="mtls" selected>mTLS</option>
                                <option value="insecure">Insecure</option>
                                <option value="cloudflare_jwt">Cloudflare JWT</option>
                            </select>
                        </div>
                    </div>
                    <div class="mt-3">
                        <h6 class="text-muted mb-2">mTLS Certificates</h6>
                        <div class="mb-2">
                            <label class="form-label small">CA Certificate (PEM)</label>
                            <input type="file" class="form-control form-control-sm" accept=".pem,.crt"
                                   @change="pickCaFile($event)" x-ref="caInput">
                        </div>
                        <div class="mb-2">
                            <label class="form-label small">Client Certificate (PEM)</label>
                            <input type="file" class="form-control form-control-sm" accept=".pem,.crt"
                                   @change="pickCertFile($event)" x-ref="certInput">
                        </div>
                        <div class="mb-2">
                            <label class="form-label small">Client Key (PEM)</label>
                            <input type="file" class="form-control form-control-sm" accept=".pem,.key"
                                   @change="pickKeyFile($event)" x-ref="keyInput">
                        </div>
                    </div>
                    <div class="form-check form-switch mt-3">
                        <input class="form-check-input" type="checkbox" id="reg-gw-gpu" x-model="fGpu">
                        <label class="form-check-label" for="reg-gw-gpu">GPU passthrough</label>
                    </div>
                    <div class="mt-3">
                        <label class="form-label">Description</label>
                        <input type="text" class="form-control form-control-sm" x-model="fDescription"
                               placeholder="e.g. Production EU-West for ML team" maxlength="1000">
                    </div>
                    <div class="mt-3">
                        <label class="form-label">Labels</label>
                        <div x-show="$notEmpty(labelRows)" class="mb-2 d-flex flex-wrap gap-1">
                            <template x-for="lbl in labelRows" :key="lbl.key">
                                <span class="badge text-bg-light border d-inline-flex align-items-center gap-1">
                                    <span class="font-monospace" x-text="lbl.key"></span>
                                    <span class="text-muted">=</span>
                                    <span x-text="lbl.val"></span>
                                    <button type="button" class="btn-close btn-close-sm ms-1 sg-fs-xxs"
                                            @click="removeLabel(lbl.key)"></button>
                                </span>
                            </template>
                        </div>
                        <div x-show="$lenLt(labelRows, 20)" class="input-group input-group-sm">
                            <input type="text" class="form-control font-monospace" x-model="newLabelKey"
                                   placeholder="key" @keydown.enter.prevent="addLabel()">
                            <span class="input-group-text">=</span>
                            <input type="text" class="form-control" x-model="newLabelVal"
                                   placeholder="value" @keydown.enter.prevent="addLabel()">
                            <button class="btn btn-outline-success" type="button" @click="addLabel()"
                                    :disabled="!canAddLabel">
                                <i class="bi bi-plus"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Error / Status -->
                    <div class="mt-2" x-show="output" x-html="output"></div>

                    <div class="d-flex gap-2 mt-3">
                        <button type="submit" class="btn btn-success" :disabled="submitting">
                            <i class="bi bi-plus me-1"></i>Register
                        </button>
                        <a href="/gateways" class="btn btn-outline-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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