{% 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="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="form.name" placeholder="my-gateway" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Endpoint</label>
                            <input type="text" class="form-control" x-model="form.endpoint" 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="form.scheme">
                                <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="form.auth_mode">
                                <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="form.caFile = $event.target.files[0]" 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="form.certFile = $event.target.files[0]" 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="form.keyFile = $event.target.files[0]" 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="form.gpu">
                        <label class="form-check-label" for="reg-gw-gpu">GPU passthrough</label>
                    </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 %}