<%
  const socialsFormLocale = typeof lang === 'string' && lang.toLowerCase().startsWith('en') ? 'en' : 'ar';
  const socialsFormIsEnglish = socialsFormLocale === 'en';
  const socialsFormMode = mode === 'edit' ? 'edit' : 'create';
  const socialsFormSocial = social || {};
  const socialsFormImage = socialsFormSocial.linkImage || '/admin/assets/img/branding/brand-img-small.png';
  const socialsFormCopy = socialsFormIsEnglish
    ? {
      image: 'Channel mark',
      imageFormats: 'PNG / JPG / JPEG / WEBP only',
      imageHelper: socialsFormMode === 'edit'
        ? 'Use a clear square image. The current image stays until a valid replacement is ready.'
        : 'Use a clear square image.',
      chooseImage: socialsFormMode === 'edit' ? 'Change image' : 'Choose image',
      name: 'Channel name',
      namePlaceholder: 'e.g. WhatsApp customer care',
      nameHelper: 'Use the public name users will recognize.',
      nameRequired: 'Channel name is required',
      link: 'Public link',
      linkPlaceholder: 'https://example.com/channel',
      linkHelper: 'A complete link beginning with http:// or https://',
      linkRequired: 'Public link is required',
      linkInvalid: 'Enter a valid link beginning with http:// or https://',
      imageRequired: 'Channel image is required',
      imageInvalid: 'Choose an image in PNG, JPG, JPEG, or WEBP format only',
      imageUnreadable: 'The selected image could not be read. Choose another valid image.',
    }
    : {
      image: 'علامة القناة',
      imageFormats: 'PNG / JPG / JPEG / WEBP فقط',
      imageHelper: socialsFormMode === 'edit'
        ? 'استخدم صورة مربعة وواضحة. تبقى الصورة الحالية حتى تجهيز بديل صالح.'
        : 'استخدم صورة مربعة وواضحة',
      chooseImage: socialsFormMode === 'edit' ? 'تغيير الصورة' : 'اختيار صورة',
      name: 'اسم وسيلة التواصل',
      namePlaceholder: 'مثال: واتساب خدمة العملاء',
      nameHelper: 'استخدم الاسم العام الذي سيتعرف عليه المستخدم.',
      nameRequired: 'اسم وسيلة التواصل مطلوب',
      link: 'الرابط العام',
      linkPlaceholder: 'https://example.com/channel',
      linkHelper: 'رابط كامل يبدأ بـ http:// أو https://',
      linkRequired: 'الرابط العام مطلوب',
      linkInvalid: 'أدخل رابطًا صحيحًا يبدأ بـ http:// أو https://',
      imageRequired: 'صورة وسيلة التواصل مطلوبة',
      imageInvalid: 'اختر صورة بصيغة PNG أو JPG أو JPEG أو WEBP فقط',
      imageUnreadable: 'تعذر قراءة الصورة المحددة. اختر صورة أخرى صالحة.',
    };
%>

<input type="hidden" name="_csrf" value="<%= csrfToken %>">

