{% extends "base.html" %}
{% block title %}Policy Presets — Shoreguard{% endblock %}

{% block breadcrumbs %}
<ol class="breadcrumb mb-0">
    <li class="breadcrumb-item active">Policy Presets</li>
</ol>
{% endblock %}

{% block content %}
<h5 class="mb-3">Policy Presets</h5>

<div x-data="presetsList()">
    <!-- Loading -->
    <div x-show="loading" class="text-center text-muted py-5">
        <div class="spinner-border spinner-border-sm me-2"></div>Loading presets...
    </div>

    <!-- Error -->
    <div x-show="error" x-cloak class="text-center text-muted py-5">
        <i class="bi bi-exclamation-triangle text-warning me-1"></i>Could not load presets: <span x-text="error"></span>
    </div>

    <!-- Empty -->
    <div x-show="!loading && !error && presets.length === 0" x-cloak class="text-center text-muted py-5">
        <i class="bi bi-info-circle me-1"></i>No policy presets available.
    </div>

    <!-- Table -->
    <template x-if="!loading && !error && presets.length > 0">
        <div class="table-responsive">
            <table class="table table-striped table-hover table-sm align-middle table-clickable">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="p in presets" :key="p.name">
                        <tr @click="navigateTo('/policies/' + p.name)" style="cursor:pointer">
                            <td><strong x-text="p.name"></strong></td>
                            <td class="text-muted" x-text="p.description"></td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </template>
</div>
{% endblock %}

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