{% load i18n %}
<div class="row g-4">
  <div class="col-md-7">

    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-0 pt-3 pb-0">
        <h6 class="fw-semibold mb-0">Analytics &amp; Pixels</h6>
      </div>
      <div class="card-body d-flex flex-column gap-3">

        <div>
          <label class="form-label text-muted mb-1 d-flex align-items-center gap-2" style="font-size:.8rem;">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
            Google Analytics ID
          </label>
          <input type="text" class="form-control form-control-sm" value="G-XXXXXXXXXX" placeholder="G-XXXXXXXXXX">
          <div class="text-muted mt-1" style="font-size:.75rem;">Google Analytics 4 Measurement ID</div>
        </div>
        <hr class="my-0">

        <div>
          <label class="form-label text-muted mb-1 d-flex align-items-center gap-2" style="font-size:.8rem;">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><rect width="24" height="24" rx="4" fill="#4285F4"/><text x="4" y="17" font-size="12" fill="white" font-family="sans-serif">GTM</text></svg>
            Google Tag Manager ID
          </label>
          <input type="text" class="form-control form-control-sm" value="" placeholder="GTM-XXXXXXX">
        </div>
        <hr class="my-0">

        <div>
          <label class="form-label text-muted mb-1 d-flex align-items-center gap-2" style="font-size:.8rem;">
            <span class="bi bi-facebook" style="color:#1877f2;font-size:14px;"></span>
            Facebook Pixel ID
          </label>
          <input type="text" class="form-control form-control-sm" value="" placeholder="000000000000000">
        </div>
        <hr class="my-0">

        <div>
          <label class="form-label text-muted mb-1 d-flex align-items-center gap-2" style="font-size:.8rem;">
            <span class="bi bi-tiktok" style="font-size:14px;"></span>
            TikTok Pixel ID
          </label>
          <input type="text" class="form-control form-control-sm" value="" placeholder="CXXXXXXXXXXXXXXXXX">
        </div>

        <div class="d-flex justify-content-end pt-1">
          <button class="btn btn-primary btn-sm px-4">Save</button>
        </div>

      </div>
    </div>

    <div class="card border-0 shadow-sm" style="border-left: 3px solid #f59e0b !important;">
      <div class="card-body py-2 px-3">
        <div class="d-flex align-items-start gap-2">
          <span class="bi bi-info-circle text-warning mt-1 flex-shrink-0"></span>
          <div class="text-muted" style="font-size:.8rem;">
            Identifiers are used for connecting external analytics services.
            They are integrated into template tags automatically — no need to insert code manually.
          </div>
        </div>
      </div>
    </div>

  </div>
</div>