{{ $i := .item}}
{{ $type := .type}}
{{ $en := .en }}

<div class="role-card {{ if eq $type "user"}}user-role-card{{ end }}" id="{{ $i.id }}">
    <div class="header {{ if $type }}{{ $type }}-color{{ end }}">{{ $i.role}}</div>
    <div class="desc-row">
        {{ range $idx, $j := $i.desc }}
            <div class="desc">{{ $j }}</div>
        {{ end }}
    </div>
    {{ if .desc_extra }}
        <div class="detail">
            <ul class="dot-blue {{ if $type }}{{ $type }}-dot-orange{{ end }}">
                <li style="color: #3e3e3e;"><a class="sig" href="https://github.com/pingcap/community/tree/master/working-groups" target="_blank">查看所有 WG</a></li>
            </ul>
        </div>
    {{ end }}
    {{ if .desc_extra_en }}
        <div class="detail">
            <ul class="dot-blue {{ if $type }}{{ $type }}-dot-orange{{ end }}" style="line-height: 1.7;">
                <li style="color: #3e3e3e;"><a class="sig" href="https://github.com/pingcap/community/tree/master/working-groups" target="_blank">View All WGs</a></li>
            </ul>
        </div>
    {{ end }}
    {{ if and (eq $type "sig") $i.detail }}
        {{ range $idx2, $j2 := $i.detail }}
            <div class="detail">
                <ul class="dot-blue {{ if $type }}{{ $type }}-dot-orange{{ end }}">
                    <li>
                        {{ if $j2.github_link }}
                            <a class="sig" href="{{ $j2.github_link }}" target="_blank">
                                <span class="title {{ if $type }}{{ $type }}-title{{ end }}">{{ $j2.title }}: </span>
                            </a>
                        {{ else }}
                            <span class="title {{ if $type }}{{ $type }}-title{{ end }}">{{ $j2.title }}: </span>
                        {{ end }}
                        <span class="item-detail">{{ $j2.desc }}</span>
                    </li>
                    <button class="review-arrow-button">
                        <a href="{{ $j2.slack_link }}" target="_blank">
                            <span>{{ if $en }}Join Now{{ else }}立即加入{{ end }}</span>
                        </a>
                    </button>
                </ul>
            </div>
        {{ end }}
    {{ else }}
        {{ range $idx2, $j2 := $i.detail }}
            <div class="detail">
                <ul class="dot-blue {{ if $type }}{{ $type }}-dot-orange{{ end }}">
                    <li>
                        <span class="title {{ if $type }}{{ $type }}-title{{ end }}">{{ $j2.title }}</span>
                        <ul class="lists">
                            {{- range $j2.lists}}
                                <li>{{ . }}</li>
                            {{- end -}}
                        </ul>
                    </li>
                </ul>
            </div>
        {{ end }}
    {{ end }}
</div>