{{template "base" .}}

{{define "title"}}Settings - Webhooker{{end}}

{{define "content"}}
<div class="max-w-6xl mx-auto px-6 py-8">
    <h1 class="text-2xl font-medium text-gray-900">Settings</h1>
    <p class="text-sm text-gray-500 mt-1 mb-6">The configuration this server started with. It is set in the server's environment and cannot be changed here.</p>

    <div class="card">
        <div class="divide-y divide-gray-100">
            {{range .Settings}}
            <div class="p-4">
                <!-- A value too wide to sit beside its name moves to the
                     next line, where a list breaks only at the spaces
                     between its entries. overflow-wrap: anywhere breaks
                     inside a value only when it alone is wider than the
                     line; an inline style, because the committed
                     tailwind.css has no class for it. -->
                <div class="flex flex-wrap justify-between items-start gap-4">
                    <code class="text-sm font-medium text-gray-900">{{.Name}}</code>
                    <code class="text-sm text-gray-900" style="overflow-wrap: anywhere">{{.Value}}</code>
                </div>
                <p class="text-sm text-gray-500 mt-1">{{.Description}}</p>
            </div>
            {{end}}
        </div>
    </div>
</div>
{{end}}