{% extends "pages/sandbox_base.html" %}
{% block title %}{{ rule_key }} — {{ sandbox_name }} — Shoreguard{% endblock %}

{% block breadcrumb_tail %}
<li class="breadcrumb-item"><a href="/gateways/{{ gateway_name }}/sandboxes/{{ sandbox_name }}/policy">Policy</a></li>
<li class="breadcrumb-item"><a href="/gateways/{{ gateway_name }}/sandboxes/{{ sandbox_name }}/network-policies">Network</a></li>
<li class="breadcrumb-item active">{{ rule_key }}</li>
{% endblock %}

{% block content %}
<div x-data='ruleDetailPage({{ sandbox_name|tojson }}, {{ rule_key|tojson }})' x-init="init()">
    <!-- Loading -->
    <div x-show="loading" class="text-center text-muted py-5">
        <div class="spinner-border spinner-border-sm me-2"></div>Loading rule...
    </div>

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

    <!-- View mode -->
    <template x-if="!loading && !error && rule && !editing">
        <div>
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4 class="mb-1" x-text="rule.name || ruleKey"></h4>
                    <span class="text-muted small">Key: <code x-text="ruleKey"></code></span>
                </div>
                <div class="d-flex gap-2">
                    <button class="btn btn-outline-primary btn-sm" @click="switchToEdit()"
                            x-show="$store.auth.hasRole('operator')" x-cloak>
                        <i class="bi bi-pencil me-1"></i>Edit
                    </button>
                    <button class="btn btn-outline-danger btn-sm" @click="deleteRule()"
                            x-show="$store.auth.hasRole('operator')" x-cloak>
                        <i class="bi bi-trash me-1"></i>Delete
                    </button>
                </div>
            </div>

            <!-- Endpoints -->
            <h6 class="text-muted mb-2">
                <i class="bi bi-globe me-1"></i>Endpoints
                <span class="badge text-bg-secondary ms-1" x-text="(rule.endpoints || []).length"></span>
            </h6>
            <template x-if="(rule.endpoints || []).length > 0">
                <div class="table-responsive mb-4">
                    <table class="table table-striped table-sm align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Host</th>
                                <th>Port</th>
                                <th>Protocol</th>
                                <th>TLS</th>
                                <th>Enforcement</th>
                                <th>Access</th>
                                <th>L7 Rules</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="ep in rule.endpoints" :key="ep.host + ':' + ep.port">
                                <tr>
                                    <td class="font-monospace" x-text="ep.host"></td>
                                    <td x-text="ep.port || 443"></td>
                                    <td>
                                        <span x-show="ep.protocol" class="badge text-bg-secondary" x-text="ep.protocol"></span>
                                        <span x-show="!ep.protocol" class="text-muted">&mdash;</span>
                                    </td>
                                    <td>
                                        <span x-show="ep.tls" class="badge text-bg-info" x-text="ep.tls"></span>
                                        <span x-show="!ep.tls" class="text-muted">&mdash;</span>
                                    </td>
                                    <td>
                                        <span x-show="ep.enforcement" class="badge text-bg-warning" x-text="ep.enforcement"></span>
                                        <span x-show="!ep.enforcement" class="text-muted">&mdash;</span>
                                    </td>
                                    <td>
                                        <span x-show="ep.access" class="badge text-bg-success" x-text="ep.access"></span>
                                        <span x-show="!ep.access" class="text-muted">&mdash;</span>
                                    </td>
                                    <td>
                                        <template x-if="(ep.rules || []).length > 0">
                                            <div>
                                                <template x-for="(r, ri) in (ep.rules || [])" :key="ri">
                                                    <div class="mb-1">
                                                        <span class="badge endpoint-badge me-1"
                                                              x-text="(r.allow?.method || '*') + ' ' + (r.allow?.path || '/*')"></span>
                                                        <code x-show="r.allow?.command" class="small ms-1" x-text="r.allow?.command"></code>
                                                        <template x-if="r.allow?.query && Object.keys(r.allow.query).length > 0">
                                                            <span class="ms-1">
                                                                <template x-for="(matcher, param) in (r.allow?.query || {})" :key="param">
                                                                    <span class="badge text-bg-light border small me-1"
                                                                          x-text="param + ':' + (matcher.glob ? 'glob(' + matcher.glob + ')' : 'any(' + (matcher.any || []).join(',') + ')')"></span>
                                                                </template>
                                                            </span>
                                                        </template>
                                                    </div>
                                                </template>
                                            </div>
                                        </template>
                                        <span x-show="!(ep.rules || []).length" class="text-muted">&mdash;</span>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </template>
            <p x-show="!(rule.endpoints || []).length" class="text-muted mb-4">No endpoints configured.</p>

            <!-- Binaries -->
            <h6 class="text-muted mb-2">
                <i class="bi bi-terminal me-1"></i>Allowed Binaries
                <span class="badge text-bg-secondary ms-1" x-text="(rule.binaries || []).length"></span>
            </h6>
            <template x-if="(rule.binaries || []).length > 0">
                <div class="table-responsive">
                    <table class="table table-striped table-sm align-middle mb-0">
                        <thead><tr><th>Path</th></tr></thead>
                        <tbody>
                            <template x-for="b in rule.binaries" :key="b.path">
                                <tr><td class="font-monospace small" x-text="b.path"></td></tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </template>
            <p x-show="!(rule.binaries || []).length" class="text-muted">No binary restrictions.</p>
        </div>
    </template>

    <!-- Edit mode -->
    <template x-if="!loading && !error && editing">
        <div>
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="mb-0" x-text="isNew ? 'New Network Rule' : 'Edit: ' + (rule?.name || ruleKey)"></h4>
                <button class="btn btn-outline-secondary btn-sm" @click="cancelEdit()" x-show="!isNew">
                    <i class="bi bi-x me-1"></i>Cancel
                </button>
            </div>

            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label class="form-label">Rule Key</label>
                    <input type="text" class="form-control form-control-sm" x-model="editKey"
                           placeholder="e.g. allow-pypi" :readonly="!isNew">
                    <div class="form-text">Unique identifier for this rule.</div>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Display Name</label>
                    <input type="text" class="form-control form-control-sm" x-model="editName"
                           placeholder="e.g. PyPI Package Registry">
                </div>
            </div>

            <!-- Endpoints -->
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h6 class="mb-0"><i class="bi bi-globe me-1"></i>Endpoints</h6>
                <button class="btn btn-outline-success btn-sm" type="button" @click="addEndpoint()">
                    <i class="bi bi-plus me-1"></i>Add Endpoint
                </button>
            </div>
            <div class="mb-4">
                <template x-for="ep in endpoints" :key="ep.id">
                    <div class="card sg-overlay-card mb-2">
                        <div class="card-body py-2 px-3">
                            <div class="d-flex justify-content-end mb-2">
                                <button class="btn btn-outline-danger btn-sm" type="button" @click="removeEndpoint(ep.id)" title="Remove endpoint">
                                    <i class="bi bi-x"></i>
                                </button>
                            </div>
                            <div class="row g-2 mb-2">
                                <div class="col-md-6">
                                    <label class="form-label small text-muted mb-1">Host</label>
                                    <input type="text" class="form-control form-control-sm" placeholder="api.example.com" x-model="ep.host">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label small text-muted mb-1">Port</label>
                                    <input type="number" class="form-control form-control-sm" placeholder="443" x-model.number="ep.port">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small text-muted mb-1">Protocol</label>
                                    <select class="form-select form-select-sm" x-model="ep.protocol">
                                        <option value="">&mdash;</option>
                                        <option value="rest">REST</option>
                                        <option value="sql">SQL</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row g-2">
                                <div class="col-md-4">
                                    <label class="form-label small text-muted mb-1">TLS</label>
                                    <select class="form-select form-select-sm" x-model="ep.tls">
                                        <option value="">&mdash;</option>
                                        <option value="terminate">Terminate</option>
                                        <option value="passthrough">Passthrough</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small text-muted mb-1">Enforcement</label>
                                    <select class="form-select form-select-sm" x-model="ep.enforcement">
                                        <option value="">&mdash;</option>
                                        <option value="enforce">Enforce</option>
                                        <option value="audit">Audit</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small text-muted mb-1">Access</label>
                                    <select class="form-select form-select-sm" x-model="ep.access">
                                        <option value="">&mdash;</option>
                                        <option value="full">Full</option>
                                    </select>
                                </div>
                            </div>
                            <!-- L7 Rules per endpoint -->
                            <div class="mt-2 border-top pt-2">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="small text-muted fw-semibold">L7 Rules</span>
                                    <button class="btn btn-outline-success btn-sm py-0 px-1" type="button" @click="addL7Rule(ep)">
                                        <i class="bi bi-plus"></i> Rule
                                    </button>
                                </div>
                                <template x-for="rule in ep.rules" :key="rule.id">
                                    <div class="card bg-body-tertiary mb-1">
                                        <div class="card-body py-1 px-2">
                                            <div class="d-flex justify-content-end">
                                                <button class="btn btn-outline-danger btn-sm py-0 px-1" type="button" @click="removeL7Rule(ep, rule.id)" title="Remove rule">
                                                    <i class="bi bi-x"></i>
                                                </button>
                                            </div>
                                            <div class="row g-2 mb-1">
                                                <div class="col-md-3">
                                                    <label class="form-label small text-muted mb-0">Method</label>
                                                    <select class="form-select form-select-sm" x-model="rule.method">
                                                        <option value="">* (any)</option>
                                                        <option value="GET">GET</option>
                                                        <option value="POST">POST</option>
                                                        <option value="PUT">PUT</option>
                                                        <option value="DELETE">DELETE</option>
                                                        <option value="PATCH">PATCH</option>
                                                        <option value="HEAD">HEAD</option>
                                                        <option value="OPTIONS">OPTIONS</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-5">
                                                    <label class="form-label small text-muted mb-0">Path</label>
                                                    <input type="text" class="form-control form-control-sm" placeholder="/api/v1/*" x-model="rule.path">
                                                </div>
                                                <div class="col-md-4">
                                                    <label class="form-label small text-muted mb-0">Command</label>
                                                    <input type="text" class="form-control form-control-sm" placeholder="e.g. SELECT" x-model="rule.command">
                                                </div>
                                            </div>
                                            <!-- Query Matchers -->
                                            <div class="mt-1">
                                                <div class="d-flex justify-content-between align-items-center mb-1">
                                                    <span class="small text-muted">Query Matchers</span>
                                                    <button class="btn btn-outline-secondary btn-sm py-0 px-1" type="button" @click="addQueryMatcher(rule)">
                                                        <i class="bi bi-plus"></i> Matcher
                                                    </button>
                                                </div>
                                                <template x-for="(qm, qi) in rule.query" :key="qi">
                                                    <div class="row g-1 mb-1 align-items-end">
                                                        <div class="col-3">
                                                            <input type="text" class="form-control form-control-sm" placeholder="param" x-model="qm.param">
                                                        </div>
                                                        <div class="col-3">
                                                            <select class="form-select form-select-sm" x-model="qm.type">
                                                                <option value="glob">glob</option>
                                                                <option value="any">any</option>
                                                            </select>
                                                        </div>
                                                        <div class="col-5">
                                                            <input type="text" class="form-control form-control-sm"
                                                                   :placeholder="qm.type === 'glob' ? 'sk-*' : 'json,xml'"
                                                                   x-model="qm.value">
                                                        </div>
                                                        <div class="col-1">
                                                            <button class="btn btn-outline-danger btn-sm py-0 px-1" type="button" @click="removeQueryMatcher(rule, qi)">
                                                                <i class="bi bi-x"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </template>
            </div>

            <!-- Binaries -->
            <div class="mb-4">
                <h6><i class="bi bi-terminal me-1"></i>Allowed Binaries</h6>
                <textarea class="form-control form-control-sm font-monospace" rows="4"
                          placeholder="One path per line, e.g.&#10;/usr/bin/curl&#10;/usr/bin/git"
                          x-model="editBinaries"></textarea>
                <div class="form-text">One binary path per line.</div>
            </div>

            <!-- Actions -->
            <div class="d-flex gap-2">
                <button class="btn btn-success" @click="save()">
                    <i class="bi bi-check me-1"></i>Save Rule
                </button>
                <button class="btn btn-outline-secondary" @click="cancelEdit()">Cancel</button>
            </div>
        </div>
    </template>
</div>
{% endblock %}

{% block sandbox_js %}
<script src="/static/js/rule.js"></script>
{% endblock %}