<div class="layout">

  <!-- ✅ Admin Sidebar -->
  <%- include("partials/admin-sidebar", { user, active: "serialnumber", lang }) %>

  <div class="main">

    <!-- ✅ Header -->
    <%- include("partials/page-header", {
      user,
      title: "Seriennummer",
      subtitle: "Lizenz aktivieren",
      showUserName: true
    }) %>

    <div class="content" style="max-width:650px; margin:30px auto;">

      <h2>🔑 <%= t.seriennumber.seriennumbertitle %></h2>

      <p style="color:#777;">
        <%= t.seriennumber.seriennumbertext %>
      </p>

      <% if (error) { %>
        <div class="alert alert-danger"><%= error %></div>
      <% } %>

      <% if (success) { %>
        <div class="alert alert-success"><%= success %></div>
      <% } %>

      <form method="POST" action="/admin/serial-number" style="max-width: 500px;">
        <div class="form-group">
          <label><%= t.seriennumber.seriennumbershort %></label>
          <input
            type="text"
            name="serial_number"
            value="<%= currentSerial || '' %>"
            class="form-control"
            placeholder="ABCDE-12345-ABCDE-12345"
            maxlength="23"
            required
          />
          <small style="color:#777; display:block; margin-top:6px;">
            <%= t.seriennumber.seriennumberdeclaration %>
          </small>
        </div>

        <button class="btn btn-primary" style="margin-top: 15px;">
          <%= t.seriennumber.saveseriennumber %>
        </button>
      </form>

    </div>
  </div>
</div>
