{{ with .Params.mission }}
{{ "<!-- mission -->" | safeHTML }}
<section class="mission section">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h5 class="section-title-sm">{{ .subtitle | markdownify }}</h5>
        <h2 class="section-title section-title-border-half">{{ .title | markdownify }}</h2>
      </div>
      <div class="col-lg-6">
        <p class="mb-40">{{ .content | markdownify }}</p>
        {{ "<!-- accordion -->" | safeHTML }}
        <div id="accordion" class="mb-md-50">
          {{ range $index, $element := .accordion }}
          <div class="card border-0 mb-4">
            <div class="card-header bg-gray border p-0">
              <a class="card-link h5 d-block text-dark mb-0 py-10 px-4" data-toggle="collapse" href="#collapse{{ add $index 1 }}">
                <i class="{{if eq $index 0}}ti-minus{{else}}ti-plus{{end}} text-primary mr-2"></i> {{ .title }}
              </a>
            </div>
            <div id="collapse{{ add $index 1 }}" class="collapse {{if eq $index 0}}show{{ end }}" data-parent="#accordion">
              <div class="card-body font-secondary text-color pl-0 pb-0">
                {{ .description | markdownify }}
              </div>
            </div>
          </div>
          {{ end }}
        </div>
      </div>
      {{ "<!-- chart -->" | safeHTML }}
      <div class="col-lg-6 align-self-end">
        <img src="{{ .image | absURL }}" alt="chart" class="img-fluid w-100">
      </div>
    </div>
  </div>
</section>
{{ "<!-- /mission -->" | safeHTML }}
{{ end }}