{% extends "pages/sandbox_base.html" %}
{% block title %}{{ section_title }} — {{ 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 active">{{ section_title }}</li>
{% endblock %}

{% block content %}
{% if section == 'network' %}
<!-- Network Policies -->
<div x-data='networkPoliciesPage({{ sandbox_name|tojson }})' x-init="init()">
    <div x-show="loading" class="text-center text-muted py-5">
        <div class="spinner-border spinner-border-sm me-2"></div>Loading network policies...
    </div>
    <div x-show="error" x-cloak class="alert alert-danger" x-text="error"></div>

    <template x-if="!loading && !error">
        <div>
            <div class="d-flex justify-content-end mb-3">
                <a :href="gwUrl('/sandboxes/' + sandboxName + '/rules/_new')" class="btn btn-outline-success btn-sm">
                    <i class="bi bi-plus me-1"></i>Add Rule
                </a>
            </div>

            <!-- Empty -->
            <div x-show="rules.length === 0" class="text-center text-muted py-5">
                <i class="bi bi-globe fs-1 d-block mb-3"></i>
                <p>No network policies configured.</p>
                <a :href="gwUrl('/sandboxes/' + sandboxName + '/rules/_new')" class="btn btn-outline-success btn-sm">
                    <i class="bi bi-plus me-1"></i>Add Rule
                </a>
            </div>

            <!-- Table -->
            <div x-show="rules.length > 0" class="table-responsive">
                <table class="table table-striped table-hover table-sm align-middle table-clickable">
                    <thead>
                        <tr>
                            <th>Rule</th>
                            <th>Endpoints</th>
                            <th>Binaries</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="rule in rules" :key="rule.key">
                            <tr @click="navigateTo(gwUrl('/sandboxes/' + sandboxName + '/rules/' + encodeURIComponent(rule.key)))">
                                <td>
                                    <strong x-text="rule.name"></strong>
                                    <div x-show="rule.showKey" class="text-muted small" x-text="rule.key"></div>
                                </td>
                                <td>
                                    <span class="text-muted small font-monospace" x-text="rule.topHosts + rule.moreCount"></span>
                                </td>
                                <td>
                                    <span class="badge text-bg-secondary" x-text="rule.binaries.length"></span>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
    </template>
</div>

{% elif section == 'filesystem' %}
<!-- Filesystem Policy -->
<div x-data='filesystemPolicyPage({{ sandbox_name|tojson }})' x-init="init()">
    <div x-show="loading" class="text-center text-muted py-5">
        <div class="spinner-border spinner-border-sm me-2"></div>Loading filesystem policy...
    </div>
    <div x-show="error" x-cloak class="alert alert-danger" x-text="error"></div>

    <template x-if="!loading && !error">
        <div>
            <div class="d-flex justify-content-between align-items-center mb-3">
                <span class="text-muted small"><i class="bi bi-info-circle me-1"></i>Add or remove filesystem paths.</span>
                <button class="btn btn-outline-success btn-sm" @click="showAddForm = true; $nextTick(() => $refs.newPathInput?.focus())"
                        x-show="$store.auth.hasRole('operator')" x-cloak>
                    <i class="bi bi-plus me-1"></i>Add Path
                </button>
            </div>

            <!-- Add form -->
            <div x-show="showAddForm" x-cloak class="card sg-card-themed mb-3">
                <div class="card-body sg-overlay-card">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-6">
                            <label class="form-label small">Path</label>
                            <input type="text" x-ref="newPathInput" x-model="newPath"
                                   class="form-control form-control-sm font-monospace" placeholder="/usr/local/bin">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small">Access</label>
                            <select x-model="newAccess" class="form-select form-select-sm">
                                <option value="ro">Read Only</option>
                                <option value="rw">Read / Write</option>
                            </select>
                        </div>
                        <div class="col-md-3 d-flex gap-2">
                            <button class="btn btn-success btn-sm" @click="addPath()">
                                <i class="bi bi-check me-1"></i>Add
                            </button>
                            <button class="btn btn-outline-secondary btn-sm" @click="showAddForm = false">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Table -->
            <div x-show="rows.length > 0" class="table-responsive">
                <table class="table table-striped table-sm align-middle">
                    <thead>
                        <tr>
                            <th>Path</th>
                            <th style="width:120px">Access</th>
                            <th style="width:60px" class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="row in rows" :key="row.path">
                            <tr>
                                <td class="font-monospace small" x-text="row.path"></td>
                                <td><span class="badge" :class="row.badge" x-text="row.label"></span></td>
                                <td class="text-end">
                                    <button class="btn btn-sm text-muted delete-btn" @click="deletePath(row.path)"
                                            x-show="$store.auth.hasRole('operator')" x-cloak title="Delete">
                                        <i class="bi bi-trash3"></i>
                                    </button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>

            <!-- Empty -->
            <div x-show="rows.length === 0" class="text-center text-muted py-5">
                <i class="bi bi-folder fs-1 d-block mb-3"></i>
                <p>No filesystem paths configured.</p>
            </div>
        </div>
    </template>
</div>

{% elif section == 'process' %}
<!-- Process Policy -->
<div x-data='processPolicyPage({{ sandbox_name|tojson }})' x-init="init()">
    <div x-show="loading" class="text-center text-muted py-5">
        <div class="spinner-border spinner-border-sm me-2"></div>Loading process policy...
    </div>
    <div x-show="error" x-cloak class="alert alert-danger" x-text="error"></div>

    <template x-if="!loading && !error">
        <div>
            <div class="d-flex justify-content-between align-items-center mb-3">
                <span class="text-muted small"><i class="bi bi-cpu me-1"></i>Process and Landlock settings</span>
                <button class="btn btn-outline-secondary btn-sm" @click="editing = !editing"
                        x-show="$store.auth.hasRole('operator')" x-cloak>
                    <i class="bi me-1" :class="editing ? 'bi-x' : 'bi-pencil'"></i>
                    <span x-text="editing ? 'Cancel' : 'Edit'"></span>
                </button>
            </div>

            <!-- View -->
            <div x-show="!editing">
                <div class="table-responsive">
                    <table class="table table-sm align-middle">
                        <thead><tr><th>Setting</th><th>Value</th></tr></thead>
                        <tbody>
                            <tr>
                                <td>Run as user</td>
                                <td class="font-monospace">
                                    <span x-show="runAsUser" x-text="runAsUser"></span>
                                    <span x-show="!runAsUser" class="text-muted">&mdash;</span>
                                </td>
                            </tr>
                            <tr>
                                <td>Run as group</td>
                                <td class="font-monospace">
                                    <span x-show="runAsGroup" x-text="runAsGroup"></span>
                                    <span x-show="!runAsGroup" class="text-muted">&mdash;</span>
                                </td>
                            </tr>
                            <tr>
                                <td>Landlock compatibility</td>
                                <td class="font-monospace">
                                    <span x-show="landlockCompat" x-text="landlockCompat"></span>
                                    <span x-show="!landlockCompat" class="text-muted">&mdash;</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Edit -->
            <div x-show="editing" x-cloak>
                <div class="card sg-card-themed">
                    <div class="card-body sg-overlay-card">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label small">Run as user</label>
                                <input type="text" x-model="runAsUser" class="form-control form-control-sm font-monospace" placeholder="e.g. 1000">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small">Run as group</label>
                                <input type="text" x-model="runAsGroup" class="form-control form-control-sm font-monospace" placeholder="e.g. 1000">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small">Landlock compatibility</label>
                                <input type="text" x-model="landlockCompat" class="form-control form-control-sm font-monospace" placeholder="e.g. 3">
                            </div>
                        </div>
                        <div class="mt-3 d-flex gap-2">
                            <button class="btn btn-success btn-sm" @click="save()">
                                <i class="bi bi-check me-1"></i>Save
                            </button>
                            <button class="btn btn-outline-secondary btn-sm" @click="editing = false">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
</div>

{% elif section == 'presets' %}
<!-- Apply Preset -->
<div x-data='presetsPage({{ sandbox_name|tojson }})' x-init="init()">
    <div x-show="loading" class="text-center text-muted py-5">
        <div class="spinner-border spinner-border-sm me-2"></div>Loading presets...
    </div>
    <div x-show="error" x-cloak class="alert alert-danger" x-text="error"></div>

    <!-- Empty -->
    <div x-show="!loading && !error && presets.length === 0" x-cloak class="text-center text-muted py-5">
        <i class="bi bi-shield-plus fs-1 d-block mb-3"></i>
        <p>No presets available.</p>
    </div>

    <!-- Presets grid -->
    <div x-show="!loading && !error && presets.length > 0" x-cloak class="row g-3">
        <template x-for="p in presets" :key="p.name">
            <div class="col-md-4">
                <div class="card h-100 policy-overview-card sg-card-themed">
                    <div class="card-body">
                        <h6 class="mb-2" x-text="p.name"></h6>
                        <p class="text-muted small mb-0" x-text="p.description || ''"></p>
                    </div>
                    <div class="card-footer border-0 pt-0" style="background:transparent">
                        <button class="btn btn-outline-success btn-sm" @click="apply(p.name)">
                            <i class="bi bi-plus me-1"></i>Apply
                        </button>
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>
{% endif %}
{% endblock %}

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