{% extends "cms/base.html" %}
{% block title %}{% if obj %}Edit{% else %}Add{% endif %} Social Link{% endblock %}
{% block page_title %}Social Link{% endblock %}

{% block extra_head %}
<style>
  .section-head {
    padding:.75rem 1rem;border-bottom:1px solid var(--cms-border);
    font-size:.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;color:var(--cms-muted);
  }
  .field-label {
    width:160px;color:var(--cms-muted);font-size:.8rem;font-weight:600;
    white-space:nowrap;vertical-align:middle;padding:.6rem 1rem;
  }
  .field-td { padding:.5rem 1rem .5rem 0; }
  .field-input {
    width:100%;border:1px solid var(--cms-border);border-radius:6px;
    padding:.45rem .75rem;font-size:.875rem;color:var(--cms-text);
    background:#fff;outline:none;
  }
  .field-input:focus { border-color:#033152; }
  .toggle-row {
    display:flex;align-items:center;gap:.6rem;
    padding:.55rem 1rem;border-bottom:1px solid var(--cms-border);
  }
  .toggle-row:last-child { border-bottom:none; }
  .toggle-row label { font-size:.88rem;color:var(--cms-text);font-weight:500;margin:0;cursor:pointer; }
  .toggle-row input[type=checkbox] { width:auto;accent-color:#033152;flex-shrink:0; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <div>
    <h2>{% if obj %}{{ obj.get_platform_display }}{% else %}New Social Link{% endif %}</h2>
  </div>
  <a href="{% url 'cms_social_links' %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
</div>

<form method="post">
{% csrf_token %}
<div class="row g-3">

  <div class="col-lg-8">

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Details</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Platform</td>
            <td class="field-td">
              <select name="platform" id="platform-select" class="field-input" style="width:auto;min-width:200px" required>
                <option value="">Select platform…</option>
                {% for val, label in platform_choices %}
                <option value="{{ val }}" {% if obj and obj.platform == val %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
              </select>
            </td>
          </tr>
          <tr>
            <td class="field-label">URL</td>
            <td class="field-td">
              <input type="url" name="url" id="social-url" value="{{ obj.url|default:'' }}"
                     placeholder="https://instagram.com/username"
                     class="field-input" required>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

  <div class="col-lg-4">

    <div class="cms-card" style="padding:1rem;margin-bottom:1rem">
      <button type="submit" class="btn-cms w-100"><i class="fa-solid fa-floppy-disk me-1"></i>Save</button>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Visibility</div>
      <div class="toggle-row">
        <input type="checkbox" name="is_active" id="chk_active" {% if not obj or obj.is_active %}checked{% endif %}>
        <label for="chk_active">Show on website</label>
      </div>
    </div>

    <div style="text-align:center;padding:.25rem 0">
      <a href="{% url 'cms_social_links' %}" style="font-size:.85rem;color:var(--cms-muted);text-decoration:none">Cancel</a>
    </div>

  </div>
</div>
</form>
{% endblock %}

{% block extra_js %}
<script>
var PLATFORM_EXAMPLES = {
  instagram: 'https://instagram.com/username',
  facebook:  'https://facebook.com/pagename',
  twitter:   'https://x.com/username',
  linkedin:  'https://linkedin.com/company/username',
  youtube:   'https://youtube.com/@channelname',
  tiktok:    'https://www.tiktok.com/@username',
  pinterest: 'https://pinterest.com/username',
  snapchat:  'https://snapchat.com/add/username',
  whatsapp:  'https://wa.me/447000000000',
  telegram:  'https://t.me/username',
};
var urlInput    = document.getElementById('social-url');
var platformSel = document.getElementById('platform-select');
function updateHint() {
  urlInput.placeholder = PLATFORM_EXAMPLES[platformSel.value] || '{{ site_url }}/your_profile';
}
platformSel.addEventListener('change', updateHint);
updateHint();
</script>
{% endblock %}