Welcome.jinja

{#def title = "Untitled", message #}

<Layout title=title>
  <h1 class="text-4xl">
    {{ message }}
  </h1>

  <div x-data="{ count: 0 }" class="mt-4 mb-4">
    
    <button x-on:click="count++"
            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
      Alpine.js example
    </button>

    <kbd x-text="count"
         class="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500" />

  </div>

  <button hx-post="/test1" hx-target="#test1" type="button"
          class="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">
    HTMX example
  </button>

  <div id="test1" class="mt-2 mb-2"></div>

  <button hx-post="/test2" hx-target="#test2" type="button"
          class="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">
    HTMX example 2
  </button>

  <div id="test2" class="mt-2 mb-2"></div>
</Layout>