<% var d = block.data || {}; %>

<% if (block.type === 'hero') { %>
  <section class="post-hero">
    <div class="wrap">
      <div class="hero-with-media<%= d.image ? '' : ' no-media' %>">
        <div class="hero-text-col">
          <% if (d.eyebrow) { %><p class="eyebrow"><%= d.eyebrow %></p><% } %>
          <h1><%= d.headline %></h1>
          <% if (d.subheading) { %><p class="post-date"><%= d.subheading %></p><% } %>
          <% if (d.ctaLabel && d.ctaUrl) { %>
            <div class="pill-row" style="margin-top: 1rem;">
              <a href="<%= d.ctaUrl %>" class="button button-primary"><%= d.ctaLabel %></a>
            </div>
          <% } %>
        </div>
        <% if (d.image) { %>
          <div class="hero-media-col">
            <div class="hero-media-box">
              <img src="<%= d.image %>" alt="">
            </div>
          </div>
        <% } %>
      </div>
    </div>
    <div class="post-hero-pattern"></div>
  </section>
<% } %>

<% if (block.type === 'rich_text') { %>
  <section class="page-block">
    <div class="cms-body"><%- d.body %></div>
  </section>
<% } %>

<% if (block.type === 'text_image') { %>
  <section class="page-block page-block-text-image<%= d.imagePosition === 'right' ? ' image-right' : '' %>">
    <div class="text">
      <% if (d.heading) { %><h2><%= d.heading %></h2><% } %>
      <div class="cms-body"><%- d.body %></div>
    </div>
    <% if (d.image) { %><div class="media"><img src="<%= d.image %>" alt=""></div><% } %>
  </section>
<% } %>

<% if (block.type === 'columns_3') { %>
  <section class="page-block page-block-columns-3">
    <% if (d.heading) { %><div class="section-head"><h2><%= d.heading %></h2></div><% } %>
    <div class="cols">
      <% (d.columns || []).forEach(function(col) { %>
        <% if (col.title || col.body) { %>
          <div>
            <% if (col.title) { %><h3><%= col.title %></h3><% } %>
            <% if (col.body) { %><p><%= col.body %></p><% } %>
          </div>
        <% } %>
      <% }) %>
    </div>
  </section>
<% } %>

<% if (block.type === 'cta') { %>
  <div class="cta-band" style="max-width:1120px; margin-left:auto; margin-right:auto;">
    <% if (d.heading) { %><h2><%= d.heading %></h2><% } %>
    <% if (d.body) { %><p><%= d.body %></p><% } %>
    <% if (d.buttonLabel && d.buttonUrl) { %><a href="<%= d.buttonUrl %>" class="button button-primary"><%= d.buttonLabel %></a><% } %>
  </div>
<% } %>

<% if (block.type === 'testimonial') { %>
  <section class="page-block page-block-testimonial">
    <blockquote>&ldquo;<%= d.quote %>&rdquo;</blockquote>
    <% if (d.name) { %>
      <p class="who"><%= d.name %><% if (d.role) { %><span><%= d.role %></span><% } %></p>
    <% } %>
  </section>
<% } %>

<% if (block.type === 'faq') { %>
  <section class="page-block page-block-faq">
    <% if (d.heading) { %><div class="section-head"><h2><%= d.heading %></h2></div><% } %>
    <% (d.items || []).forEach(function(item) { %>
      <details>
        <summary><%= item.question %></summary>
        <p><%= item.answer %></p>
      </details>
    <% }) %>
  </section>
<% } %>

<% if (block.type === 'gallery') { %>
  <section class="page-block page-block-gallery">
    <div class="photo-grid">
      <% (d.images || []).forEach(function(src) { %>
        <div class="photo-grid-item"><img src="<%= src %>" alt=""></div>
      <% }) %>
    </div>
  </section>
<% } %>
