{{- $team     := .team }}
{{- $pages    := .pages}}
{{- $defaultimage := .defaultimage}}
{{- $odd := .odd }}
{{- $id := "team"}}
{{if $team.id}}
    {{- $id := $team.id}}
{{else if .id}}
    {{- $id := .id }}
{{end}}
<div id="{{ $id }}" class="section {{if eq $odd 0}} section-even {{end}}">
    <div class="section-content team">
        <div class="title">
            <h1 class="content-title">{{ $team.title }}</h1>
            <div class="divider"></div>
        </div>
        <div class="team-list">
            {{- range first 4 $pages.ByDate }}
            <a href="{{.Permalink}}">
                <div class="teammember">
                    {{ if .Params.image }}
                        <img class="avatar" src="{{ .Params.image }}" alt="{{ .Params.name }} Avatar">
                    {{ else }}
                        <img class="avatar" src="{{ $defaultimage }}" alt="Default Avatar">
                    {{ end }}
                    <h1 class="teammember-title">{{ .Params.name }}</h1>
                    {{- range .Params.jobs }}
                    <p>{{ . }}</p>
                    {{- end }}
                    <div class="social-media">
                        <span>
                            {{- range .Params.social}}
                            <a href="{{ .url }}"><i class="fab fa-{{ .type }}"></i></a>
                            {{- end}}
                            {{if .Params.mail}}
                            <a href="mailto:{{ .Params.mail }}"><i class="fas fa-at"></i></a>
                            {{end}}
                        </span>
                    </div>
                </div>
            </a>
            {{- end }}
        </div>
        <div class="more-button"><a href="{{ $team.id }}"> {{ $team.moretext }} </a></div>
    </div>
</div>