<div class="row sticky-top" style="top: 80px">
    <div class="col">
        <div class="card border-0 shadow-sm bg-white">
            <div class="card-body px-4 pt-4 pb-3">
                <div class="row">
                    <div class="col">
                        {% if site.data.profile.portrait_url %}
                        <!-- When the screen is wider than md, float the portrait on the right -->
                        <div class="figure d-none d-md-block">
                            <img 
                                src="{{ site.data.profile.portrait_url | relative_url }}" 
                                class="figure-img img-fluid" 
                                data-toggle="tooltip" 
                                data-placement="top" 
                                title="{{ site.data.profile.portrait_caption }}">
                        </div>
                        <div class="mb-3 d-md-none text-center">
                            <img src="{{ site.data.profile.portrait_url | relative_url }}" class="rounded-circle" style="max-width: 50%;" alt="Portrait">
                        </div>
                        {% endif %}
                    </div>
                </div>
                <div class="row">
                    <div class="col text-center h4">
                        {{ site.data.profile.primary_name }}
                    </div>
                </div>

                <div class="row small">
                    <div class="col text-center">
                        {% for position in site.data.profile.positions %}
                        {{ position.name }}<br/>
                        {% endfor %}
                    </div>
                </div>

                <div class="row small">
                    <div class="col text-center">
                        <a class="email-text" href="mailto:{{ site.data.profile.email | encode_email }}">
                            {{ site.data.profile.email | replace: "@", "(at)" }}
                        </a>
                    </div>
                </div>

                <div class="row pt-2">
                    <div class="col text-center h4">
                        {% if site.data.profile.gscholar %}
                        {%- if site.data.profile.gscholar contains 'scholar.google' -%}
                        {%- assign gscholar_url = site.data.profile.gscholar -%}
                        {%- else -%}
                        {%- assign gscholar_url = 'https://scholar.google.com/citations?user=' | append: site.data.profile.gscholar -%}
                        {%- endif -%}
                        <a class="px-1 no-break" target="_blank" href="{{ gscholar_url }}">
                            <i class="fab fa-google-scholar"></i>
                        </a>
                        {% endif %}
                        
                        {% if site.data.profile.github %}
                        <a class="px-1 no-break" target="_blank" href="https://github.com/{{ site.data.profile.github }}">
                            <i class="fab fa-github"></i>
                        </a>
                        {% endif %}

                        {% if site.data.profile.wechat_qrcode %}
                        <a class="px-1 no-break" data-toggle="modal" data-target="#modal-wechat">
                            <i class="fab fa-weixin"></i>
                        </a>
                        {% endif %}

                        {% if site.data.profile.twitter %}
                        <a class="px-1 no-break" target="_blank" href="https://twitter.com/{{ site.data.profile.twitter }}">
                            <i class="fab fa-twitter"></i>
                        </a>
                        {% endif %}

                        {% if site.data.profile.linkedin %}
                        <a class="px-1 no-break" target="_blank" href="https://www.linkedin.com/in/{{ site.data.profile.linkedin }}">
                            <i class="fab fa-linkedin"></i>
                        </a>
                        {% endif %}

                        {% if site.data.profile.orcid %}
                        <a class="px-1 no-break" target="_blank" href="https://orcid.org/{{ site.data.profile.orcid }}">
                            <i class="fab fa-orcid"></i>
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{% if site.data.profile.wechat_qrcode %}
<div class="modal fade" id="modal-wechat" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body p-0">
                <img src="{{ site.data.profile.wechat_qrcode | relative_url }}" class="img-fluid">
            </div>
            {% if site.data.profile.wechat_prompt %}
            <div class="modal-body p-1">
                {{ site.data.profile.wechat_prompt }}
            </div>
            {% endif %}
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
{% endif %}
