<%
page.layout = "links"
page.title = theme.links.title || __('links.title')
page.subtitle = theme.links.subtitle || __('links.subtitle')
page.banner_img = theme.links.banner_img
page.banner_img_height = theme.links.banner_img_height
page.banner_mask_alpha = theme.links.banner_mask_alpha
page.comment = theme.links.comments.type
%>

<div class="row links">
  <% for(const each of theme.links.items || []) { %>
    <% if (!each.title || !each.link) continue %>
    <div class="card col-lg-4 col-md-6 col-sm-12">
      <a href="<%= url_for(each.link) %>" class="card-body hover-with-bg" target="_blank" rel="noopener">
        <div class="card-content">
          <% if (each.avatar || each.image) { %>
            <div class="link-avatar my-auto">
              <img src="<%= url_for(each.avatar || each.image) %>" alt="<%= each.title %>"
                   onerror="this.onerror=null; this.src=this.srcset='<%= url_for(theme.links.onerror_avatar) %>'"/>
            </div>
          <% } %>
          <div class="link-text">
            <div class="link-title"><%- each.title %></div>
            <div class="link-intro"><%- each.intro || '' %></div>
          </div>
        </div>
      </a>
    </div>
  <% } %>
</div>

<% if(theme.links.custom && theme.links.custom.enable && theme.links.custom.content) { %>
  <!-- Custom -->
  <div class="custom mx-auto">
    <%- theme.links.custom.content %>
  </div>
<% } %>

<%- inject_point('linksComments') %>
