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

<div class="container mx-auto px-4 py-6">
  <!-- Connect All Button -->
  <div class="max-w-3xl mx-auto mb-8">
    <form
      hx-post="/connect-all"
      hx-target="#printers-container"
      hx-swap="innerHTML"
    >
      <button class="w-full px-6 py-3 rounded bg-indigo-600 text-white hover:bg-indigo-500 font-bold text-lg">
        Connect All Printers
      </button>
    </form>
  </div>

  <!-- Printer Grid Container -->
  <div id="printers-container" class="w-full">
    <div class="grid gap-6 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
      {% for printer in printers.values() %}
        <div class="h-fit">
          {% include "_printer_card.html" %}
        </div>
      {% else %}
        <div class="col-span-full text-center text-slate-400">
          No printers configured. Check config.json file.
        </div>
      {% endfor %}
    </div>
    
    <!-- Debug info -->
    <div class="mt-8 text-sm text-slate-500">
      Total Printers: {{ printers|length }}
    </div>
  </div>
</div>

<style>
  /* Ensure grid items don't overlap at any screen size */
  @media (min-width: 1024px) {
    #printers-container .grid {
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }
  }
</style>
{% endblock %}