{% extends "base.twig" %}

{% block header %}
    <header>

        <div class="sidebar sidebar--fixed">
            <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">
                                    {% if exhibition.external_link == 'false' %}
                                        <a class="sidebar__nav-link sidebar__nav-link--iframe" href="{{ exhibition.url }}" target="exhibition" data-background="{{ exhibition.background_color }}">{{ exhibition.title }}</a>
                                    {% else %}
                                        <a class="sidebar__nav-link sidebar__nav-link--blank" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
                                    {% endif %}
                                </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 aria-hidden="true" viewBox="0 0 128 128" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path d="M 128 0 L 0 0 L 0 128 L 128 128 L 128 0 Z M 119.874 119.874 L 8.126 119.874 L 8.126 8.126 L 119.874 8.126 L 119.874 119.874 Z"/>
                        <path d="M64,93c16,0,29-13,29-29S80,35,64,35S35,48,35,64S48,93,64,93z M64,43c11.6,0,21,9.4,21,21s-9.4,21-21,21s-21-9.4-21-21 S52.4,43,64,43z"/>
                        <rect height="10" width="10" x="98" y="20"/>
                    </svg>
                </a>
                <a class="sidebar__social-link" href="mailto:{{ email }}" target="_blank" aria-label="Write an email to {{ site.title }}">
                    <svg aria-hidden="true" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path d="M 0 48 L 0 0 L 48 0 L 48 48 L 0 48 Z M 24 24.35 L 3.1 7.126 L 3.1 44.5 L 44.9 44.5 L 44.9 7.126 L 24 24.35 Z M 24 20.35 L 44.9 3.5 L 3.1 3.5 L 24 20.35 Z M 3.1 7.126 L 3.1 3.5 L 3.1 7.126 Z"/>
                    </svg>
                </a>
            </div>
        </div>

    </header>
{% endblock %}

{% block main %}
    <main>

        <section class="exhibition-section">
            <iframe class="exhibition" name="exhibition" src=""></iframe>
        </section>

        <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 %}