{{- template "document.html" . }}

{{- define "document-title" }}Edit - {{ .App.Config.Branding.AppName }}{{ end }}

{{- define "document-body" }}
<div class="flex flex-column body-content">
    <main class="content-bounds" style="padding-block: 2rem;">
        <div class="flex items-center gap-10">
            <h1 class="size-h1 grow">Edit</h1>
            <a href="{{ .App.Config.Server.BaseURL }}/edit/theme-settings">
                <button type="button">Theme</button>
            </a>
            <a href="{{ .App.Config.Server.BaseURL }}/edit/site-settings">
                <button type="button">Site settings</button>
            </a>
        </div>
        <p class="color-subdue margin-bottom-25">
            Editing <code>{{ .App.ConfigPath }}</code>. Changes take effect via hot-reload.
        </p>

        <h2 class="size-h2 margin-bottom-10">Pages</h2>
        <ul class="list list-gap-10 margin-bottom-25">
            {{- range .Pages }}
            <li class="flex items-center gap-10">
                <div class="grow">
                    <a class="color-primary" href="{{ $.App.Config.Server.BaseURL }}/edit/pages/{{ .Slug }}">
                        {{ .Title }}
                    </a>
                    <span class="color-subdue"> — {{ .WidgetCount }} widget{{ if ne .WidgetCount 1 }}s{{ end }}</span>
                    <div class="color-subdue size-h5">/{{ .Slug }}</div>
                </div>
                <form method="post" action="{{ $.App.Config.Server.BaseURL }}/edit/api/pages/{{ .Slug }}/move?dir=up">
                    <button type="submit" {{ if .IsFirst }}disabled{{ end }} title="Move up">↑</button>
                </form>
                <form method="post" action="{{ $.App.Config.Server.BaseURL }}/edit/api/pages/{{ .Slug }}/move?dir=down">
                    <button type="submit" {{ if .IsLast }}disabled{{ end }} title="Move down">↓</button>
                </form>
                <a href="{{ $.App.Config.Server.BaseURL }}/edit/pages/{{ .Slug }}/settings" title="Page settings">
                    <button type="button">Settings</button>
                </a>
                <form method="post" action="{{ $.App.Config.Server.BaseURL }}/edit/api/pages/{{ .Slug }}/delete"
                      onsubmit="return confirm('Delete page &quot;{{ .Title }}&quot; and all its widgets?');">
                    <button type="submit" class="color-negative">Delete</button>
                </form>
            </li>
            {{- end }}
        </ul>

        <h3 class="size-h3 margin-bottom-10">Add a page</h3>
        <form method="post" action="{{ .App.Config.Server.BaseURL }}/edit/api/pages" class="flex gap-10 items-center">
            <input type="text" name="title" required placeholder="Page title" class="input grow">
            <button type="submit">Add page</button>
        </form>

        <hr style="margin-block: 2rem; border: none; border-top: 1px solid var(--color-widget-content-border);">
        <h3 class="size-h3 margin-bottom-10">Saved versions</h3>
        <p class="color-subdue margin-bottom-10">
            Up to {{ len .Backups }} previous versions of <code>{{ .App.ConfigPath }}</code> are kept.
            Restoring any one writes it as the current config and saves the just-current state as the new <em>most recent</em>, so you can always step back.
        </p>

        <form method="post" action="{{ .App.Config.Server.BaseURL }}/edit/api/restore"
              onsubmit="return confirm('Restore the most recent backup? You can click again to flip back.');" class="margin-bottom-15">
            <button type="submit">Restore previous version (toggle)</button>
        </form>

        <ul class="list list-gap-10">
            {{- range .Backups }}
            {{- if .Present }}
            <li class="flex items-center gap-10">
                <div class="grow">
                    <span class="color-text-base">Version {{ .N }}</span>
                    <span class="color-subdue size-h5"> — {{ .Time }} · {{ .SizeKB }} KB</span>
                </div>
                <form method="post" action="{{ $.App.Config.Server.BaseURL }}/edit/api/restore/{{ .N }}"
                      onsubmit="return confirm('Restore this version? Current state will be saved as the new most recent backup.');">
                    <button type="submit">Restore this</button>
                </form>
            </li>
            {{- end }}
            {{- end }}
        </ul>
    </main>
    {{ template "footer.html" . }}
</div>
{{- end }}