<%- include('../partials/header', { title }) %>

<div class="admin-page-head">
  <h2><%= job ? 'Edit Job' : 'Add Job' %></h2>
  <a href="/admin/jobs" class="btn btn-outline btn-sm">← Back to Careers</a>
</div>

<form action="<%= job ? `/admin/jobs/${job.id}` : '/admin/jobs' %>" method="POST">
  <input type="hidden" name="_csrf" value="<%= csrfToken %>" />

  <div class="admin-form-grid">
    <div class="admin-panel">
      <h3>Posting</h3>
      <div class="field-row">
        <div class="field">
          <label for="title">Job title</label>
          <input id="title" name="title" type="text" required value="<%= job?.title || '' %>" data-slug-source="slug" />
        </div>
        <div class="field">
          <label for="slug">URL slug</label>
          <input id="slug" name="slug" type="text" value="<%= job?.slug || '' %>" />
        </div>
      </div>
      <div class="field-row">
        <div class="field">
          <label for="department">Department</label>
          <input id="department" name="department" type="text" required value="<%= job?.department || '' %>" />
        </div>
        <div class="field">
          <label for="location">Location</label>
          <input id="location" name="location" type="text" required value="<%= job?.location || '' %>" />
        </div>
      </div>
      <div class="field">
        <label for="description">Description <span class="hint">(blank lines become paragraph breaks)</span></label>
        <textarea id="description" name="description" rows="5" required><%= job?.description || '' %></textarea>
      </div>
      <div class="field">
        <label for="requirements">Requirements <span class="hint">(optional — blank lines become paragraph breaks)</span></label>
        <textarea id="requirements" name="requirements" rows="4"><%= job?.requirements || '' %></textarea>
      </div>
    </div>

    <div>
      <div class="admin-panel">
        <h3>Publishing</h3>
        <div class="field">
          <label for="employmentType">Employment type</label>
          <select id="employmentType" name="employmentType">
            <% ['full-time','part-time','contract','internship'].forEach(function(t) { %>
              <option value="<%= t %>" <%= (job?.employment_type || 'full-time') === t ? 'selected' : '' %>><%= t %></option>
            <% }); %>
          </select>
        </div>
        <div class="field">
          <label for="status">Status</label>
          <select id="status" name="status">
            <option value="open" <%= (job?.status || 'open') === 'open' ? 'selected' : '' %>>Open</option>
            <option value="closed" <%= job?.status === 'closed' ? 'selected' : '' %>>Closed</option>
          </select>
        </div>
        <div class="field">
          <label for="postedAt">Posted date</label>
          <input id="postedAt" name="postedAt" type="date" value="<%= job?.posted_at ? job.posted_at.slice(0,10) : '' %>" />
        </div>
        <div class="checkbox-field">
          <input id="isRemote" name="isRemote" type="checkbox" value="1" <%= job?.is_remote ? 'checked' : '' %> />
          <label for="isRemote">Remote-friendly</label>
        </div>
      </div>
    </div>
  </div>

  <div class="form-sticky-actions">
    <button class="btn btn-primary" type="submit">Save Job</button>
    <a href="/admin/jobs" class="btn btn-outline">Cancel</a>
  </div>
</form>

<%- include('../partials/footer') %>
