{% extends "cms/base.html" %}
{% load tenant_tags %}
{% block title %}Site Settings{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
<style>
  .req { color:#ff404b;margin-left:3px;font-weight:700; }
  .img-upload-zone { display:flex;align-items:center;gap:.75rem; }
  /* Dark backdrop, because most logos are white and vanished against the
     old near white panel. The chequerboard shows through where the image is
     transparent, so you can still see what has a background baked in. */
  .img-preview-box {
    width:104px;height:104px;border-radius:8px;border:1px solid var(--cms-border);
    background:#0d2137;
    background-image:
      linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(255,255,255,.05) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(255,255,255,.05) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.05) 75%);
    background-size:14px 14px;
    background-position:0 0, 0 7px, 7px -7px, -7px 0;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;
  }
  .img-preview-box img { max-width:94px;max-height:94px;object-fit:contain; }
  .img-preview-box .no-img { color:rgba(255,255,255,.35);font-size:1.6rem; }
  .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);
    display:flex;align-items:center;justify-content:space-between;
  }
  .field-label {
    width:160px;color:var(--cms-muted);font-size:.8rem;font-weight:600;
    white-space:nowrap;vertical-align:middle;padding:.6rem 1rem;
  }
  .field-label.top { vertical-align:top;padding-top:.85rem; }
  .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; }
  .field-input[disabled] { background:#f9fafb;color:var(--cms-muted); }
  .secret-row { display:flex;align-items:center;gap:.5rem; }
  .secret-row .field-input { flex:1; }
  .reveal-btn {
    border:1px solid var(--cms-border);border-radius:6px;padding:.45rem .65rem;
    background:#f9fafb;cursor:pointer;color:var(--cms-muted);flex-shrink:0;
  }
  .upload-btn-wrap { position:relative;overflow:hidden;display:inline-block; }
  .upload-btn-wrap input[type=file] { position:absolute;left:0;top:0;opacity:0;width:100%;height:100%;cursor:pointer; }
  .upload-btn-wrap .btn-cms-ghost { pointer-events:none; }
  .img-thumb { height:36px;border-radius:5px;display:block;margin-bottom:.4rem;object-fit:contain; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2>Site Settings</h2>
</div>

<form method="post" enctype="multipart/form-data">
{% 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"><span><i class="fa-solid fa-address-book me-2"></i>Contact</span></div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Phone <span class="req">*</span></td>
            <td class="field-td"><input type="text" name="phone" value="{{ obj.phone }}" class="field-input" required></td>
          </tr>
          <tr>
            <td class="field-label">Working Hours <span class="req">*</span></td>
            <td class="field-td"><input type="text" name="working_hours" value="{{ obj.working_hours }}" class="field-input" required></td>
          </tr>
          <tr>
            <td class="field-label">Address <span class="req">*</span></td>
            <td class="field-td"><input type="text" name="address" value="{{ obj.address }}" class="field-input" required></td>
          </tr>
          <tr>
            <td class="field-label">Google Maps URL <span class="req">*</span></td>
            <td class="field-td"><input type="url" name="google_maps_url" value="{{ obj.google_maps_url }}" class="field-input" required></td>
          </tr>
          <tr>
            <td class="field-label">Map embed URL</td>
            <td class="field-td">
              <input type="url" name="google_maps_embed" value="{{ obj.google_maps_embed }}" class="field-input"
                     placeholder="https://www.google.com/maps/embed?pb=...">
              <div style="font-size:.75rem;color:var(--cms-muted);margin-top:.3rem">
                In Google Maps: Share, then Embed a map, then copy the address inside src="...".
                Leave blank and the map is hidden rather than showing someone else's office.
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head"><span><i class="fa-solid fa-magnifying-glass-chart me-2"></i>SEO &amp; Analytics</span></div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Google Analytics ID</td>
            <td class="field-td"><input type="text" name="google_analytics_id" value="{{ obj.google_analytics_id }}" placeholder="G-XXXXXXXXXX" class="field-input"></td>
          </tr>
          <tr>
            <td class="field-label">Tag Manager ID</td>
            <td class="field-td">
              <input type="text" name="google_tag_manager_id" value="{{ obj.google_tag_manager_id }}" placeholder="GTM-XXXXXXX" class="field-input">
              <div style="color:var(--cms-muted);font-size:.72rem;margin-top:.35rem">
                Optional. Fill this in and the page loads the container instead of the tag above, so add GA4 as a tag inside GTM or nothing is measured.
              </div>
            </td>
          </tr>
          <tr>
            <td class="field-label top">Service Account</td>
            <td class="field-td">
              <textarea name="ga_credentials_json" rows="3" autocomplete="off" class="field-input" style="resize:vertical;font-family:monospace;font-size:.75rem" placeholder='Paste the whole ga_credentials.json here'>{% if obj.ga_credentials_json %}••••••••{% endif %}</textarea>
              <div style="color:var(--cms-muted);font-size:.72rem;margin-top:.35rem">
                Needed for the dashboard charts. Stored encrypted. Leave the dots alone to keep the saved key.
              </div>
            </td>
          </tr>
          <tr>
            <td class="field-label top">Meta Description</td>
            <td class="field-td"><textarea name="meta_description" rows="2" class="field-input" style="resize:vertical">{{ obj.meta_description }}</textarea></td>
          </tr>
          <tr>
            <td class="field-label top">Meta Keywords</td>
            <td class="field-td"><textarea name="meta_keywords" rows="2" class="field-input" style="resize:vertical">{{ obj.meta_keywords }}</textarea></td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head"><span><i class="fa-solid fa-shield-halved me-2"></i>reCAPTCHA</span></div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">reCAPTCHA v2 Site Key</td>
            <td class="field-td"><input type="text" name="recaptcha_v2_site_key" value="{{ obj.recaptcha_v2_site_key }}" placeholder="6Lc..." class="field-input" style="font-family:monospace"></td>
          </tr>
          <tr>
            <td class="field-label">reCAPTCHA v2 Secret</td>
            <td class="field-td">
              <div class="secret-row">
                <input type="password" name="recaptcha_v2_secret_key" value="{% if obj.recaptcha_v2_secret_key %}••••••••{% endif %}" placeholder="6Lc..." autocomplete="new-password" class="field-input" style="font-family:monospace">
              </div>
            </td>
          </tr>
          <tr>
            <td class="field-label">reCAPTCHA v3 Site Key</td>
            <td class="field-td"><input type="text" name="recaptcha_site_key" value="{{ obj.recaptcha_site_key }}" class="field-input" style="font-family:monospace"></td>
          </tr>
          <tr>
            <td class="field-label">reCAPTCHA v3 Secret</td>
            <td class="field-td">
              <div class="secret-row">
                <input type="password" id="recaptchaSecretInput" name="recaptcha_secret_key" value="{% if obj.recaptcha_secret_key %}••••••••{% endif %}" placeholder="6Lc..." autocomplete="new-password" class="field-input" style="font-family:monospace">
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    {% if 'ecommerce'|module_enabled:tenant %}
    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">
        <span><i class="fa-brands fa-stripe me-2"></i>Stripe Payments</span>
        <a href="https://dashboard.stripe.com/" target="_blank" rel="noopener" style="color:var(--cms-muted);font-size:.78rem;text-decoration:none">
          Console <i class="fa-solid fa-arrow-up-right-from-square" style="font-size:.65rem"></i>
        </a>
      </div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Publishable Key</td>
            <td class="field-td"><input type="text" name="stripe_public_key" value="{{ obj.stripe_public_key }}" placeholder="pk_live_... or pk_test_..." class="field-input" style="font-family:monospace"></td>
          </tr>
          <tr>
            <td class="field-label">Secret Key</td>
            <td class="field-td">
              <div class="secret-row">
                <input type="password" id="stripeSecretInput" name="stripe_secret_key" value="{% if obj.stripe_secret_key %}••••••••{% endif %}" placeholder="sk_live_..." autocomplete="new-password" class="field-input" style="font-family:monospace">
              </div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Webhook Secret</td>
            <td class="field-td">
              <input type="password" name="stripe_webhook_secret" value="{% if obj.stripe_webhook_secret %}••••••••{% endif %}" placeholder="whsec_..." autocomplete="new-password" class="field-input" style="font-family:monospace">
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    {% endif %}

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head"><span><i class="fa-solid fa-id-card me-2"></i>FAB Club Sign In</span></div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Client ID</td>
            <td class="field-td"><input type="text" name="fab_oauth_client_id" value="{{ obj.fab_oauth_client_id }}" class="field-input" style="font-family:monospace"></td>
          </tr>
          <tr>
            <td class="field-label">Client Secret</td>
            <td class="field-td">
              <div class="secret-row">
                <input type="password" name="fab_oauth_client_secret" value="{% if obj.fab_oauth_client_secret %}••••••••{% endif %}" autocomplete="new-password" class="field-input" style="font-family:monospace">
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head"><span><i class="fa-solid fa-envelope me-2"></i>Outgoing Email (SMTP)</span></div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">SMTP Host</td>
            <td class="field-td"><input type="text" name="smtp_host" value="{{ obj.smtp_host }}" placeholder="mail.example.com" class="field-input" style="font-family:monospace"></td>
          </tr>
          <tr>
            <td class="field-label">Port</td>
            <td class="field-td">
              <div style="display:flex;align-items:center;gap:1rem">
                <input type="number" name="smtp_port" value="{{ obj.smtp_port }}" class="field-input" style="width:90px">
                <label style="font-size:.82rem;color:var(--cms-muted);display:flex;align-items:center;gap:5px;cursor:pointer">
                  <input type="checkbox" name="smtp_use_ssl" {% if obj.smtp_use_ssl %}checked{% endif %} style="accent-color:#033152"> SSL
                </label>
                <label style="font-size:.82rem;color:var(--cms-muted);display:flex;align-items:center;gap:5px;cursor:pointer">
                  <input type="checkbox" name="smtp_use_tls" {% if obj.smtp_use_tls %}checked{% endif %} style="accent-color:#033152"> TLS
                </label>
              </div>
            </td>
          </tr>
          <tr>
            <td class="field-label">No-Reply</td>
            <td class="field-td"><input type="text" name="smtp_user" value="{{ obj.smtp_user }}" placeholder="noreply@example.com" class="field-input" style="font-family:monospace"></td>
          </tr>
          <tr>
            <td class="field-label">Password</td>
            <td class="field-td">
              <div class="secret-row">
                <input type="password" id="smtpPassInput" name="smtp_password" value="{% if obj.smtp_password %}••••••••{% endif %}" placeholder="SMTP password" autocomplete="new-password" class="field-input" style="font-family:monospace">
                              </div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Support Email</td>
            <td class="field-td"><input type="text" name="support_email" value="{{ obj.support_email }}" placeholder="support@example.com" class="field-input" style="font-family:monospace"></td>
          </tr>
          <tr>
            <td class="field-label">Password</td>
            <td class="field-td">
              <div class="secret-row">
                <input type="password" name="support_password" value="{% if obj.support_password %}••••••••{% endif %}" placeholder="Support mailbox password" autocomplete="new-password" class="field-input" style="font-family:monospace">
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>    
    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">
        <span><i class="fa-solid fa-comment-sms me-2"></i>SMS — Twilio</span>
        <div style="display:flex;align-items:center;gap:.75rem">
          {% if twilio_balance is not None %}
          <span style="font-size:.78rem;color:#16a34a;font-weight:600">
            <i class="fa-solid fa-circle-dollar-to-slot me-1"></i>{{ twilio_currency }} {{ twilio_balance }}
          </span>
          {% endif %}
          <a href="https://console.twilio.com/" target="_blank" rel="noopener" style="color:var(--cms-muted);font-size:.78rem;text-decoration:none">
            Console <i class="fa-solid fa-arrow-up-right-from-square" style="font-size:.65rem"></i>
          </a>
        </div>
      </div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Account SID</td>
            <td class="field-td"><input type="text" name="twilio_account_sid" value="{{ obj.twilio_account_sid }}" placeholder="ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" class="field-input" style="font-family:monospace"></td>
          </tr>
          <tr>
            <td class="field-label">Auth Token</td>
            <td class="field-td">
              <div class="secret-row">
                <input type="password" id="twilioTokenInput" name="twilio_auth_token" value="{% if obj.twilio_auth_token %}••••••••{% endif %}" placeholder="Twilio auth token" autocomplete="new-password" class="field-input" style="font-family:monospace">
                              </div>
            </td>
          </tr>
          <tr>
            <td class="field-label">From Number</td>
            <td class="field-td">
              <input type="text" name="twilio_sms_from" value="{{ obj.twilio_sms_from }}" placeholder="+447700900000" class="field-input" style="font-family:monospace;max-width:220px">
              <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.25rem">Your Twilio SMS number in E.164 format</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">
        <span><i class="fa-brands fa-whatsapp me-2"></i>WhatsApp — Twilio</span>
        <a href="https://console.twilio.com/" target="_blank" rel="noopener" style="color:var(--cms-muted);font-size:.78rem;text-decoration:none">
          Console <i class="fa-solid fa-arrow-up-right-from-square" style="font-size:.65rem"></i>
        </a>
      </div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Account SID</td>
            <td class="field-td"><input type="text" value="{{ obj.twilio_account_sid }}" disabled class="field-input" style="font-family:monospace;color:var(--cms-muted)">
              <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.25rem">Shared with SMS above</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">From Number</td>
            <td class="field-td">
              <input type="text" name="twilio_from_number" value="{{ obj.twilio_from_number }}" placeholder="+14155238886" class="field-input" style="font-family:monospace;max-width:220px">
              <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.25rem">Your Twilio WhatsApp number in E.164 format</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">
        <span><i class="fa-solid fa-robot me-2"></i>OpenAI — AI Chat Widget</span>
        <div style="display:flex;align-items:center;gap:.75rem">
          {% if openai_balance is not None %}
          <span style="font-size:.78rem;font-weight:600;color:{% if openai_balance <= 5 %}#dc2626{% else %}#16a34a{% endif %}" title="Top-up minus USD {{ openai_spend }} spent since then, measured from {{ openai_source }}. OpenAI publishes no balance endpoint.">
            <i class="fa-solid fa-circle-dollar-to-slot me-1"></i>USD {{ openai_balance }} left
          </span>
          {% endif %}
          <a href="https://platform.openai.com/settings/organization/billing/overview" target="_blank" rel="noopener" style="color:var(--cms-muted);font-size:.78rem;text-decoration:none">
            Billing <i class="fa-solid fa-arrow-up-right-from-square" style="font-size:.65rem"></i>
          </a>
        </div>
      </div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">API Key</td>
            <td class="field-td">
              <div class="secret-row">
                <input type="password" id="openaiKeyInput" name="openai_api_key" value="{% if obj.openai_api_key %}••••••••{% endif %}" placeholder="sk-..." autocomplete="new-password" class="field-input" style="font-family:monospace">
                              </div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Admin Key</td>
            <td class="field-td">
              <input type="password" name="openai_admin_key" value="{% if obj.openai_admin_key %}••••••••{% endif %}" placeholder="sk-admin-..." autocomplete="new-password" class="field-input" style="font-family:monospace">
              <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.25rem">Optional. Read only key used to fetch real spend from OpenAI. Without it, spend is estimated from chat tokens logged here.</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Credit Added</td>
            <td class="field-td">
              <div style="display:flex;gap:.5rem;flex-wrap:wrap">
                <input type="number" step="0.01" min="0" name="openai_credit" value="{{ obj.openai_credit }}" placeholder="20.00" class="field-input" style="max-width:130px;font-family:monospace">
                <input type="date" name="openai_credit_date" value="{{ obj.openai_credit_date|date:'Y-m-d' }}" class="field-input" style="max-width:170px">
              </div>
              <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.25rem">Enter what you topped up and the date. The balance above is this figure minus spend since that date.</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

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

    <div class="d-flex gap-2 mb-3">
      <button type="submit" class="btn-cms w-100"><i class="fa-solid fa-floppy-disk me-1"></i>Save Settings</button>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Brand</div>
      <div style="padding:.65rem 1rem;border-bottom:1px solid var(--cms-border)">
        <div style="font-size:.78rem;color:var(--cms-muted);font-weight:600;margin-bottom:.35rem">Site Name</div>
        <input type="text" name="site_name" value="{{ obj.site_name }}" class="field-input">
      </div>
      <div style="padding:.65rem 1rem;border-bottom:1px solid var(--cms-border)">
        <div style="font-size:.78rem;color:var(--cms-muted);font-weight:600;margin-bottom:.35rem">Page Title Suffix</div>
        <input type="text" name="site_title_suffix" value="{{ obj.site_title_suffix }}" placeholder="Web Design &amp; Digital Marketing" class="field-input">
        <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.3rem">Shown as: <em>{{ company }} — [this text]</em></div>
      </div>
      <div style="padding:.65rem 1rem;border-bottom:1px solid var(--cms-border)">
        <div style="font-size:.78rem;color:var(--cms-muted);font-weight:600;margin-bottom:.4rem">Logo</div>
        <input type="hidden" name="logo_b64" id="logo_b64">
        <div class="img-upload-zone">
          <div class="img-preview-box" id="logo-preview-box">
            {% if obj.logo %}
            <img src="{{ obj.logo.url }}" alt="">
            {% else %}
            <i class="fa-regular fa-image no-img"></i>
            {% endif %}
          </div>
          <div>
            <div style="font-size:.72rem;color:var(--cms-muted);margin-bottom:.4rem">PNG or SVG with a transparent background. Minimum width 240px.</div>
            <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap">
              <div class="upload-btn-wrap">
                <button type="button" class="btn-cms-ghost" style="padding:.4rem .9rem;font-size:.8rem">
                  <i class="fa-solid fa-arrow-up-from-bracket me-1"></i>{% if obj.logo %}Change{% else %}Upload{% endif %}
                </button>
                <input type="file" name="logo" id="f_logo" accept="image/*,image/svg+xml" data-img-field="logo" data-img-size="0">
              </div>
              {% if obj.logo %}
              <button type="submit" name="clear_logo" value="1" class="btn-cms-danger" style="padding:.4rem .9rem;font-size:.8rem" onclick="return confirm('Remove this logo?')">
                <i class="fa-solid fa-trash me-1"></i>Remove
              </button>
              {% endif %}
            </div>
            <div class="img-warn" id="logo-warn" style="display:none;margin-top:.4rem;padding:.4rem .7rem;background:#fef2f2;border:1px solid #fca5a5;border-radius:6px;font-size:.8rem;color:#b91c1c"></div>
            <div class="img-ok" id="logo-ok" style="display:none;margin-top:.4rem;padding:.4rem .7rem;background:#f0fdf4;border:1px solid #86efac;border-radius:6px;font-size:.8rem;color:#15803d"></div>
          </div>
        </div>
      </div>
      <div style="padding:.65rem 1rem;border-bottom:1px solid var(--cms-border)">
        <div style="font-size:.78rem;color:var(--cms-muted);font-weight:600;margin-bottom:.4rem">Favicon</div>
        <input type="hidden" name="favicon_b64" id="favicon_b64">
        <div class="img-upload-zone">
          <div class="img-preview-box" id="favicon-preview-box">
            {% if obj.favicon %}
            <img src="{{ obj.favicon.url }}" alt="">
            {% else %}
            <i class="fa-regular fa-image no-img"></i>
            {% endif %}
          </div>
          <div>
            <div style="font-size:.72rem;color:var(--cms-muted);margin-bottom:.4rem">512 x 512 px square. Larger images open a crop window.</div>
            <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap">
              <div class="upload-btn-wrap">
                <button type="button" class="btn-cms-ghost" style="padding:.4rem .9rem;font-size:.8rem">
                  <i class="fa-solid fa-arrow-up-from-bracket me-1"></i>{% if obj.favicon %}Change{% else %}Upload{% endif %}
                </button>
                <input type="file" name="favicon" id="f_favicon" accept="image/*" data-img-field="favicon" data-img-size="512">
              </div>
              {% if obj.favicon %}
              <button type="submit" name="clear_favicon" value="1" class="btn-cms-danger" style="padding:.4rem .9rem;font-size:.8rem" onclick="return confirm('Remove this favicon?')">
                <i class="fa-solid fa-trash me-1"></i>Remove
              </button>
              {% endif %}
            </div>
            <div class="img-warn" id="favicon-warn" style="display:none;margin-top:.4rem;padding:.4rem .7rem;background:#fef2f2;border:1px solid #fca5a5;border-radius:6px;font-size:.8rem;color:#b91c1c"></div>
            <div class="img-ok" id="favicon-ok" style="display:none;margin-top:.4rem;padding:.4rem .7rem;background:#f0fdf4;border:1px solid #86efac;border-radius:6px;font-size:.8rem;color:#15803d"></div>
          </div>
        </div>
      </div>
      <div style="padding:.65rem 1rem;border-bottom:1px solid var(--cms-border)">
        <div style="font-size:.78rem;color:var(--cms-muted);font-weight:600;margin-bottom:.4rem">Apple Touch Icon</div>
        <input type="hidden" name="apple_touch_icon_b64" id="apple_touch_icon_b64">
        <div class="img-upload-zone">
          <div class="img-preview-box" id="apple_touch_icon-preview-box" style="border-radius:22%">
            {% if obj.apple_touch_icon %}
            <img src="{{ obj.apple_touch_icon.url }}" alt="">
            {% else %}
            <i class="fa-regular fa-image no-img"></i>
            {% endif %}
          </div>
          <div>
            <div style="font-size:.72rem;color:var(--cms-muted);margin-bottom:.4rem">180 x 180 px square. Shown when the site is saved to an iPhone or iPad.</div>
            <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap">
              <div class="upload-btn-wrap">
                <button type="button" class="btn-cms-ghost" style="padding:.4rem .9rem;font-size:.8rem">
                  <i class="fa-solid fa-arrow-up-from-bracket me-1"></i>{% if obj.apple_touch_icon %}Change{% else %}Upload{% endif %}
                </button>
                <input type="file" name="apple_touch_icon" id="f_apple_touch_icon" accept="image/png,image/*" data-img-field="apple_touch_icon" data-img-size="180">
              </div>
              {% if obj.apple_touch_icon %}
              <button type="submit" name="clear_apple_touch_icon" value="1" class="btn-cms-danger" style="padding:.4rem .9rem;font-size:.8rem" onclick="return confirm('Remove this apple touch icon?')">
                <i class="fa-solid fa-trash me-1"></i>Remove
              </button>
              {% endif %}
            </div>
            <div class="img-warn" id="apple_touch_icon-warn" style="display:none;margin-top:.4rem;padding:.4rem .7rem;background:#fef2f2;border:1px solid #fca5a5;border-radius:6px;font-size:.8rem;color:#b91c1c"></div>
            <div class="img-ok" id="apple_touch_icon-ok" style="display:none;margin-top:.4rem;padding:.4rem .7rem;background:#f0fdf4;border:1px solid #86efac;border-radius:6px;font-size:.8rem;color:#15803d"></div>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>
</form>

<div id="cropOverlay" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.88);align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;padding:1.5rem;width:min(820px,94vw);max-height:92vh;display:flex;flex-direction:column;gap:1rem;overflow:hidden">
    <div style="display:flex;justify-content:space-between;align-items:center">
      <div>
        <strong style="font-size:1rem" id="cropTitle">Crop Image</strong>
        <span style="font-size:.8rem;color:#666;margin-left:.5rem" id="cropNote"></span>
      </div>
      <button type="button" onclick="closeCropper()" style="background:none;border:none;font-size:1.6rem;line-height:1;cursor:pointer;color:#666">&times;</button>
    </div>
    <div style="flex:1;overflow:hidden;min-height:0;max-height:60vh">
      <img id="cropImage" style="display:block;max-width:100%">
    </div>
    <div style="display:flex;gap:.5rem;justify-content:flex-end;flex-shrink:0">
      <button type="button" onclick="closeCropper()" class="btn-cms-ghost">Cancel</button>
      <button type="button" onclick="applyCrop()" class="btn-cms"><i class="fa-solid fa-crop-simple me-1"></i>Use This Crop</button>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
<script>
var cropperInstance = null;
var cropField = null;
var cropSize = 0;

function imgBox(field)  { return document.getElementById(field + '-preview-box'); }
function imgWarn(field) { return document.getElementById(field + '-warn'); }
function imgOk(field)   { return document.getElementById(field + '-ok'); }

function clearMessages(field) {
  imgWarn(field).style.display = 'none';
  imgOk(field).style.display = 'none';
}
function showWarn(field, msg) { var el = imgWarn(field); el.textContent = msg; el.style.display = 'block'; }
function showOk(field, msg)   { var el = imgOk(field);   el.textContent = msg; el.style.display = 'block'; }
function showPreview(field, src) {
  imgBox(field).innerHTML = '<img src="' + src + '" alt="">';
}

document.querySelectorAll('input[data-img-field]').forEach(function (input) {
  input.addEventListener('change', function () {
    var field = this.dataset.imgField;
    var size  = parseInt(this.dataset.imgSize, 10) || 0;
    var file  = this.files[0];
    if (!file) return;
    clearMessages(field);
    document.getElementById(field + '_b64').value = '';

    if (file.type === 'image/svg+xml') {
      showOk(field, 'SVG uploaded. Vector images scale to any size.');
      var svgReader = new FileReader();
      svgReader.onload = function (ev) { showPreview(field, ev.target.result); };
      svgReader.readAsDataURL(file);
      return;
    }

    var reader = new FileReader();
    reader.onload = function (ev) {
      var src = ev.target.result;
      var probe = new Image();
      probe.onload = function () {
        var w = this.naturalWidth, h = this.naturalHeight;
        if (!size) {
          showPreview(field, src);
          if (w < 240) {
            showWarn(field, 'Image is ' + w + ' x ' + h + 'px. The recommended minimum width is 240px.');
          } else {
            showOk(field, 'Image is ' + w + ' x ' + h + 'px. Ready to save.');
          }
          return;
        }
        if (w < size || h < size) {
          showWarn(field, 'Image is ' + w + ' x ' + h + 'px. The recommended minimum is ' + size + ' x ' + size + '.');
          showPreview(field, src);
        } else if (w !== size || h !== size) {
          openCropper(field, size, src);
        } else {
          showOk(field, 'Image is exactly ' + size + ' x ' + size + '. Perfect.');
          showPreview(field, src);
        }
      };
      probe.src = src;
    };
    reader.readAsDataURL(file);
  });
});

function openCropper(field, size, src) {
  cropField = field;
  cropSize = size;
  var overlay = document.getElementById('cropOverlay');
  var cropImg = document.getElementById('cropImage');
  document.getElementById('cropNote').textContent =
    'Aspect ratio locked to ' + size + ' x ' + size + ' (square)';
  cropImg.src = src;
  overlay.style.display = 'flex';
  if (cropperInstance) { cropperInstance.destroy(); }
  cropImg.onload = function () {
    cropperInstance = new Cropper(cropImg, { aspectRatio: 1, viewMode: 1, autoCropArea: 0.95, responsive: true });
  };
}

function closeCropper() {
  document.getElementById('cropOverlay').style.display = 'none';
  if (cropperInstance) { cropperInstance.destroy(); cropperInstance = null; }
  if (cropField) {
    document.getElementById('f_' + cropField).value = '';
    clearMessages(cropField);
  }
  cropField = null;
}

function applyCrop() {
  if (!cropperInstance || !cropField) return;
  var canvas  = cropperInstance.getCroppedCanvas({ width: cropSize, height: cropSize });
  var dataURL = canvas.toDataURL('image/png');
  document.getElementById(cropField + '_b64').value = dataURL;
  showPreview(cropField, dataURL);
  clearMessages(cropField);
  showOk(cropField, 'Cropped to ' + cropSize + ' x ' + cropSize + 'px. Ready to save.');
  document.getElementById('cropOverlay').style.display = 'none';
  cropperInstance.destroy(); cropperInstance = null;
  cropField = null;
}

document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape' && document.getElementById('cropOverlay').style.display === 'flex') closeCropper();
});
</script>
<script>
function toggleReveal(inputId, btn) {
  var inp = document.getElementById(inputId);
  var ico = btn.querySelector('i');
  if (inp.type === 'password') {
    inp.type = 'text';
    ico.className = 'fa-solid fa-eye-slash';
  } else {
    inp.type = 'password';
    ico.className = 'fa-solid fa-eye';
  }
}
</script>
{% endblock %}