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

    <div class="card border-0 shadow-sm">
      <div class="card-header bg-white border-0 pt-3 pb-0">
        <h6 class="fw-semibold mb-0">Social Media Links</h6>
      </div>
      <div class="card-body">

        {% with socials=True %}
        <div class="d-flex flex-column gap-0">

          {% for item in "·" %}{% endfor %}

          <div class="py-2">
            <label class="form-label text-muted mb-1 d-flex align-items-center gap-2" style="font-size:.8rem;">
              <span class="bi bi-instagram" style="color:#e1306c;"></span> Instagram
            </label>
            <input type="url" class="form-control form-control-sm"
                   value="https://instagram.com/mycompany" placeholder="https://instagram.com/...">
          </div>
          <hr class="my-0">

          <div class="py-2">
            <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;"></span> Facebook
            </label>
            <input type="url" class="form-control form-control-sm"
                   value="" placeholder="https://facebook.com/...">
          </div>
          <hr class="my-0">

          <div class="py-2">
            <label class="form-label text-muted mb-1 d-flex align-items-center gap-2" style="font-size:.8rem;">
              <span class="bi bi-telegram" style="color:#229ed9;"></span> Telegram
            </label>
            <input type="url" class="form-control form-control-sm"
                   value="https://t.me/mycompany" placeholder="https://t.me/...">
          </div>
          <hr class="my-0">

          <div class="py-2">
            <label class="form-label text-muted mb-1 d-flex align-items-center gap-2" style="font-size:.8rem;">
              <span class="bi bi-whatsapp" style="color:#25d366;"></span> WhatsApp
            </label>
            <input type="url" class="form-control form-control-sm"
                   value="https://wa.me/15551234567" placeholder="https://wa.me/...">
          </div>
          <hr class="my-0">

          <div class="py-2">
            <label class="form-label text-muted mb-1 d-flex align-items-center gap-2" style="font-size:.8rem;">
              <span class="bi bi-youtube" style="color:#ff0000;"></span> YouTube
            </label>
            <input type="url" class="form-control form-control-sm"
                   value="" placeholder="https://youtube.com/...">
          </div>
          <hr class="my-0">

          <div class="py-2">
            <label class="form-label text-muted mb-1 d-flex align-items-center gap-2" style="font-size:.8rem;">
              <span class="bi bi-linkedin" style="color:#0a66c2;"></span> LinkedIn
            </label>
            <input type="url" class="form-control form-control-sm"
                   value="" placeholder="https://linkedin.com/company/...">
          </div>
          <hr class="my-0">

          <div class="py-2">
            <label class="form-label text-muted mb-1 d-flex align-items-center gap-2" style="font-size:.8rem;">
              <span class="bi bi-tiktok"></span> TikTok
            </label>
            <input type="url" class="form-control form-control-sm"
                   value="" placeholder="https://tiktok.com/@...">
          </div>
          <hr class="my-0">

          <div class="py-2">
            <label class="form-label text-muted mb-1 d-flex align-items-center gap-2" style="font-size:.8rem;">
              <span class="bi bi-twitter-x"></span> Twitter / X
            </label>
            <input type="url" class="form-control form-control-sm"
                   value="" placeholder="https://x.com/...">
          </div>
          <hr class="my-0">

          <div class="py-2">
            <label class="form-label text-muted mb-1 d-flex align-items-center gap-2" style="font-size:.8rem;">
              <span class="bi bi-pinterest" style="color:#e60023;"></span> Pinterest
            </label>
            <input type="url" class="form-control form-control-sm"
                   value="" placeholder="https://pinterest.com/...">
          </div>

        </div>
        {% endwith %}

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

      </div>
    </div>

  </div>
</div>