<%
  const socialsShowLocaleCandidate = typeof lang === 'string'
    ? lang
    : (user && typeof user.lang === 'string' ? user.lang : 'ar');
  const socialsShowLocale = String(socialsShowLocaleCandidate).toLowerCase().startsWith('en') ? 'en' : 'ar';
  const socialsShowIsEnglish = socialsShowLocale === 'en';
  const socialsShowCopy = socialsShowIsEnglish
    ? {
      eyebrow: 'Content management',
      title: 'Channel details',
      subtitle: 'Review the saved identity and public destination.',
      back: 'Back',
      cardTitle: 'Social channel',
      cardDescription: 'The content currently visible to users.',
      name: 'Channel name',
      link: 'Public link',
      added: 'Added on',
      open: 'Open public link',
      edit: 'Edit channel',
    }
    : {
      eyebrow: 'إدارة المحتوى',
      title: 'تفاصيل وسيلة التواصل',
      subtitle: 'راجع الهوية المحفوظة والوجهة العامة للقناة.',
      back: 'رجوع',
      cardTitle: 'وسيلة التواصل',
      cardDescription: 'البيانات الظاهرة حاليًا للمستخدمين.',
      name: 'اسم وسيلة التواصل',
      link: 'الرابط العام',
      added: 'تاريخ الإضافة',
      open: 'فتح الرابط العام',
      edit: 'تعديل الوسيلة',
    };
%>

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

<section class="kt-socials-page kt-socials-page--show" dir="<%= socialsShowIsEnglish ? '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-eye"></i>
        </span>
        <div class="kt-socials-hero__copy">
          <span class="kt-socials-hero__eyebrow"><%= socialsShowCopy.eyebrow %></span>
          <h1><%= socialsShowCopy.title %></h1>
          <p><%= socialsShowCopy.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><%= socialsShowCopy.back %></span>
      </a>
    </header>

    <article class="kt-socials-details" data-socials-reveal aria-labelledby="socials-details-title">
      <header class="kt-socials-details__header">
        <div class="kt-socials-details__identity">
          <span class="kt-socials-details__image">
            <img src="<%= social.linkImage %>" alt="" width="64" height="64">
          </span>
          <div>
            <h2 id="socials-details-title"><%= social.linkName %></h2>
            <p><%= socialsShowCopy.cardDescription %></p>
          </div>
        </div>
        <a
          class="kt-socials-button kt-socials-button--secondary"
          href="<%= social.linkUrl %>"
          target="_blank"
          rel="noopener noreferrer"
        >
          <i class="ti ti-external-link" aria-hidden="true"></i>
          <span><%= socialsShowCopy.open %></span>
        </a>
      </header>

      <div class="kt-socials-details__body">
        <section class="kt-socials-detail-panel">
          <span aria-hidden="true"><i class="ti ti-id"></i></span>
          <div>
            <small><%= socialsShowCopy.name %></small>
            <strong><%= social.linkName %></strong>
          </div>
        </section>

        <section class="kt-socials-detail-panel kt-socials-detail-panel--link">
          <span aria-hidden="true"><i class="ti ti-link"></i></span>
          <div>
            <small><%= socialsShowCopy.link %></small>
            <a href="<%= social.linkUrl %>" target="_blank" rel="noopener noreferrer">
              <%= social.linkUrl %>
            </a>
          </div>
        </section>

        <section class="kt-socials-detail-panel">
          <span aria-hidden="true"><i class="ti ti-calendar-event"></i></span>
          <div>
            <small><%= socialsShowCopy.added %></small>
            <strong><%= social.timeAdd %></strong>
          </div>
        </section>
      </div>

      <footer class="kt-socials-details__footer">
        <a class="kt-socials-button kt-socials-button--primary" href="/dashboard/socials/edit/<%= social.socialMediaId %>">
          <i class="ti ti-edit" aria-hidden="true"></i>
          <span><%= socialsShowCopy.edit %></span>
        </a>
      </footer>
    </article>
  </div>
</section>
