<!doctype html>
<html class="h-full bg-gray-100">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="htmx-config" content='{"methodsThatUseUrlParams":["get","delete"]}'>
  <title>aiomonitor - {{ title }}</title>
  <script src="/static/htmx.js"></script>
  <script src="/static/mustache.js"></script>
  <script src="/static/client-side-templates.js"></script>
  <script src="/static/tailwind.js"></script><!-- includes the official "forms" plugin -->
  <script src="/static/alpine.js" defer></script>
  <style type="text/css">
  .htmx-indicator{
    display: none;
  }
  .htmx-request .button-indicator{
    display: inline-block;
  }
  .htmx-request.button-indicator{
    display: inline-block;
  }
  </style>
</head>
<body class="h-full" hx-ext="client-side-templates">
<div class="min-h-full">
  <nav class="bg-gray-800">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <div class="flex h-16 items-center justify-between">
        <div class="flex items-center">
          <div class="flex-shrink-0 text-white">
            aiomonitor
          </div>
          <div class="ml-10 flex items-baseline space-x-4">
            {% for path, item in navigation.items() %}
              {% if item.current %}
                <a href="{{ path }}" class="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium" aria-current="page">{{ item.title }}</a>
              {% else %}
                <a href="{{ path }}" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">{{ item.title }}</a>
              {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </nav>

  <header class="bg-white shadow">
    <div class="mx-auto max-w-7xl px-4 py-0 sm:px-6 lg:px-8">
      <h1 class="py-6 text-3xl font-bold tracking-tight text-gray-900">{{ page.title }}</h1>
      {% block head_content %}{% endblock %}
    </div>
  </header>
  <main>
    <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
      {% block content %}{% endblock %}
    </div>
  </main>
</div>
{% raw %}
<template id="scalar-value">{{ value }}</template>
<template id="notification-success">
  <div aria-live="assertive" class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6">
    <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
      <div class="pointer-events-auto w-full max-w-md overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5"
        x-show="open"
        x-transition:enter="transition transform ease-out duration-500"
        x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
        x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
        x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
      >
        <div class="p-4">
          <div class="flex items-start">
            <div class="flex-shrink-0">
              <svg class="h-6 w-6 text-green-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <div class="ml-2 flex-1 pt-0.5">
              <p class="text-sm font-medium text-gray-900">{{ msg }}</p>
              {{# detail }}<pre class="mt-1 font-mono text-xs text-gray-500">{{ detail }}</pre>{{/ detail }}
            </div>
            <div class="ml-4 flex flex-shrink-0">
              <button type="button" class="action-dismiss inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                @click="open = false;"
              >
                <span class="sr-only">Close</span>
                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<template id="notification-failure">
  <div aria-live="assertive" class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6">
    <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
      <div class="pointer-events-auto w-full max-w-md overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5"
        x-show="open"
        x-transition:enter="transition transform ease-out duration-500"
        x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
        x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
        x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
      >
        <div class="p-4">
          <div class="flex items-start">
            <div class="flex-shrink-0">
              <svg class="h-6 w-6 text-red-400"  fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
              </svg>
            </div>
            <div class="ml-2 flex-1 pt-0.5">
              <p class="text-sm font-medium text-gray-900">{{ msg }}</p>
              {{# detail }}<pre class="mt-1 font-mono text-xs text-gray-500">{{ detail }}</pre>{{/ detail }}
            </div>
            <div class="ml-4 flex flex-shrink-0">
              <button type="button" class="action-dismiss inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                @click="open = false;"
              >
                <span class="sr-only">Close</span>
                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
{% endraw %}

<script type="text/javascript">
function showNotification(success, data) {
  var tpl;
  if (success) {
    tpl = document.getElementById('notification-success');
  } else {
    tpl = document.getElementById('notification-failure');
  }
  var outContainer = document.getElementById("notification");
  const renderedContent = Mustache.render(tpl.innerHTML, data);
  if (outContainer === null) {
    outContainer = document.createElement("div");
    outContainer.setAttribute("id", "notification");
    document.body.appendChild(outContainer);
  }
  outContainer.setAttribute("x-data", "{ open: false }");
  outContainer.setAttribute("x-init", "$nextTick(() => open = true); setTimeout(() => open = false, 4200)");
  outContainer.innerHTML = renderedContent;
}

document.addEventListener("htmx:afterRequest", function(ev) {
  if (!ev.detail.elt.classList.contains("notify-result"))
    return;
  showNotification(!ev.detail.failed, JSON.parse(ev.detail.xhr.responseText));
});
</script>
</body>
</html>
