<div class="container mx-auto px-4 py-8">
  <details class="mb-3 bg-white border rounded p-3">
    <summary class="cursor-pointer fw-semibold">Bu sayfa ne işe yarar? Nasıl kullanırım?</summary>
    <div class="mt-2 small text-muted">
      <p><b>Kanal Ekle</b> sayfasında <i>Ad</i>, <i>Chat ID</i> ve <i>Bot Token</i> girerek yeni bir kanal tanımlarsınız.</p>
      <p><b>Chat ID</b>: Örn. <code>-1001234567890</code>. <b>Bot Token</b>: <code>1234567890:ABCDEF...</code></p>
      <p><b>Yetkiler</b>: Yalnızca yöneticiler kanal ekleyebilir.</p>
    </div>
  </details>
  <h1 class="text-2xl font-bold mb-4">Kanal Ekle</h1>

  <% if (errors && errors.length) { %>
    <div class="alert alert-error shadow-sm mb-4">
      <ul class="list-disc list-inside">
        <% errors.forEach(function(e){ %>
          <li><%= e.msg %></li>
        <% }) %>
      </ul>
    </div>
  <% } %>

  <form action="/channels/new?_csrf=<%= csrfToken %>" method="post" class="max-w-xl bg-white shadow rounded p-6">
    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
    <div class="mb-4">
      <label class="block text-sm font-medium mb-1">Kanal Adı</label>
      <input class="input input-bordered w-full" type="text" name="name" value="<%= (old && old.name) || '' %>" required>
    </div>
    <div class="mb-4">
      <label class="block text-sm font-medium mb-1">Chat ID</label>
      <input class="input input-bordered w-full" type="text" name="chat_id" value="<%= (old && old.chat_id) || '' %>" required>
      <div class="text-xs text-gray-500 mt-1">Örn: -1001234567890</div>
    </div>
    <div class="mb-6">
      <label class="block text-sm font-medium mb-1">Bot Token</label>
      <input class="input input-bordered w-full" type="text" name="bot_token" placeholder="1234567890:ABCDEF..." required>
    </div>
    <div class="flex gap-2 justify-end">
      <a class="btn" href="/channels">Geri</a>
      <button class="btn btn-primary" type="submit">Kaydet</button>
    </div>
  </form>
</div>
