{% import '/front/components/components.html.twig' as helper %}

<div id="team" data-id="y-view" class="d-none" data-is-team="true">
    <div class="outer y-bg-gradient">
        <div class="middle">
            <div class="inner shadow y-bg-view rounded-4">

                {# Heading #}
                <div class="row d-flex justify-content-between">
                    <div class="col-auto text-center" style="width: 100px;"></div>
                    <div class="col-8 text-center">
                        <span class="view-header y-font-white">Meet the Team</span>
                    </div>

                    <div class="col-auto d-flex justify-content-end pe-4">
                        <span class="btn-close-view btn-close-view" title="Close">
                            <i class="fa fa-times"></i>
                        </span>
                    </div>
                </div>

                <div class="row">
                    <div class="col team-content-container p-5 ">

                       <div class="section-title text-center y-font-white">
                            <p>
                                Crowd bring together a core team of marketing experts from around the world. Our full
                                time staff of 35 are supplemented by an extended network that bring further in-depth
                                knowledge, skills and perspectives to our wide range of services.
                                <strong class="text-danger">TODO: replace this text</strong>
                            </p>
                        </div>


                        <div class="d-flex align-items-start">
                            <div class="nav flex-column nav-pills me-3 team-member-link-container"
                                 role="tablist"
                                 aria-orientation="vertical">


                                {% for member in teamMembers %}
                                    <div class="team-member-link p-3 m-1 rounded {{ loop.first ? 'active' }}"
                                         id="team-tab-{{ loop.index }}"
                                         data-bs-toggle="pill"
                                         data-bs-target="#team-content-{{ loop.index }}"
                                         role="tab"
                                         aria-controls="team-content-{{ loop.index }}"
                                         aria-selected="true">

                                        <div class="row">
                                            <div class="col-auto">
                                                {% if member.picture %}
                                                    <img src="{{ asset( team_member_img_dir ~ '/' ~ member.picture) }}"
                                                         class="img-team-member"
                                                         height="60"
                                                         width="60">
                                                {% else %}
                                                    <img class="img-team-member"
                                                         src="{{ asset('/img/front/no-team-member-picture.png') }}"
                                                         height="60"
                                                         width="60">
                                                {% endif %}
                                            </div>
                                            <div class="col p-0 y-font-white" style="max-width: 200px;">
                                                <strong class="font-14">{{ member.getFullName }}</strong>
                                                <hr class="mt-1 mb-1">
                                                <div class="font-12">{{ member.position }}</div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="tab-content team">
                                {% for member in teamMembers %}
                                    <div class="tab-pane fade show {{ loop.first ? 'active' }}"
                                         id="team-content-{{ loop.index }}"
                                         role="tabpanel"
                                         aria-labelledby="team-tab-{{ loop.index }}">
                                        <div class="member d-flex align-items-start">
                                            <div class="pic text-center">
                                                <div class="p-2">
                                                    {% if member.picture %}
                                                        <img src="{{ asset( team_member_img_dir ~ '/' ~ member.picture) }}"
                                                             height="150"
                                                             width="150">
                                                    {% else %}
                                                        <img class="img-team-member"
                                                             src="{{ asset('/img/front/no-team-member-picture.png') }}"
                                                             height="150"
                                                             width="150">
                                                    {% endif %}
                                                </div>

                                                <div class="p-2 y-font-white">
                                                    <div>
                                                        <small>{{ member.email }}</small>
                                                    </div>
                                                    <div>
                                                        <small>{{ member.phone|dashed }}</small>
                                                    </div>
                                                </div>

                                                <div class="p-2">
                                                    {% if member.twitter %}
                                                        <a class="p-1 team-member-social-link" href="{{ member.twitter }}">
                                                            <i class="fa fa-twitter"></i>
                                                        </a>
                                                    {% endif %}

                                                    {% if member.facebook %}
                                                        <a class="p-1 team-member-social-link" href="{{ member.facebook }}">
                                                            <i class="fa fa-facebook"></i>
                                                        </a>
                                                    {% endif %}

                                                    {% if member.instagram %}
                                                        <a class="p-1 team-member-social-link" href="{{ member.instagram }}">
                                                            <i class="fa fa-instagram"></i>
                                                        </a>
                                                    {% endif %}

                                                    {% if member.linkedin %}
                                                        <a class="p-1 team-member-social-link" href="{{ member.linkedin }}">
                                                            <i class="fa fa-linkedin"></i>
                                                        </a>
                                                    {% endif %}


                                                    {% if member.email %}
                                                        <a href="mailto:{{ member.email }}" class="p-1 team-member-social-link">
                                                            <i class="fa fa-envelope"></i>
                                                        </a>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <div class="member-info">
                                                <h4 class="y-font-white">{{ member.getFullName }}</h4>
                                                <span class="y-font-white">{{ member.position }}</span>
                                                <div class="overview y-font-white">
                                                    {{ member.details }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>