<% const lf = typeof layoutFile !== 'undefined' ? layoutFile : {}; %>
<% const formAction = lf.key === 'footer' ? '/admin/footer' : '/admin/menu'; %>
<% const otherLabel = lf.key === 'footer' ? 'Menu' : 'Footer'; %>
<% const otherUrl = lf.key === 'footer' ? '/admin/menu' : '/admin/footer'; %>

<form action="<%= formAction %>" method="post" id="site-layout-form">
  <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
    <div class="xl:col-span-2 space-y-5">
      <div class="card">
        <label class="form-label" for="layout-content"><%= lf.label || 'Layout' %> content (<%= lf.filename || 'layout.ejs' %>)</label>
        <p class="text-xs mt-1 mb-3" style="color:rgba(255,255,255,.4);line-height:1.65">
          Full HTML/EJS for the <%= lf.label || 'section' %> — changes apply on the live site immediately.
          <% if (lf.key === 'menu') { %>
          <strong style="color:#e8922c">Important:</strong> The menu has two separate sections — <code class="text-[11px]">DESKTOP NAV</code> and <code class="text-[11px]">MOBILE NAV</code>. Add new links in both sections.
          <% } %>
          Use the <code class="text-[11px]">path</code> variable for active link states.
        </p>
        <textarea
          name="content"
          id="layout-content"
          class="form-input"
          rows="24"
          dir="ltr"
          style="font-family:Consolas,monospace;font-size:13px;text-align:left;min-height:480px"
          spellcheck="false"
          required
        ><%= typeof content !== 'undefined' ? content : '' %></textarea>
      </div>
    </div>

    <div class="space-y-5">
      <div class="card">
        <p class="text-sm font-semibold text-white mb-3">File path</p>
        <p class="text-xs font-mono mb-2" style="color:rgba(255,255,255,.45);direction:ltr;text-align:left">
          Saves to: data/site-layout/<%= lf.filename || '' %>
        </p>
        <% if (lf.source === 'custom') { %>
        <p class="text-xs" style="color:rgba(255,255,255,.35)">Custom file is active.</p>
        <% } else { %>
        <p class="text-xs" style="color:rgba(255,255,255,.35)">Using default from Views/partials/site/ until you save.</p>
        <% } %>
      </div>

      <div class="card">
        <p class="text-sm font-semibold text-white mb-3">Help</p>
        <ul class="text-xs space-y-2" style="color:rgba(255,255,255,.45);line-height:1.65;list-style:disc;padding-left:18px">
          <li>The previous version is backed up automatically before saving.</li>
          <li>EJS syntax errors will prevent saving.</li>
          <li>Active link example: <code class="text-[11px]">path === 'home'</code></li>
        </ul>
      </div>

      <div class="card space-y-3">
        <button type="submit" class="btn-primary w-full justify-center">Save</button>
        <a href="<%= lf.previewUrl || '/' %>" target="_blank" rel="noopener noreferrer" class="btn-ghost w-full justify-center">View on site</a>
        <a href="<%= otherUrl %>" class="btn-ghost w-full justify-center">Edit <%= otherLabel %></a>
      </div>
    </div>
  </div>
</form>
