<div class="row">
  <div class="col-md-8">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Konfigurasi cPanel</h3>
      </div>
      <form action="/settings" method="POST">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <div class="card-body">
          <div class="form-group">
            <label>cPanel URL</label>
            <input type="text" name="url" class="form-control" value="<%= settings.url %>" placeholder="https://server.hostname:2083" required>
          </div>
          <div class="form-group">
            <label>Username</label>
            <input type="text" name="username" class="form-control" value="<%= settings.username %>" required>
          </div>
          <div class="form-group">
            <label>API Token</label>
            <input type="password" name="apiToken" class="form-control" placeholder="<%= settings.apiTokenMasked || 'Belum diatur' %>" autocomplete="new-password">
            <small class="form-text text-muted">Kosongkan jika tidak ingin mengubah token yang tersimpan.</small>
          </div>
          <div class="form-group">
            <label>Default Domain</label>
            <input type="text" name="domain" class="form-control" value="<%= settings.domain %>" required>
          </div>
          <div class="form-group">
            <label>Default Quota (MB)</label>
            <input type="number" name="defaultQuota" class="form-control" min="0" value="<%= settings.defaultQuota %>" required>
            <small class="form-text text-muted">Nilai yang otomatis terisi di form Create Email. 0 = unlimited.</small>
          </div>
          <div class="form-group">
            <label>Quota Maksimum (MB)</label>
            <input type="number" name="maxQuota" class="form-control" min="0" value="<%= settings.maxQuota %>">
            <small class="form-text text-muted">
              Batas kebijakan aplikasi ini (bukan batas dari cPanel) — Create Email dan Change Quota
              akan ditolak jika melebihi angka ini. <strong>0 = tanpa batas</strong> (quota unlimited/0
              tetap diperbolehkan seperti biasa). Jika diisi angka &gt; 0, opsi "unlimited" (0) tidak
              lagi diperbolehkan saat membuat/mengubah quota email.
            </small>
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="mockCheck" name="mock" <%= settings.mock ? 'checked' : '' %>>
            <label class="form-check-label" for="mockCheck">Mock Mode (gunakan data simulasi, tanpa memanggil server cPanel sungguhan)</label>
          </div>
        </div>
        <div class="card-footer">
          <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-1"></i> Simpan Pengaturan</button>
        </div>
      </form>
    </div>
  </div>

  <div class="col-md-4">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Hak Akses Role</h3>
      </div>
      <form action="/settings/permissions" method="POST">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <div class="card-body">
          <p class="text-muted small">
            Menentukan menu mana yang bisa diakses tiap role. <strong>Super Admin selalu
            memiliki akses penuh</strong> (tidak bisa diubah), dan menu <strong>Settings</strong>
            (kredensial cPanel) selalu khusus Super Admin — tidak termasuk di sini.
          </p>
          <table class="table table-sm table-borderless mb-0">
            <thead>
              <tr>
                <th>Menu</th>
                <th class="text-center">Admin</th>
                <th class="text-center">Operator</th>
              </tr>
            </thead>
            <tbody>
              <% menuItems.forEach(function(item) { %>
              <tr>
                <td><%= item.label %></td>
                <td class="text-center">
                  <input type="checkbox" name="perm[admin][<%= item.key %>]" <%= permissions.admin[item.key] ? 'checked' : '' %>>
                </td>
                <td class="text-center">
                  <input type="checkbox" name="perm[operator][<%= item.key %>]" <%= permissions.operator[item.key] ? 'checked' : '' %>>
                </td>
              </tr>
              <% }); %>
            </tbody>
          </table>
        </div>
        <div class="card-footer">
          <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-1"></i> Simpan Hak Akses</button>
        </div>
      </form>
    </div>
  </div>
</div>
