{% extends "base.twig" %}

{% block header %}
    <header>

        <div class="sidebar">
            <nav class="sidebar__nav" aria-label="Menu">
                {% if exhibitions is not empty %}
                    <ul class="sidebar__nav-menu">
                        {% for exhibition in exhibitions %}
                            <li class="sidebar__nav-item">
                                <a class="sidebar__nav-link" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </nav>
            <div class="sidebar__social">
                <a class="sidebar__social-link" href="{{ instagram }}" target="_blank" aria-label="Go to {{ site.title }}'s Instagram profile">
                    <svg class="instagram-icon" aria-hidden="true" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                            <linearGradient id="instagram-icon__gradient" gradientUnits="userSpaceOnUse" x1="328.27" x2="183.73" y1="508.05" y2="3.95">
                                <stop offset="0" stop-color="#ffdb73"/>
                                <stop offset="0.08" stop-color="#fdad4e"/>
                                <stop offset="0.15" stop-color="#fb832e"/>
                                <stop offset="0.19" stop-color="#fa7321"/>
                                <stop offset="0.23" stop-color="#f6692f"/>
                                <stop offset="0.37" stop-color="#e84a5a"/>
                                <stop offset="0.48" stop-color="#e03675"/>
                                <stop offset="0.55" stop-color="#dd2f7f"/>
                                <stop offset="0.68" stop-color="#b43d97"/>
                                <stop offset="0.97" stop-color="#4d60d4"/>
                                <stop offset="1" stop-color="#4264db"/>
                            </linearGradient>
                        </defs>
                        <style>
                            .instagram-icon__background {
                                fill: url(#instagram-icon__gradient);
                            }
                            .instagram-icon__white-path {
                                fill: #fff;
                            }
                        </style>
                        <rect class="instagram-icon__background" height="465.06" rx="107.23" ry="107.23" width="465.06" x="23.47" y="23.47"/>
                        <path class="instagram-icon__white-path" d="M331,115.22a66.92,66.92,0,0,1,66.65,66.65V330.13A66.92,66.92,0,0,1,331,396.78H181a66.92,66.92,0,0,1-66.65-66.65V181.87A66.92,66.92,0,0,1,181,115.22H331m0-31H181c-53.71,0-97.66,44-97.66,97.66V330.13c0,53.71,44,97.66,97.66,97.66H331c53.71,0,97.66-44,97.66-97.66V181.87c0-53.71-43.95-97.66-97.66-97.66Z"/>
                        <path class="instagram-icon__white-path" d="M256,198.13A57.87,57.87,0,1,1,198.13,256,57.94,57.94,0,0,1,256,198.13m0-31A88.87,88.87,0,1,0,344.87,256,88.87,88.87,0,0,0,256,167.13Z"/>
                        <circle class="instagram-icon__white-path" cx="346.81" cy="163.23" r="21.07"/>
                    </svg>
                </a>
                <a class="sidebar__social-link" href="mailto:{{ email }}" target="_blank" aria-label="Write an email to {{ site.title }}">
                    <svg class="apple-mail-icon" aria-hidden="true" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                            <linearGradient id="apple-mail-icon__gradient" gradientTransform="matrix(60 0 0 -60 4071 44901)" gradientUnits="userSpaceOnUse" x1="-67.0167" x2="-67.0167" y1="748.2662" y2="746.7667">
                                <stop offset="0" stop-color="#1e51ee"/>
                                <stop offset="1" stop-color="#19e6ff"/>
                            </linearGradient>
                        </defs>
                        <style>
                            .apple-mail-icon__background {
                                fill: url(#apple-mail-icon__gradient);
                            }
                            .apple-mail-icon__white-path {
                                fill: #fff;
                            }
                        </style>
                        <path class="apple-mail-icon__background" d="M63.6,5c9,0,13.5,0,18.4,1.5c5.3,1.9,9.5,6.1,11.4,11.4C95,22.8,95,27.4,95,36.4v27.2     c0,9,0,13.5-1.5,18.4c-1.9,5.3-6.1,9.5-11.4,11.4C77.2,95,72.6,95,63.6,95H36.4c-9,0-13.5,0-18.4-1.5C12.7,91.5,8.5,87.4,6.6,82     C5,77.2,5,72.7,5,63.6V36.4c0-9,0-13.5,1.5-18.4C8.5,12.7,12.7,8.5,18,6.6C22.8,5,27.4,5,36.4,5H63.6z" id="Background_2_"/>
                        <path class="apple-mail-icon__white-path" d="M78.9,69.5c-0.1,0-0.3,0.1-0.4,0.1h-57c-0.1,0-0.3,0-0.4-0.1l0,0l17.8-17.8l3.8,3.9c4.1,4.2,10.6,4.2,14.7,0 l3.8-3.9L78.9,69.5L78.9,69.5L78.9,69.5z M80,67.6V32.3c0-0.2,0-0.4-0.1-0.5C79.8,32,62.2,50.2,62.2,50.2l17.8,17.8 C80,67.8,80,67.7,80,67.6L80,67.6z M20,67.7V32.5c0-0.2,0-0.4,0.1-0.5c0.1,0.2,17.7,18.4,17.7,18.4L20.1,68.1 C20,68,20,67.8,20,67.7L20,67.7z M79,30.6L56.3,53.8c-3.5,3.5-9.1,3.5-12.5,0L21.1,30.6C21,30.5,79,30.6,79,30.6L79,30.6z"/>
                    </svg>
                </a>
            </div>
        </div>

    </header>
{% endblock %}

{% block main %}
    <main>

        <section class="slider-section splide" aria-label="{{ site.title }}'s artwork gallery">
            <div class="splide__track">
                <ul class="splide__list">
                    {% for image in images %}
                        <li class="splide__slide" data-logo-color="{{ image.logo_color }}">
                            <img class="splide__image" src="{{ image.url }}" srcset="{{ image.srcset() }}" alt="{{ image.alt_text }}">
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </section>

    </main>
{% endblock %}