{{ define "title" }}Delete monitor{{end}}

{{ define "content" }}
<div class="mx-auto max-w-[1600px] w-full">
    <div class="md:flex md:items-center md:justify-center p-8 md:p-10">
        {{template "delete_form" . }}
    </div>
</div>
{{ end }}

{{ define "delete_form" }}
<form hx-delete="/monitors/{{ .Monitor.ID }}" hx-swap="outerHTML" class="flex flex-col gap-4 w-full max-w-md">
    <div>
        <h1 class="font-semibold text-lg">Delete monitor</h1>
    </div>
    <div>
        <div role="alert" class="alert alert-vertical alert-error alert-soft">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="size-6! text-black">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
            </svg>
            <span>Are you sure? All the data will be lost.</span>
            <div>
                <a href="/m/{{ .Monitor.Uuid }}" hx-boost preload>
                    <button class="btn btn-sm btn-soft" type="button">Cancel</button>
                </a>
                <button class="btn btn-sm btn-neutral " type="submit">Remove this monitor</button>
            </div>
        </div>
    </div>
</form>
{{ end }}

{{ define "breadcrumbs" }}
<li class="">
    <a href="/" hx-boost preload>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="size-4! stroke-current shrink-0">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
        </svg>
        Monitors
    </a>
</li>
<li class="">
    <a href="/m/{{ .Monitor.Uuid }}" hx-boost preload>
        <div class="flex items-center gap-2 ">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="size-4! stroke-current shrink-0">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
            </svg>
            <span class="truncate">{{ .Monitor.Host }}</span>
        </div>
    </a>
</li>
<li class="">
    <div class="flex items-center gap-2 ">
        Delete
    </div>
</li>
{{ end }}