{% extends "base.html" %}
{% block connect %}

<!-- Run action button -->
 <div id="connect-Button">
  {% if connected %}
    <form
      hx-post="/disconnect"
      hx-target="#connect-Button"
      hx-swap="outerHTML"
    >
      <button class="px-4 py-2 rounded bg-green-600 text-white hover:bg-red-600">
        Printer is connected. (Press to disconnect)
      </button>
    </form>

    <!-- Live status panel, will load once when revealed and then the returned fragment polls itself -->
    <div id="live-status" hx-post="/status" hx-trigger="load" hx-swap="outerHTML" class="mt-4"></div>
  {% else %}
    <form
      hx-post="/connect"
      hx-target="#connect-Button"
      hx-swap="outerHTML"
    >
      <button class="px-4 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-500">
        Connect to Printer
      </button>
    </form>
  {% endif %}
</div>


{% endblock %}

{% block status %}
<!--
<form
  hx-post="/status"
  hx-target="#status-result"
  hx-swap="innerHTML"
>
  <button class="px-4 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-500">
    Get Printer Status
  </button>
</form>
<div id="status-result" class="mt-4"></div>
-->




{% endblock %}