{# ── Post Settings Form ── #}
{% set gp = ghost_post or {} %}

{% macro field_label(text, field_for=None) %}
  <label {% if field_for %}for="{{ field_for }}"{% endif %}
    class="block text-[13px] font-medium text-stone-500 mb-[4px]">{{ text }}</label>
{% endmacro %}

{% macro text_input(name, value='', placeholder='', type='text', maxlength=None) %}
  <input
    type="{{ type }}"
    name="{{ name }}"
    id="settings-{{ name }}"
    value="{{ value }}"
    placeholder="{{ placeholder }}"
    {% if maxlength %}maxlength="{{ maxlength }}"{% endif %}
    class="w-full text-[14px] rounded-[6px] border border-stone-200 px-[10px] py-[7px]
           bg-white text-stone-700 placeholder:text-stone-300
           focus:outline-none focus:border-stone-400 focus:ring-1 focus:ring-stone-300"
  >
{% endmacro %}

{% macro textarea_input(name, value='', placeholder='', rows=3, maxlength=None) %}
  <textarea
    name="{{ name }}"
    id="settings-{{ name }}"
    rows="{{ rows }}"
    placeholder="{{ placeholder }}"
    {% if maxlength %}maxlength="{{ maxlength }}"{% endif %}
    class="w-full text-[14px] rounded-[6px] border border-stone-200 px-[10px] py-[7px]
           bg-white text-stone-700 placeholder:text-stone-300 resize-y
           focus:outline-none focus:border-stone-400 focus:ring-1 focus:ring-stone-300"
  >{{ value }}</textarea>
{% endmacro %}

{% macro checkbox_input(name, checked=False, label='') %}
  <label class="inline-flex items-center gap-[8px] cursor-pointer">
    <input
      type="checkbox"
      name="{{ name }}"
      id="settings-{{ name }}"
      {{ 'checked' if checked else '' }}
      class="rounded border-stone-300 text-stone-600 focus:ring-stone-300"
    >
    <span class="text-[14px] text-stone-600">{{ label }}</span>
  </label>
{% endmacro %}

{% macro section(title, open=False) %}
  <details class="border border-stone-200 rounded-[8px] overflow-hidden" {{ 'open' if open else '' }}>
    <summary class="px-[16px] py-[10px] bg-stone-50 text-[14px] font-medium text-stone-600 cursor-pointer
                     select-none hover:bg-stone-100 transition-colors">
      {{ title }}
    </summary>
    <div class="px-[16px] py-[12px] space-y-[12px]">
      {{ caller() }}
    </div>
  </details>
{% endmacro %}

<form method="post" class="max-w-[640px] mx-auto pb-[48px] px-[16px]">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
  <input type="hidden" name="updated_at" value="{{ gp.updated_at or '' }}">

  <div class="space-y-[12px] mt-[16px]">

    {# ── General ── #}
    {% call section('General', open=True) %}
      <div>
        {{ field_label('Slug', 'settings-slug') }}
        {{ text_input('slug', gp.slug or '', 'post-slug') }}
      </div>
      <div>
        {{ field_label('Published at', 'settings-published_at') }}
        <input
          type="datetime-local"
          name="published_at"
          id="settings-published_at"
          value="{{ gp.published_at[:16] if gp.published_at else '' }}"
          class="w-full text-[14px] rounded-[6px] border border-stone-200 px-[10px] py-[7px]
                 bg-white text-stone-700
                 focus:outline-none focus:border-stone-400 focus:ring-1 focus:ring-stone-300"
        >
      </div>
      <div>
        {{ checkbox_input('featured', gp.featured, 'Featured post') }}
      </div>
      <div>
        {{ field_label('Visibility', 'settings-visibility') }}
        <select
          name="visibility"
          id="settings-visibility"
          class="w-full text-[14px] rounded-[6px] border border-stone-200 px-[10px] py-[7px]
                 bg-white text-stone-700
                 focus:outline-none focus:border-stone-400 focus:ring-1 focus:ring-stone-300"
        >
          <option value="public" {{ 'selected' if (gp.visibility or 'public') == 'public' }}>Public</option>
          <option value="members" {{ 'selected' if gp.visibility == 'members' }}>Members</option>
          <option value="paid" {{ 'selected' if gp.visibility == 'paid' }}>Paid</option>
        </select>
      </div>
      <div>
        {{ checkbox_input('email_only', gp.email_only, 'Email only') }}
      </div>
    {% endcall %}

    {# ── Tags ── #}
    {% call section('Tags') %}
      <div>
        {{ field_label('Tags (comma-separated)', 'settings-tags') }}
        {% set tag_names = gp.tags|map(attribute='name')|list|join(', ') if gp.tags else '' %}
        {{ text_input('tags', tag_names, 'news, updates, featured') }}
        <p class="text-[12px] text-stone-400 mt-[4px]">Unknown tags will be created automatically.</p>
      </div>
    {% endcall %}

    {# ── Feature Image ── #}
    {% call section('Feature Image') %}
      <div>
        {{ field_label('Alt text', 'settings-feature_image_alt') }}
        {{ text_input('feature_image_alt', gp.feature_image_alt or '', 'Describe the feature image') }}
      </div>
    {% endcall %}

    {# ── SEO / Meta ── #}
    {% call section('SEO / Meta') %}
      <div>
        {{ field_label('Meta title', 'settings-meta_title') }}
        {{ text_input('meta_title', gp.meta_title or '', 'SEO title', maxlength=300) }}
        <p class="text-[12px] text-stone-400 mt-[2px]">Recommended: 70 characters. Max: 300.</p>
      </div>
      <div>
        {{ field_label('Meta description', 'settings-meta_description') }}
        {{ textarea_input('meta_description', gp.meta_description or '', 'SEO description', rows=2, maxlength=500) }}
        <p class="text-[12px] text-stone-400 mt-[2px]">Recommended: 156 characters.</p>
      </div>
      <div>
        {{ field_label('Canonical URL', 'settings-canonical_url') }}
        {{ text_input('canonical_url', gp.canonical_url or '', 'https://example.com/original-post', type='url') }}
      </div>
    {% endcall %}

    {# ── Facebook / OpenGraph ── #}
    {% call section('Facebook / OpenGraph') %}
      <div>
        {{ field_label('OG title', 'settings-og_title') }}
        {{ text_input('og_title', gp.og_title or '') }}
      </div>
      <div>
        {{ field_label('OG description', 'settings-og_description') }}
        {{ textarea_input('og_description', gp.og_description or '', rows=2) }}
      </div>
      <div>
        {{ field_label('OG image URL', 'settings-og_image') }}
        {{ text_input('og_image', gp.og_image or '', 'https://...', type='url') }}
      </div>
    {% endcall %}

    {# ── X / Twitter ── #}
    {% call section('X / Twitter') %}
      <div>
        {{ field_label('Twitter title', 'settings-twitter_title') }}
        {{ text_input('twitter_title', gp.twitter_title or '') }}
      </div>
      <div>
        {{ field_label('Twitter description', 'settings-twitter_description') }}
        {{ textarea_input('twitter_description', gp.twitter_description or '', rows=2) }}
      </div>
      <div>
        {{ field_label('Twitter image URL', 'settings-twitter_image') }}
        {{ text_input('twitter_image', gp.twitter_image or '', 'https://...', type='url') }}
      </div>
    {% endcall %}

    {# ── Advanced ── #}
    {% call section('Advanced') %}
      <div>
        {{ field_label('Custom template', 'settings-custom_template') }}
        {{ text_input('custom_template', gp.custom_template or '', 'custom-post.hbs') }}
      </div>
    {% endcall %}

  </div>

  {# ── Save footer ── #}
  <div class="flex items-center gap-[16px] mt-[24px] pt-[16px] border-t border-stone-200">
    <button
      type="submit"
      class="px-[20px] py-[6px] bg-stone-700 text-white text-[14px] rounded-[8px]
             hover:bg-stone-800 transition-colors cursor-pointer"
    >Save settings</button>

    {% if save_success %}
      <span class="text-[14px] text-green-600">Saved.</span>
    {% endif %}
  </div>
</form>
