{% comment %}
<!--data structure | specified in notebooks metadata people sections-->
<!--* name: person name-->
<!--* image: person image source (can be a url or link to static file)-->
<!--* bio: optional biography-->
<!--* contact: a list of contact objects (link, icon/hyper-text)-->
<!--* roles: a list of role labels (strings)-->
<!--* role: shorthand for specifying only a single role label-->
<!---->
{% endcomment %}
{% assign person_image = include.person.image | default: include.image %}
<div
        {% if include.person.bio == null %}
            class="{{ include.style.normal_class | default: "col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12 mb-1 mb-lg-0"}}"
        {% else %}
            class="{{ include.style.bio_class | default: "col-xl-11 col-lg-11 col-md-12 col-sm-12 col-12 mb-1 mb-lg-0"}}"
        {% endif %}
        style="position: relative;"
>
    <div class="hover-shadow card shadow-sm border-0  rounded mx-5 mx-sm-0 mx-md-0 mx-lg-0 mx-xl-0 mx-xxl-0 my-2 my-sm-3 my-md-3 my-lg-3 my-xl-3 my-xxl-3">
        <div class="row g-0">
            {% if include.person.bio != null and person_image != null %}
                <div class="col-md-3 col-lg-4 text-center">
                    <img alt="" class="img-fluid rounded float-left"
                         src="{{ include.image | default: include.person.image  }}"
                         style="max-height: 200px;"
                    >
                </div>
            {% endif %}
            <div
                    {% if include.person.bio== null %}
                        class="col-lg-12 card"
                    {% else %}
                        {% if include.person.bio !=null and person_image== null %}
                            class="col-12 card"
                        {% else %}
                            class="col-md-9 col-lg-8 card"
                        {% endif %}
                    {% endif %}
                    style="border: none;"
            >
                <div class="card-body p-0 h-100 overflow-auto">
                    <!--image-->
                    {% if include.person.bio == null and include.person.image or include.image %}
                    <img alt="" class="w-100 card-img-top"
                         src="{{ include.image | default: include.person.image  }}"
                    >
                    {% endif %}
                    <div class="p-0 d-flex flex-column">
                        <!--name-->
                        <div class="d-block w-100 mh-100 mw-100 mt-3 text-center">
                            <h5 class="card-title">{{ include.person.name }}</h5>
                        </div>

                        <!--role-->
                        {% if include.person.role %}
                        <div class="card-text small text-muted d-block w-100 mh-100 mw-100 text-center">{{ include.person.role }}
                        </div>
                        {% else %}
                        {% if include.person.roles %}
                        <div class="card-text small text-muted list-inline d-block w-100 text-center">
                            {% for role in include.person.roles %}
                            <span class="list-inline-item">{{ role }}</span>
                            {% endfor %}
                        </div>
                        {% endif %}
                        {% endif %}
                        <!--bio-->
                        {% if include.person.bio %}
                        <div class="card-text d-block w-100 h-100 pt-3 pb-2 px-3">
                            {{ include.person.bio }}
                        </div>
                        {% endif %}
                    </div>

                </div>

                <!--contact-->
                {% if include.person.contact %}
                <div class="card-footer social p-1 text-center"
                     style="background-color: inherit; border-top: none;">
                    <ul class=" list-inline mx-0 my-1">
                        {% for contact in include.person.contact %}
                        <li class="list-inline-item m-0">
                            {% include link.html link=contact class="link-secondary p-0" %}
                        </li>
                        {% endfor %}
                    </ul>
                </div>

                {% endif %}
            </div>

        </div>
    </div>
</div>