<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title><%= conf.label %> — Administration IGF Burundi</title>
<%- include('_styles') %>
</head>
<body>
  <div class="topbar">
    <strong>Administration IGF Burundi</strong>
    <form method="POST" action="/admin/logout"><button>Se déconnecter</button></form>
  </div>
  <div class="layout">
    <div class="sidebar">
      <% for (const [group, items] of Object.entries(groups)) { %>
        <h3><%= group %></h3>
        <% items.forEach(function(it) { %>
          <a href="/admin/<%= it.key %>" style="<%= it.key === resourceKey ? 'font-weight:700;color:#e2762a;' : '' %>"><%= it.label %></a>
        <% }); %>
      <% } %>
    </div>
    <div class="main">
      <h1><%= isNew ? 'Ajouter — ' : 'Modifier — ' %><%= conf.label %></h1>
      <% if (typeof error !== 'undefined' && error) { %><div class="error-box"><%= error %></div><% } %>

      <form class="field-form" method="POST"
            action="/admin/<%= resourceKey %><%= isNew ? '' : '/' + item.id %>"
            enctype="multipart/form-data">

        <% fields.forEach(function(f) { %>
          <% if (f.type === 'textarea') { %>
            <label><%= f.label %><%= f.required ? ' *' : '' %></label>
            <textarea name="<%= f.dbName %>" <%= f.required ? 'required' : '' %>><%= item[f.dbName] || '' %></textarea>

          <% } else if (f.type === 'boolean') { %>
            <div class="checkbox-row">
              <input type="checkbox" id="<%= f.dbName %>" name="<%= f.dbName %>" <%= item[f.dbName] ? 'checked' : '' %>>
              <label for="<%= f.dbName %>" style="margin:0;"><%= f.label %></label>
            </div>

          <% } else if (f.type === 'select') { %>
            <label><%= f.label %></label>
            <select name="<%= f.dbName %>">
              <% f.options.forEach(function(opt) { %>
                <option value="<%= opt %>" <%= item[f.dbName] === opt ? 'selected' : '' %>><%= opt %></option>
              <% }); %>
            </select>

          <% } else if (f.type === 'belongsTo') { %>
            <label><%= f.label %></label>
            <select name="<%= f.dbName %>">
              <option value="">—</option>
              <% refOptions[f.name].forEach(function(opt) { %>
                <option value="<%= opt.id %>" <%= String(item[f.dbName]) === String(opt.id) ? 'selected' : '' %>><%= opt.label %></option>
              <% }); %>
            </select>

          <% } else if (f.type === 'image') { %>
            <label><%= f.label %><%= f.required && isNew ? ' *' : '' %></label>
            <% if (item[f.dbName]) { %>
              <img class="current-image" src="<%= item[f.dbName] %>" alt="">
            <% } %>
            <input type="file" name="<%= f.dbName %>" accept="image/*,application/pdf">

          <% } else if (f.type === 'number') { %>
            <label><%= f.label %></label>
            <input type="number" name="<%= f.dbName %>" value="<%= item[f.dbName] ?? '' %>">

          <% } else if (f.type === 'datetime') { %>
            <label><%= f.label %><%= f.required ? ' *' : '' %></label>
            <input type="datetime-local" name="<%= f.dbName %>"
                   value="<%= item[f.dbName] ? new Date(item[f.dbName]).toISOString().slice(0,16) : '' %>"
                   <%= f.required ? 'required' : '' %>>

          <% } else { %>
            <label><%= f.label %><%= f.required ? ' *' : '' %></label>
            <input type="text" name="<%= f.dbName %>" value="<%= item[f.dbName] || '' %>" <%= f.required ? 'required' : '' %>>
          <% } %>
        <% }); %>

        <div style="margin-top:1.5rem;">
          <button class="btn" type="submit">Enregistrer</button>
          <a class="btn btn-outline" href="/admin/<%= resourceKey %>">Annuler</a>
        </div>
      </form>
    </div>
  </div>
</body>
</html>
