{{ partial "header.html" . }}

<div class="header">
    <h1>{{ .Title }}</h1>
    <h2>{{ .Description }}</h2>
</div>

<style>
    @media (min-width: 1000px) {
        .column {
            float: left;
        }

        .left {
            width: 25%;
        }

        .right {
            width: 75%;
        }

        .row:after {
            content: "";
            display: table;
            clear: both;
        }
    }

    img.pic {
        width: 175px;
        padding: 7px;
        border: 1px solid #ddd;
        box-shadow: 4px 4px 5px #888;
    }
</style>

<div class="content">
    <div class="current">
        {{ range where .Pages.ByWeight "Params.current" true }}
        <div class="row">
            <h3><strong>{{.Params.name}} {{.Params.degree}}</strong></h3>
            <h4>{{.Params.tit}}</h4>
            {{ if not (eq .Params.orcid "") }}
            <p>
                <a href="https://orcid.org/{{.Params.orcid}}" target="_blank"><img
                        src="https://orcid.org/sites/default/files/images/orcid_16x16.png">orcid.org/{{.Params.orcid}}</a>
            </p>
            {{ end }}
            <div class="column left">
                {{ if not (eq .Params.pic "") }}
                {{ if and (ne .Params.title "Strand_d") (ne .Params.title "Henry_g") }}
                <img src="images/{{.Params.pic}}" id={{.Params.title}} alt="" class="pic">
                {{ end }}
                {{ if (eq .Params.title "Strand_d") }}
                <img src="images/{{.Params.pic}}" id={{.Params.title}} alt="" class="pic" onmouseover="changeImage({{.Params.title}}, 'images/strand_d_scowl.jpg')" onmouseleave="changeImage({{.Params.title}}, 'images/{{.Params.pic}}')">
                {{ end }}
                {{ if (eq .Params.title "Henry_g") }}
                <img src="images/{{.Params.pic}}" id={{.Params.title}} alt="" class="pic" onmouseover="changeImage({{.Params.title}}, 'images/henry_g_hat.jpg')" onmouseleave="changeImage({{.Params.title}}, 'images/{{.Params.pic}}')">
                {{ end }}
                {{ end }}
            </div>
            <div class="column right" style="text-align: justify">
                <p>{{.Content}}</p>
            </div>
        </div>
        <hr><br>
        {{end}}
    </div>
    <hr>
    <h1>Former Members</h1>
    <div class="former">
        {{ range where .Pages.ByWeight "Params.current" false }}
        <div class="row">
            <h3><strong>{{.Params.name}} {{.Params.degree}}</strong></h3>
            <h4>{{.Params.tit}}</h4>
            {{ if not (eq .Params.orcid "") }}
            <p>
                <a href="https://orcid.org/{{.Params.orcid}}"><img
                        src="https://orcid.org/sites/default/files/images/orcid_16x16.png">orcid.org/{{.Params.orcid}}</a>
            </p>
            {{ end }}
            <div class="column left">
                {{ if not (eq .Params.pic "") }}
                <img src="images/{{.Params.pic}}" alt="" class="pic">
                {{ end }}
            </div>
            <div class="column right" style="text-align: justify">
                <p>{{.Content}}</p>
            </div>
        </div>
        <hr><br>
        {{end}}
    </div>
</div>

<script>
    function changeImage(id,img){
        setTimeout(function() {document.getElementById(id).src=img;},5);
    }
</script>

{{ partial "footer.html" . }}