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

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

{% block content %}
<div x-data="servicesPage">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0">Exposed Services</h5>
        <div class="btn-group btn-group-sm">
            <button class="btn btn-outline-secondary" @click="refresh()" title="Refresh">
                <i class="bi bi-arrow-clockwise"></i>
            </button>
            <button class="btn btn-outline-success" data-sg-min-role="operator" @click="openExpose()">
                <i class="bi bi-plus-lg me-1"></i>Expose service
            </button>
        </div>
    </div>
    <p class="text-muted small">
        Publish a loopback port inside a sandbox on a gateway-routed endpoint.
        Enable <strong>domain</strong> for a browser-facing URL.
    </p>
    <div id="services-page-content"></div>
</div>
{% endblock %}

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