{{define "admin_main.html"}}
{{template "admin_shell_start" .}}
{{template "admin_main_panel" .}}
{{template "admin_shell_end" .}}
{{end}}

{{define "admin_main_partial.html"}}
{{template "admin_tabs_oob" .}}
{{template "admin_flash_oob" .}}
{{template "admin_main_panel" .}}
{{end}}

{{define "admin_main_panel"}}
<section class="bg-white p-6 shadow-sm">
  <h1 class="mb-6 text-2xl font-semibold">Main Content</h1>
  <form method="post" action="/admin/content" enctype="multipart/form-data" class="grid gap-5">
    <input type="hidden" name="hero_image_current" value="{{.Content.HeroImage}}">
    <input type="hidden" name="about_image_current" value="{{.Content.AboutImage}}">
    <h2 class="text-lg font-semibold">Home Hero</h2>
    <div class="grid gap-4 md:grid-cols-2">
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Hero title</span><input name="hero_title" value="{{.Content.HeroTitle}}" class="w-full border px-3 py-2"></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Hero subtitle</span><input name="hero_subtitle" value="{{.Content.HeroSubtitle}}" class="w-full border px-3 py-2"></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Positioning</span><input name="positioning" value="{{.Content.Positioning}}" class="w-full border px-3 py-2"></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Primary CTA label</span><input name="hero_cta_label" value="{{.Content.HeroCTALabel}}" class="w-full border px-3 py-2"></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Primary CTA URL</span><input name="hero_cta_url" value="{{.Content.HeroCTAURL}}" class="w-full border px-3 py-2"></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Secondary CTA label</span><input name="secondary_cta_label" value="{{.Content.SecondaryCTALabel}}" class="w-full border px-3 py-2"></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Secondary CTA URL</span><input name="secondary_cta_url" value="{{.Content.SecondaryCTAURL}}" class="w-full border px-3 py-2"></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Intro title</span><input name="intro_title" value="{{.Content.IntroTitle}}" class="w-full border px-3 py-2"></label>
    </div>
    <label class="block text-sm"><span class="mb-2 block text-neutral-500">Intro text</span><textarea name="intro_text" rows="3" class="w-full border px-3 py-2">{{.Content.IntroText}}</textarea></label>

    <h2 class="border-t border-neutral-200 pt-5 text-lg font-semibold">Service Preview</h2>
    <div class="grid gap-4 md:grid-cols-3">
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Service 1 title</span><input name="service_one_title" value="{{.Content.ServiceOneTitle}}" class="w-full border px-3 py-2"></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Service 2 title</span><input name="service_two_title" value="{{.Content.ServiceTwoTitle}}" class="w-full border px-3 py-2"></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Service 3 title</span><input name="service_three_title" value="{{.Content.ServiceThreeTitle}}" class="w-full border px-3 py-2"></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Service 1 text</span><textarea name="service_one_text" rows="4" class="w-full border px-3 py-2">{{.Content.ServiceOneText}}</textarea></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Service 2 text</span><textarea name="service_two_text" rows="4" class="w-full border px-3 py-2">{{.Content.ServiceTwoText}}</textarea></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Service 3 text</span><textarea name="service_three_text" rows="4" class="w-full border px-3 py-2">{{.Content.ServiceThreeText}}</textarea></label>
    </div>

    <h2 class="border-t border-neutral-200 pt-5 text-lg font-semibold">Process Preview</h2>
    <div class="grid gap-4 md:grid-cols-3">
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Step 1 title</span><input name="process_one_title" value="{{.Content.ProcessOneTitle}}" class="w-full border px-3 py-2"></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Step 2 title</span><input name="process_two_title" value="{{.Content.ProcessTwoTitle}}" class="w-full border px-3 py-2"></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Step 3 title</span><input name="process_three_title" value="{{.Content.ProcessThreeTitle}}" class="w-full border px-3 py-2"></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Step 1 text</span><textarea name="process_one_text" rows="4" class="w-full border px-3 py-2">{{.Content.ProcessOneText}}</textarea></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Step 2 text</span><textarea name="process_two_text" rows="4" class="w-full border px-3 py-2">{{.Content.ProcessTwoText}}</textarea></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Step 3 text</span><textarea name="process_three_text" rows="4" class="w-full border px-3 py-2">{{.Content.ProcessThreeText}}</textarea></label>
    </div>

    <h2 class="border-t border-neutral-200 pt-5 text-lg font-semibold">Studio</h2>
    <div class="grid gap-4 md:grid-cols-3">
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Studio name</span><input name="about_name" value="{{.Content.AboutName}}" class="w-full border px-3 py-2"></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Role</span><input name="about_role" value="{{.Content.AboutRole}}" class="w-full border px-3 py-2"></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Service area</span><input name="service_area" value="{{.Content.ServiceArea}}" class="w-full border px-3 py-2"></label>
    </div>
    <label class="block text-sm"><span class="mb-2 block text-neutral-500">About bio</span><textarea name="about_bio" rows="4" class="w-full border px-3 py-2">{{.Content.AboutBio}}</textarea></label>
    <div class="grid gap-4 md:grid-cols-3">
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Studio philosophy</span><textarea name="studio_philosophy" rows="5" class="w-full border px-3 py-2">{{.Content.StudioPhilosophy}}</textarea></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Studio approach</span><textarea name="studio_approach" rows="5" class="w-full border px-3 py-2">{{.Content.StudioApproach}}</textarea></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Credentials / experience</span><textarea name="studio_credentials" rows="5" class="w-full border px-3 py-2">{{.Content.StudioCredentials}}</textarea></label>
    </div>

    <h2 class="border-t border-neutral-200 pt-5 text-lg font-semibold">Images</h2>
    <div class="grid gap-4 md:grid-cols-2">
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Hero image</span><input name="hero_image" type="file" accept="image/png,image/jpeg,image/webp,image/gif" class="w-full border px-3 py-2"></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">About image</span><input name="about_image" type="file" accept="image/png,image/jpeg,image/webp,image/gif" class="w-full border px-3 py-2"></label>
    </div>
    <button class="w-fit bg-neutral-950 px-5 py-3 text-sm uppercase tracking-[0.18em] text-white">Save content</button>
  </form>
</section>
{{end}}