{{define "layout"}}
<div>
  <div class="WhoUsesSubPage-hero{{if (eq .series "Case Studies")}}--caseStudy{{else}}--useCase{{end}}">
    <div class="WhoUsesSubPage-heroInner{{if (eq .series "Case Studies")}}--caseStudy{{else}}--useCase{{end}}">
      <div class="WhoUsesSubPage-heroContent{{if (eq .series "Case Studies")}}--caseStudy{{else}}--useCase{{end}}">
        <div class="WhoUsesSubPage-heroText{{if (eq .series "Case Studies")}}--caseStudy{{else}}--useCase{{end}}">
          {{breadcrumbs .}}
          <h1>{{.title}}</h1>
          {{range .authors}}
            <div class="Article-author">{{.}}</div>
          {{end}}
          {{if .date}}
            <div class="Article-date">{{.Date.Format "2 January 2006"}}</div>
          {{end}}
        </div>
          {{if .company}}
            <div class="WhoUsesSubPage-heroImg">
              <img src="/images/{{ .heroImgSrc }}" alt="{{.company }}">
            </div>
          {{end}}
        </div>
      </div>

  </div>
  <article class="Article {{if ne .Section "/"}}Article--{{trim .Section "/"}}{{end -}}">
    {{if (eq .series "Case Studies") }}
      <div class="CaseStudy-content">
        <div class="CaseStudy-contentBody">
          {{.Content}}
        </div>
        <div class="CaseStudy-contentAside">
          <div class="CaseStudy-aboutBlock">
            <img src="/images/logos/{{.logoSrc}}" class="CaseStudy-aboutBlockImg" alt="{{.company}}">
            <h3 class="CaseStudy-aboutBlockTitle">
              About {{.company}}
            </h3>
            {{if .description}}
              <p class="CaseStudy-aboutBlockBody">{{markdown .description}}</p>
            {{ else }}
              <p class="CaseStudy-aboutBlockBody">{{markdown .quote}}</p>
            {{end}}
          </div>
        </div>
      </div>
    {{else if (eq .series "Use Cases") }}
      <div class="UseCase-content">
        <div class="UseCase-contentAside">
          <div
            class="js-useCaseStickyNav UseCaseSubNav-anchorLinks">
          </div>
        </div>
        <div class="UseCase-contentBody js-useCaseContentBody">
          <!-- Messaging -->
          {{ if .inlineMessage }}
            <div class="InlineMessage">
              <span class="InlineMessage-imageWrap">
                <img
                  loading="lazy"
                  class="InlineMessage-img"
                  src="/images/gophers/megaphone-gopher.svg"
                  alt="Gopher with megaphone">
              </span>
              <span class="InlineMessage-description">
                <p class="InlineMessage-descParagraph">{{ .inlineMessage.description }}</p>
              </span>
              <span class="InlineMessage-ctas">
                <a href="{{ .inlineMessage.ctas.primary.url }}" class="InlineMessage-cta">
                  {{ .inlineMessage.ctas.primary.title }}
                </a>
                <a href="{{ .inlineMessage.ctas.secondary.url }}" class="InlineMessage-cta">
                  {{ .inlineMessage.ctas.secondary.title }}
                </a>
              </span>
            </div>
          {{ end }}
          {{rawhtml (replace .Content ` .sectionHeading">` `" class="sectionHeading">`)}}
        </div>
      </div>
    {{end}}
  </article>
</div>
{{end}}