{{include "header.html"}}
{{include "nav.html"}}
<main class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
  {{if .Content}}
  <div class="grid grid-cols-1 gap-8 lg:grid-cols-12">
    <article class="lg:col-span-8 rounded-[2rem] border border-[var(--border)] bg-white p-6 md:p-10">
      <h1 class="text-4xl font-semibold">{{.Content.Title}}</h1>
      <div class="mt-2 text-sm text-[var(--muted)]">{{index .Content.Ext "location"}} · {{index .Content.Ext "salary"}}</div>
      <div class="mt-4 grid gap-4 md:grid-cols-3">
        <div class="rounded-2xl bg-[var(--surface-soft)] p-5"><div class="text-sm text-[var(--muted)]">工作地点</div><div class="mt-1 text-lg font-medium">{{index .Content.Ext "location"}}</div></div>
        <div class="rounded-2xl bg-[var(--surface-soft)] p-5"><div class="text-sm text-[var(--muted)]">薪资范围</div><div class="mt-1 text-lg font-medium">{{index .Content.Ext "salary"}}</div></div>
        <div class="rounded-2xl bg-[var(--surface-soft)] p-5"><div class="text-sm text-[var(--muted)]">岗位要求</div><div class="mt-1 text-lg font-medium">{{index .Content.Ext "demand"}}</div></div>
      </div>
      <div class="prose mt-8 max-w-none">{{.Content.Content|Str2Html}}</div>
      {{if or .Prev .Next}}
      <div class="mt-10 flex flex-col gap-4 border-t border-[var(--border)] pt-8 md:flex-row md:justify-between">
        {{if .Prev}}<a href="{{.Prev.URL}}" class="text-[var(--primary)]">上一篇：{{.Prev.Title}}</a>{{end}}
        {{if .Next}}<a href="{{.Next.URL}}" class="text-[var(--primary)] md:text-right">下一篇：{{.Next.Title}}</a>{{end}}
      </div>
      {{end}}
    </article>
    <div class="lg:col-span-4">
      <aside class="space-y-6 lg:sticky lg:top-24">
        <div class="rounded-[2rem] border border-[var(--border)] bg-white p-6">
          <h3 class="text-lg font-semibold">相关岗位</h3>
          <div class="mt-4 space-y-4">
            {{range ColumnContents "jobs" 4}}
            <a href="{{.URL}}" class="block rounded-2xl border border-[var(--border)] bg-[var(--surface-soft)] p-4">
              <div class="text-sm font-medium">{{.Title}}</div>
              <div class="mt-1 text-xs text-[var(--muted)]">{{index .Ext "location"}} · {{index .Ext "salary"}}</div>
            </a>
            {{end}}
          </div>
        </div>
        <div class="rounded-[2rem] border border-[var(--border)] bg-white p-6">
          <h3 class="text-lg font-semibold">投递提示</h3>
          <p class="mt-3 text-sm leading-7 text-[var(--muted)]">请在留言页或联系页留下姓名、电话和应聘岗位，我们会尽快回复。</p>
        </div>
      </aside>
    </div>
  </div>
  {{end}}
</main>
{{include "footer.html"}}
{{include "js.html"}}