{% if show_dummy_data == true %}
    {% set teammate = {
        'Name': {'value': 'Dr. Sarah Johnson'},
        'Position': {'value': 'Lead Pharmacist'},
        'Category': {'value': 'Clinical'},
        'Image': {'value': 'no-image.jpg', 'alt': 'Dr. Sarah Johnson - Lead Pharmacist'},
        'Bio': {'value': '<p>Dr. Sarah Johnson has over 15 years of experience in clinical pharmacy. She specializes in medication management and patient counseling, ensuring every customer receives the best possible care.</p><p>Sarah completed her PharmD at the University of London and is a member of the Royal Pharmaceutical Society.</p>'},
        'Email': {'value': 'sarah.johnson@pharmacy.com'},
        'Contact Number': {'value': '01234 567890'},
        'Twitter': {'value': '@SarahPharmD'},
        'Twitter Link': {'value': 'https://twitter.com/SarahPharmD'}
    } %}
    {% set image_folders = {
        'cms_images': {
            'team_desktop': {'path': 'sites/default/images/placeholders/'},
            'medium': {'path': 'sites/default/images/placeholders/'}
        }
    } %}
{% endif %}

<li class="teammate">

    {% set bio_text = teammate['Bio']['value'] %}

    {% if bio_text is not empty %}
        <a href="#teamBio{{ loop.index }}" class="mtcOverlay" data-no-ajax="true">
    {% endif %}

        <div class="imageWrap">
            <img src="/{{ image_folders['cms_images']['team_desktop']['path'] }}/{{ teammate['Image']['value'] }}"
                 alt="{{ teammate['Image']['alt'] }}"
            />
        </div> <!-- .imageWrap -->

    {% if bio_text is not empty %}
        </a>
    {% endif %}

    <div class="infoWrap matchHeight">

        <h4>
            {% if bio_text is not empty %}
                <a href="#teamBio{{ loop.index }}" class="mtcOverlay" data-no-ajax="true">
            {% endif %}

            {{ teammate['Name']['value'] }}

            {% if bio_text is not empty %}
                </a>
            {% endif %}
        </h4>

        {% if teammate['Position']['value'] is not empty %}
            <h5>{{ teammate['Position']['value'] }}</h5>
        {% endif %}

        <h6 class="categoryName">
            {% if teammate['Category']['value'] is not empty %}
                {{ teammate['Category']['value'] }} Team
            {% endif %}
        </h6>

    </div> <!-- .infoWrap -->

    {% if bio_text is not empty %}
        <div id="teamBio{{ loop.index }}" class="teamBio">
            <div class="bioDetails">

                <div class="imageWrap">
                    <img src="/{{ image_folders['cms_images']['medium']['path'] }}/{{ teammate['Image']['value'] }}"
                     alt="{{ teammate['Image']['alt'] }}"
                />
                </div> <!-- .imageWrap -->

                <h4>{{ teammate['Name']['value'] }}</h4>

                {% if teammate['Email']['value'] is not empty %}
                    <a href="mailto:{{ teammate['Email']['value'] }}" class="bioLinks">
                        {{ teammate['Email']['value'] }}
                    </a>
                {% endif %}

                {% if teammate['Contact Number']['value'] is not empty %}
                    <a href="tel:{{ filter_tel(teammate['Contact Number']['value']) }}" class="bioLinks">
                        {{ teammate['Contact Number']['value'] }}
                    </a>
                {% endif %}

                {% if teammate['Twitter']['value'] is not empty %}
                    <span class="twitterName bioLinks">
                        {% if teammate['Twitter Link']['value'] is not empty %}
                            <a href="{{ teammate['Twitter Link']['value'] }}" target="_blank">
                        {% endif %}

                        <i class="fa fa-twitter"></i>
                        {{ teammate['Twitter']['value'] }}

                        {% if teammate['Twitter Link']['value'] is not empty %}
                            </a>
                        {% endif %}
                    </span>
                {% endif %}
            </div> <!-- .bioDetails -->

            <div class="bioInfo">
                {{ bio_text|raw }}
            </div> <!-- .bioInfo -->
        </div>
    {% endif %}
</li>