<div class="kt-socials-form__grid">
  <div class="kt-socials-field kt-socials-field--image" data-socials-field>
    <span class="kt-socials-label"><%= socialsFormCopy.image %></span>
    <div class="kt-socials-upload" data-socials-upload>
      <span class="kt-socials-upload__preview" data-socials-preview-frame>
        <img
          src="<%= socialsFormImage %>"
          alt=""
          width="72"
          height="72"
          data-socials-image-preview
          data-socials-initial-src="<%= socialsFormImage %>"
        >
        <i
          class="ti ti-photo kt-socials-upload__preview-fallback"
          data-socials-preview-fallback
          aria-hidden="true"
          hidden></i>
      </span>
      <div class="kt-socials-upload__content">
        <label class="kt-socials-upload__button" for="social-link-image">
          <i class="ti ti-photo-up" aria-hidden="true"></i>
          <span><%= socialsFormCopy.chooseImage %></span>
        </label>
        <strong class="kt-socials-upload__formats"><%= socialsFormCopy.imageFormats %></strong>
        <small><%= socialsFormCopy.imageHelper %></small>
        <span class="kt-socials-upload__filename" data-socials-file-name aria-live="polite"></span>
      </div>
      <input
        class="kt-socials-upload__input"
        id="social-link-image"
        type="file"
        name="linkImage"
        accept="image/png,image/jpeg,image/jpg,image/webp"
        <%= socialsFormMode === 'create' ? 'required' : '' %>
        data-socials-image-input
        data-socials-required-message="<%= socialsFormCopy.imageRequired %>"
        data-socials-invalid-message="<%= socialsFormCopy.imageInvalid %>"
        data-socials-unreadable-message="<%= socialsFormCopy.imageUnreadable %>"
        aria-describedby="social-link-image-error"
        aria-invalid="false"
      >
    </div>
    <p
      class="kt-socials-field__error"
      id="social-link-image-error"
      data-socials-field-error
      aria-live="polite"
      aria-hidden="true"
    >
      <i class="ti ti-alert-circle" aria-hidden="true"></i>
      <span data-socials-field-error-message></span>
    </p>
  </div>

  <div class="kt-socials-field" data-socials-field>
    <label class="kt-socials-label" for="social-link-name"><%= socialsFormCopy.name %></label>
    <div class="kt-socials-control">
      <i class="ti ti-id-badge-2" aria-hidden="true"></i>
      <input
        id="social-link-name"
        type="text"
        name="linkName"
        value="<%= socialsFormSocial.linkName || '' %>"
        placeholder="<%= socialsFormCopy.namePlaceholder %>"
        required
        autocomplete="off"
        data-socials-input
        data-socials-required-message="<%= socialsFormCopy.nameRequired %>"
        aria-describedby="social-link-name-helper social-link-name-error"
        aria-invalid="false"
      >
    </div>
    <small class="kt-socials-field__helper" id="social-link-name-helper"><%= socialsFormCopy.nameHelper %></small>
    <p
      class="kt-socials-field__error"
      id="social-link-name-error"
      data-socials-field-error
      aria-live="polite"
      aria-hidden="true"
    >
      <i class="ti ti-alert-circle" aria-hidden="true"></i>
      <span data-socials-field-error-message></span>
    </p>
  </div>

  <div class="kt-socials-field" data-socials-field>
    <label class="kt-socials-label" for="social-link-url"><%= socialsFormCopy.link %></label>
    <div class="kt-socials-control kt-socials-control--ltr">
      <i class="ti ti-link" aria-hidden="true"></i>
      <input
        id="social-link-url"
        type="url"
        name="linkUrl"
        value="<%= socialsFormSocial.linkUrl || '' %>"
        placeholder="<%= socialsFormCopy.linkPlaceholder %>"
        required
        inputmode="url"
        autocomplete="url"
        dir="ltr"
        data-socials-input
        data-socials-url
        data-socials-required-message="<%= socialsFormCopy.linkRequired %>"
        data-socials-invalid-message="<%= socialsFormCopy.linkInvalid %>"
        aria-describedby="social-link-url-helper social-link-url-error"
        aria-invalid="false"
      >
    </div>
    <small class="kt-socials-field__helper" id="social-link-url-helper">
      <% if (socialsFormIsEnglish) { %>
        <%= socialsFormCopy.linkHelper %>
      <% } else { %>
        رابط كامل يبدأ بـ <bdi dir="ltr">http://</bdi> أو <bdi dir="ltr">https://</bdi>
      <% } %>
    </small>
    <p
      class="kt-socials-field__error"
      id="social-link-url-error"
      data-socials-field-error
      aria-live="polite"
      aria-hidden="true"
    >
      <i class="ti ti-alert-circle" aria-hidden="true"></i>
      <span data-socials-field-error-message></span>
    </p>
  </div>
</div>
