{% extends baseTemplate %}
{% load static %}
{% load images %}
{% block humansContent %}
<div class="pt-20 lg:pt-24 space-y-12 pb-12 px-16 max-w-6xl mx-auto">
    <div class="flex flex-col md:flex-row gap-x-8">
        <div class="px-8 md:w-4/5 lg:w-3/4">
            <img class="w-full rounded-lg"
            {{ person.image|srcSet|safe }}
            alt="">
            <ul role="list" class="flex gap-x-8 lg:gap-x-4 py-4 text-blue-500">
                {% if person.twitterUrl %}
                    <li>
                        <a target="_blank" href="{{person.twitterUrl}}">
                            <span class="sr-only">Twitter</span>
                            <svg class="h-5 w-5 hover:text-gray-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
                            </svg>
                        </a>
                    </li>
                {% endif %}
                {% if person.linkedInUrl %}
                    <li>
                        <a href="{{person.linkedInUrl}}" target="_blank">
                                <span class="sr-only">LinkedIn</span>
                                <svg class="h-8 w-8  hover:text-gray-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clip-rule="evenodd" />
                                </svg>
                        </a>
                    </li>
                {% endif %}
                {% if person.websiteUrl %}
                    <li>
                        <a href="{{person.websiteUrl}}" target="_blank">
                                <span class="sr-only">Website</span>
                                <svg class="w-8 h-8  hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
                                </svg>
                        
                        </a>
                    </li>
                {% endif %}
            </ul>
        </div>
        <div class="h-full w-full space-y-8 p-8 lg:p-0">
        
        <div class="text-3xl md:text-4xl font-bold">
            {{person.name}}
            <div class="text-lg pt-2 lg:pl-1 text-blue-500">
                {{person.role}}
            </div>
        </div>

        <div class="max-w-prose space-y-8">
            <div class="mt-4 text-base text-gray-700 text-left">
                {{person.description|safe}}
            </div>
        </div>
            
        </div>
    </div>
</div>
{% endblock %}