<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Panel admina — kolejka</title>
  <style>
    body{font-family:Helvetica,Arial;margin:20px}
    .grid{display:flex;gap:16px;align-items:flex-start}
    .col{flex:1;padding:10px;border:1px solid #eee;border-radius:6px;background:#fafafa}
    h2{margin-top:0}
    .inline-form{display:inline-block;margin:3px}
    .btn{padding:6px 10px;border-radius:4px;border:1px solid #888;background:#f0f0f0;cursor:pointer}
    .num-label{font-size:18px;margin-right:8px;display:inline-block;width:40px;text-align:center}

.controls {
  display:flex;
  gap:16px;
  align-items:flex-start;
}
/* kolumna z akcjami po lewej */
.left {
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  max-width:300px;
  margin-bottom: 10px;
}
/* kontener dla przycisku reset wypychany na dół */
.reset-wrap {
  display:flex;
  flex-direction:column;
  justify-content:flex-end; /* wypycha zawartość na dół kolumny */
  align-items:flex-start;
  min-height:50px; /* wysokość bloku; dostosuj */ 
}


    /* Responsive: na wąskich ekranach kolumny jedna pod drugą */
    @media (max-width:700px){
      .controls { flex-direction:column; }
      .controls .reset-wrap { min-height:120px; }
      .grid{flex-direction:column}
      .num-label{width:60px}
      .col{width:100%; box-sizing:border-box}
      body{font-size:16px}
    }
  </style>
</head>
<body>
  <h2>Panel admina</h2>

    <div class="left">
      <form method="post" style="display:inline">
        <button class="btn" name="action" value="add" style="background:#4caf50;color:#fff;border:none;padding:8px 12px;border-radius:6px">
          Dodaj numer
        </button>
      </form>
      <!-- inne przyciski/opcje admina można tu dodać -->
    </div>


  <div class="grid">
    <div class="col">
      <h3>Oczekujące</h3>
      {% for n in waiting %}
        <form class="inline-form" method="post">
          <input type="hidden" name="num" value="{{n}}">
          <button class="btn" name="action" value="call">{{n}}</button>
        </form>
      {% else %}
        <p>brak</p>
      {% endfor %}
    </div>

    <div class="col">
      <h3>Wywołane (obecne)</h3>
      {% for n in called %}
        <div style="margin-bottom:8px;display:flex;align-items:center;flex-wrap:wrap">
          <span class="num-label">{{n}}</span>

          <form style="display:inline-block;margin-right:6px" method="post">
            <input type="hidden" name="num" value="{{n}}">
            <button class="btn" name="action" value="done">Przyszedł / Usuń</button>
          </form>

          <form style="display:inline-block" method="post">
            <input type="hidden" name="num" value="{{n}}">
            <button class="btn" name="action" value="return">Wróć do kolejki</button>
          </form>
        </div>
      {% else %}
        <p>brak</p>
      {% endfor %}
    </div>

    <div class="col">
      <h3>Obsłużone</h3>
      {% for n in done %}
        <div>{{n}}</div>
      {% else %}
        <p>brak</p>
      {% endfor %}
    </div>
  </div>

    <div class="reset-wrap">
      <form method="post">
        <button class="btn" name="action" value="reset" style="background:#e53935;color:#fff;border:none;padding:8px 12px;border-radius:6px">
          Reset — usuń wszystkie
        </button>
      </form>
    </div>


</body>
</html>
