<!doctype html>
<html lang="en">
<head>
<%- include('../partials/head', { meta }) %>
</head>
<body data-page="careers">
<%- include('../partials/header', { heroDark: false }) %>

<main id="main-content">
  <section class="section--tight" style="padding-top: calc(var(--header-h) + var(--space-xl));">
    <div class="container" style="max-width: 860px; margin-inline:auto;">
      <nav class="breadcrumbs" aria-label="Breadcrumb">
        <a href="/">Home</a> <span>/</span> <a href="/careers">Careers</a> <span>/</span> <span><%= job.title %></span>
      </nav>

      <div data-reveal>
        <h1 style="font-size: var(--fs-h2); margin-bottom: var(--space-sm);"><%= job.title %></h1>
        <div class="job-row__meta" style="margin-bottom: var(--space-lg);">
          <span class="badge"><%= job.department %></span>
          <span class="badge"><%= job.location %></span>
          <span class="badge"><%= job.employment_type.replace('-', ' ') %></span>
          <% if (job.is_remote) { %><span class="badge badge-accent">Remote-friendly</span><% } %>
        </div>
      </div>

      <div data-reveal>
        <h2 style="font-size:1.15rem; margin-bottom: var(--space-sm);">About the Role</h2>
        <p class="lead" style="color:var(--ink-700); margin-bottom: var(--space-lg);"><%= job.description %></p>

        <% if (job.requirements) { %>
        <h2 style="font-size:1.15rem; margin-bottom: var(--space-sm);">What We're Looking For</h2>
        <p class="lead" style="color:var(--ink-700); margin-bottom: var(--space-lg);"><%= job.requirements %></p>
        <% } %>
      </div>

      <div class="card" style="margin-top: var(--space-xl);" data-reveal>
        <h2 style="font-size:1.15rem; margin-bottom: var(--space-md);">Apply for this position</h2>
        <form action="/api/careers/<%= job.slug %>/apply" method="POST" enctype="multipart/form-data" data-ajax-form>
          <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
          <div class="field-row">
            <div class="field">
              <label for="fullName">Full name</label>
              <input id="fullName" name="fullName" type="text" required />
            </div>
            <div class="field">
              <label for="email">Email</label>
              <input id="email" name="email" type="email" required />
            </div>
          </div>
          <div class="field-row">
            <div class="field">
              <label for="phone">Phone <span class="hint">(optional)</span></label>
              <input id="phone" name="phone" type="tel" />
            </div>
            <div class="field">
              <label for="linkedinUrl">LinkedIn <span class="hint">(optional)</span></label>
              <input id="linkedinUrl" name="linkedinUrl" type="url" placeholder="https://linkedin.com/in/…" />
            </div>
          </div>
          <div class="field">
            <label for="coverNote">Why this role? <span class="hint">(optional)</span></label>
            <textarea id="coverNote" name="coverNote" rows="4"></textarea>
          </div>
          <div class="field">
            <label>Resume <span class="hint">(PDF or Word, max 15MB)</span></label>
            <div class="file-drop" data-file-drop>
              <p>Drag & drop your resume, or click to browse</p>
              <p class="filename"></p>
              <input type="file" name="resume" accept=".pdf,.doc,.docx" required hidden />
            </div>
          </div>
          <button class="btn btn-primary btn-block" type="submit">Submit Application</button>
          <p class="form-status" data-form-status></p>
        </form>
      </div>
    </div>
  </section>
</main>

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