<%
  const center = settingsCenter && typeof settingsCenter === 'object'
    ? settingsCenter
    : { modules: [] };
  const settingsModules = Array.isArray(center.modules) ? center.modules : [];
%>

<section
  class="kt-general-settings"
  dir="<%= center.direction === 'ltr' ? 'ltr' : 'rtl' %>"
  data-kt-settings-center
  data-kt-settings-theme-aware="light-dark-system"
>
  <div class="kt-general-settings__container">
    <header class="kt-general-settings__hero" data-kt-settings-hero>
      <div class="kt-general-settings__identity">
        <span class="kt-general-settings__hero-icon" aria-hidden="true">
          <i class="ti ti-settings-2"></i>
        </span>

        <div class="kt-general-settings__hero-copy">
          <span class="kt-general-settings__eyebrow"><%= center.eyebrow %></span>
          <h1><%= center.title %></h1>
          <p><%= center.subtitle %></p>
        </div>
      </div>

      <aside class="kt-general-settings__insight" aria-label="<%= center.insightLabel %>">
        <span class="kt-general-settings__insight-icon" aria-hidden="true">
          <i class="ti ti-layout-grid"></i>
        </span>
        <span>
          <small><%= center.insightLabel %></small>
          <strong><%= center.insightValue %></strong>
        </span>
      </aside>
    </header>

    <section class="kt-general-settings__workspace" aria-labelledby="settings-center-modules-title">
      <div class="kt-general-settings__section-heading">
        <div>
          <span class="kt-general-settings__section-kicker" aria-hidden="true">
            <i class="ti ti-category-2"></i>
          </span>
          <div>
            <h2 id="settings-center-modules-title"><%= center.sectionTitle %></h2>
            <p><%= center.sectionDescription %></p>
          </div>
        </div>
        <span class="kt-general-settings__module-count">
          <b><%= settingsModules.length %></b>
          <span><%= center.insightLabel %></span>
        </span>
      </div>

      <div class="kt-general-settings__grid" data-kt-settings-grid>
        <% settingsModules.forEach((module) => { %>
          <article
            class="kt-general-settings-card <%= module.available ? '' : 'is-disabled' %>"
            data-kt-settings-card="<%= module.key %>"
          >
            <div class="kt-general-settings-card__topline">
              <span class="kt-general-settings-card__icon" aria-hidden="true">
                <i class="ti <%= module.icon %>"></i>
              </span>
              <span class="kt-general-settings-card__status" data-kt-settings-status>
                <i aria-hidden="true"></i>
                <%= module.available ? center.status : (center.locale === 'ar' ? 'قريبًا' : 'Coming soon') %>
              </span>
            </div>

            <div class="kt-general-settings-card__copy">
              <h3><%= module.title %></h3>
              <p><%= module.description %></p>
            </div>

            <% if (module.available) { %>
              <a
                class="kt-general-settings-card__action"
                href="<%= module.href %>"
                data-kt-settings-action="<%= module.key %>"
                aria-label="<%= `${center.action}: ${module.title}` %>"
              >
                <span><%= center.action %></span>
                <i class="ti <%= center.direction === 'rtl' ? 'ti-arrow-left' : 'ti-arrow-right' %>" aria-hidden="true"></i>
              </a>
            <% } else { %>
              <span class="kt-general-settings-card__action is-disabled" aria-disabled="true">
                <span><%= center.locale === 'ar' ? 'قريبًا' : 'Coming soon' %></span>
                <i class="ti ti-lock" aria-hidden="true"></i>
              </span>
            <% } %>
          </article>
        <% }); %>
      </div>
    </section>
  </div>
</section>
