{{ define "main" }}
{{ $data := index site.Data site.Language.Lang }}

<!-- start of team-section -->
<section class="section-padding pb-40" data-aos="fade-in" data-aos-delay="150">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-6 col-md-9 text-center mb-40">
        <div class="content">{{.Content}}</div>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-md-12 mb-25">
        <div class="team-filters text-uppercase text-center w-100" data-toggle="buttons">
          <label class="btn active mb-3">
            <input class="d-none" type="radio" name="shuffle-filter" value="all" checked="checked">
            {{ i18n "all_together"}}
          </label>
          
					{{ $group := slice }}
					{{ range .Params.team_member }}
					{{ $group = $group | append .group }}
          {{ end }}
          
					{{ range ( $group | uniq ) }}
          <label class="btn mb-3">
            <input class="d-none" type="radio" name="shuffle-filter" value="{{ . |urlize}}">
            {{ . | humanize }}
          </label>
          {{ end }}
        </div>
      </div>
    </div>
    <div id="masonry" class="row team-members">
      {{ range .Params.team_member}}
      <div class="masonry-item team-item col-lg-4 col-sm-6 mt-4" data-groups="[&quot;{{.group | urlize}}&quot;]">
        <div class="text-center mb-30">
          <div class="team-image has-shapes d-inline-block mb-25">
            <img loading="lazy" class="img-fluid rounded-circle" src="{{.image | absURL}}" alt="">

            <div class="team-shapes">
              <div class="shape-1 shape-xs bg-secondary rounded-circle"></div>
              <div class="shape-2 shape-sm bg-primary rounded-circle"></div>
              <div class="shape-3 shape-sm-2 bg-tertiary rounded-circle"></div>
            </div>
          </div>
          <h4 class="font-weight-bold mb-10">{{.name}}</h4>
          <p>{{ .designation }}</p>
          <ul class="list-unstyled list-inline mt-2">
            {{ range .social }}
            <li class="list-inline-item">
              <a href="{{ .link | safeURL }}" class="text-black-200 p-2 d-inline-block">
                <span class="{{ .icon }}"></span></a>
            </li>
            {{ end }}
          </ul>
        </div>
        <!-- team item -->
      </div>
      {{ end }}
    </div>
  </div>
</section>
<!-- end of team-section -->
{{ end }}