{% comment %}
Reusable SEO/GEO fields card — include in LEFT column of any CMS edit page.

Context:
  seo_obj  — the model instance (or None for new records)

Form field names (always):  target_region, meta_title, meta_description, focus_keyword
Field IDs (for JS):         seo_region, seo_meta_title, seo_meta_desc, seo_focus

Pair with cms/partials/seo_panel.html (right column) and
cms/partials/seo_score_js.html (extra_js block).
{% endcomment %}

<div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
  <div class="section-head">SEO / GEO</div>
  <table class="cms-table form-table" style="margin:0">
    <tbody>

      <tr>
        <td class="field-label">Target Region</td>
        <td class="field-td">
          <select name="target_region" id="seo_region" onchange="seoScore()" class="field-input" style="width:auto;padding:.45rem .65rem">
            <option value="global" {% if not seo_obj or not seo_obj.target_region or seo_obj.target_region == 'global' %}selected{% endif %}>🌍 Global</option>
            <option value="europe" {% if seo_obj and seo_obj.target_region == 'europe' %}selected{% endif %}>🇪🇺 Europe</option>
            <option value="uk"     {% if seo_obj and seo_obj.target_region == 'uk' %}selected{% endif %}>🇬🇧 United Kingdom</option>
            <option value="ir"     {% if seo_obj and seo_obj.target_region == 'ir' %}selected{% endif %}>🇮🇷 Iran</option>
            <option value="gcc"    {% if seo_obj and seo_obj.target_region == 'gcc' %}selected{% endif %}>🏳️ GCC</option>
          </select>
        </td>
      </tr>

      <tr>
        <td class="field-label">Meta Title <small style="font-weight:400;text-transform:none">30-60 chars</small></td>
        <td class="field-td">
          <input type="text" name="meta_title" id="seo_meta_title"
            value="{{ seo_obj.meta_title|default:'' }}"
            oninput="seoUpdateMetaTitle();seoScore();"
            class="field-input">
          <div class="char-counter" id="seoMetaTitleCounter">0 chars</div>
        </td>
      </tr>

      <tr>
        <td class="field-label top">Meta Description <small style="font-weight:400;text-transform:none">50-160</small></td>
        <td class="field-td">
          <textarea name="meta_description" id="seo_meta_desc" rows="2"
            oninput="seoUpdateMetaDesc();seoScore();"
            class="field-input" style="resize:vertical">{{ seo_obj.meta_description|default:'' }}</textarea>
          <div class="char-counter" id="seoMetaDescCounter">0 chars</div>
        </td>
      </tr>

      <tr>
        <td class="field-label">Focus Keyword</td>
        <td class="field-td">
          <input type="text" name="focus_keyword" id="seo_focus"
            value="{{ seo_obj.focus_keyword|default:'' }}"
            oninput="seoScore()"
            class="field-input">
          <div id="seoKeywordHint" style="font-size:.72rem;color:var(--cms-muted);margin-top:.2rem"></div>
        </td>
      </tr>

      {% if show_canonical %}
      <tr>
        <td class="field-label">Canonical URL</td>
        <td class="field-td">
          <input type="url" name="canonical_url" id="seo_canonical"
            value="{{ seo_obj.canonical_url|default:'' }}"
            placeholder="https://... (leave empty to auto-generate)"
            oninput="seoScore()" class="field-input">
        </td>
      </tr>
      {% endif %}

      {% if show_og_image %}
      <tr>
        <td class="field-label top">OG / Social Image</td>
        <td class="field-td">
          <input type="url" name="og_image_url" id="seo_og_image"
            value="{{ seo_obj.og_image_url|default:'' }}"
            placeholder="https://... (overrides main image for social previews)"
            oninput="seoScore()" class="field-input">
          <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.2rem">WhatsApp · LinkedIn · X · Facebook previews</div>
        </td>
      </tr>
      {% endif %}

    </tbody>
  </table>
</div>