<%
  const socialsEditLocaleCandidate = typeof lang === 'string'
    ? lang
    : (user && typeof user.lang === 'string' ? user.lang : 'ar');
  const socialsEditLocale = String(socialsEditLocaleCandidate).toLowerCase().startsWith('en') ? 'en' : 'ar';
  const socialsEditIsEnglish = socialsEditLocale === 'en';
  const socialsEditCopy = socialsEditIsEnglish
    ? {
      eyebrow: 'Content management',
      title: 'Edit social channel',
      subtitle: 'Update the channel identity, public link, or visual mark.',
      back: 'Back',
      cardTitle: 'Channel details',
      cardDescription: 'Changes are reflected wherever this channel is shown to users.',
      submit: 'Save changes',
      submitting: 'Saving...',
    }
    : {
      eyebrow: 'إدارة المحتوى',
      title: 'تعديل وسيلة التواصل',
      subtitle: 'حدّث هوية القناة أو رابطها العام أو علامتها البصرية.',
      back: 'رجوع',
      cardTitle: 'بيانات وسيلة التواصل',
      cardDescription: 'تنعكس التغييرات في كل موضع تظهر فيه هذه القناة للمستخدمين.',
      submit: 'حفظ التعديلات',
      submitting: 'جاري الحفظ...',
    };
%>

<link rel="stylesheet" href="/admin/assets/css/pages/socials.css?v=2.6.2.1">

<section class="kt-socials-page kt-socials-page--form" dir="<%= socialsEditIsEnglish ? 'ltr' : 'rtl' %>">
  <div class="kt-socials-container kt-socials-container--narrow">
    <header class="kt-socials-hero kt-socials-hero--compact" data-socials-reveal>
      <div class="kt-socials-hero__identity">
        <span class="kt-socials-hero__mark" aria-hidden="true">
          <i class="ti ti-edit"></i>
        </span>
        <div class="kt-socials-hero__copy">
          <span class="kt-socials-hero__eyebrow"><%= socialsEditCopy.eyebrow %></span>
          <h1><%= socialsEditCopy.title %></h1>
          <p><%= socialsEditCopy.subtitle %></p>
        </div>
      </div>
      <a class="kt-socials-button kt-socials-button--secondary" href="/dashboard/socials">
        <i class="ti ti-arrow-back-up" aria-hidden="true"></i>
        <span><%= socialsEditCopy.back %></span>
      </a>
    </header>

    <section class="kt-socials-form-card" data-socials-reveal aria-labelledby="socials-form-title">
      <form
        class="kt-socials-form"
        id="editSocial"
        method="POST"
        action="/dashboard/socials/edit/<%= social.socialMediaId %>"
        enctype="multipart/form-data"
        data-socials-form
        novalidate
      >
        <input type="hidden" name="socialId" value="<%= social.socialMediaId %>">

        <header class="kt-socials-form-card__header">
          <span class="kt-socials-form-card__icon" aria-hidden="true">
            <i class="ti ti-address-book"></i>
          </span>
          <div>
            <h2 id="socials-form-title"><%= socialsEditCopy.cardTitle %></h2>
            <p><%= socialsEditCopy.cardDescription %></p>
          </div>
        </header>

        <div class="kt-socials-form__body">
          <%- include('./partials/formFields.ejs', {
            mode: 'edit',
            social,
            csrfToken,
            lang: socialsEditLocale,
            i18n
          }) %>
          <p class="kt-socials-form__message" data-socials-form-message aria-live="polite"></p>
        </div>

        <footer class="kt-socials-form__footer">
          <button
            class="kt-socials-button kt-socials-button--primary kt-socials-submit"
            type="submit"
            data-socials-submit
            data-socials-default-label="<%= socialsEditCopy.submit %>"
            data-socials-loading-label="<%= socialsEditCopy.submitting %>"
          >
            <i class="ti ti-check" data-socials-submit-icon aria-hidden="true"></i>
            <i class="ti ti-loader-2 kt-socials-spinner" data-socials-submit-spinner aria-hidden="true" hidden></i>
            <span data-socials-submit-label><%= socialsEditCopy.submit %></span>
          </button>
        </footer>
      </form>
    </section>
  </div>
</section>

<%- include('./includes.ejs') %>
