{% extends 'base.html' %}
{% load static thumbnail %}

{% block head %}
    {{ block.super }}
    <meta name="apple-itunes-app" content="app-id={{ podcast.apple_podcasts_id }}">
    <link rel="alternate" type="application/rss+xml" title="{{ podcast.name }} RSS feed" href="{{ podcast.rss_feed_url }}">
    <link rel="shortcut icon" type="image/png" href="{% thumbnail podcast.artwork '100x100' crop=True %}">
    <link rel="apple-touch-icon" type="image/png" href="{% thumbnail podcast.artwork '57x57' crop=True %}" sizes="57x57">
    <link rel="apple-touch-icon" type="image/png" href="{% thumbnail podcast.artwork '114x114' crop=True %}" sizes="114x114">
    <link rel="apple-touch-icon" type="image/png" href="{% thumbnail podcast.artwork '72x72' crop=True %}" sizes="72x72">
    <link rel="apple-touch-icon" type="image/png" href="{% thumbnail podcast.artwork '144x144' crop=True %}" sizes="144x144">
{% endblock head %}

{% block brand %}
    {% if podcast.artwork %}
        <a href="/">
            <img class="c-logo__img" src="{% thumbnail podcast.artwork '64x64' crop=True %}" alt="{{ podcast.name }}">
        </a>
    {% else %}
        <a class="c-logo__link" href="/">{{ podcast.name }}</a>
    {% endif %}
{% endblock brand %}

{% block menu %}
    <div class="o-grid__col o-grid__col--4-4-s o-grid__col--2-3-l">
        <nav class="c-nav-wrap">
            <ul class="c-nav o-plain-list">
                {% for item in menu_items %}
                    <li class="c-nav__item">
                        <a href="{{ item.url }}" class="{% if item.highlight %}c-btn c-btn--mini{% else %}c-nav__link{% if item.active %} c-nav__link--current{% endif %}{% endif %}">{{ item.text }}</a>
                    </li>
                {% endfor %}

                <li class="c-nav__item">
                    <button class="c-nav__link c-color-mode-btn js-mode-toggle js-mode-toggle-title" title="Enable dark mode">
                        <span class="u-hidden-visually js-mode-toggle-text">Enable dark mode</span>
                        <span class="c-color-mode-btn__icon" aria-hidden="true"></span>
                    </button>
                </li>
                <li class="c-nav__item">
                    <a href="javascript:;" class="toggle-search-button js-search-toggle" aria-label="Search">
                        <div class="icon icon--ei-search icon--s c-nav__icon">
                            <svg class="icon__cnt">
                                <svg viewBox="0 0 50 50"><path d="M23 36c-7.2 0-13-5.8-13-13s5.8-13 13-13 13 5.8 13 13-5.8 13-13 13zm0-24c-6.1 0-11 4.9-11 11s4.9 11 11 11 11-4.9 11-11-4.9-11-11-11z"></path><path d="M32.682 31.267l8.98 8.98-1.414 1.414-8.98-8.98z"></path></svg>
                            </svg>
                        </div>
                    </a>
                </li>
            </ul>
        </nav>
        <div class="js-nav-toggle c-nav-toggle">
            <span class="c-nav-toggle__icon"></span>
        </div>
    </div>
{% endblock menu %}

{% block pre_main %}
    <div class="c-search js-search">
        <div class="o-grid">
            <div class="o-grid__col o-grid__col--4-4-s o-grid__col--3-4-m o-grid__col--2-4-l o-grid__col--center">
                <form class="c-search__form">
                    <span class="c-search__icon" data-icon="ei-search" data-size="m"></span>
                    <label for="search-form-input" class="u-hidden-visually">Search the site</label>
                    <input type="search" id="search-form-input" aria-label="Search the site" class="c-search__input js-search-input" placeholder="Type to search">
                </form>
            </div>
        </div>

        <div class="o-grid">
            <div class="o-grid__col o-grid__col--4-4-s o-grid__col--3-4-m o-grid__col--2-4-l o-grid__col--center">
                <div class="c-search-results js-search-results"></div>
            </div>
        </div>

        <div class="c-search__close js-search-close">
            <div data-icon="ei-close" data-size="s"></div>
        </div>
    </div>
{% endblock pre_main %}

{% block social_icons %}
    <ul class="c-social-icons o-plain-list">
        {% if podcast.twitter_username %}
            <li class="c-social-icons__item">
                <a href="https://twitter.com/{{ podcast.twitter_username }}/" aria-label="Twitter" target="_blank" rel="noopener noreferrer">
                    <span class="c-social-icons__icon" data-icon="ei-sc-twitter" data-size="s"></span>
                </a>
            </li>
        {% endif %}

        {% if podcast.facebook_username %}
            <li class="c-social-icons__item">
                <a href="https://www.facebook.com/{{ podcast.facebook_username }}/" aria-label="Facebook" target="_blank" rel="noopener noreferrer">
                    <span class="c-social-icons__icon" data-icon="ei-sc-facebook" data-size="s"></span>
                </a>
            </li>
        {% endif %}

        {% if podcast.instagram_username %}
            <li class="c-social-icons__item">
                <a href="https://www.instagram.com/{{ podcast.instagram_username }}/" aria-label="Instagram" target="_blank" rel="noopener noreferrer">
                    <span class="c-social-icons__icon" data-icon="ei-sc-instagram" data-size="s"></span>
                </a>
            </li>
        {% endif %}

        <li class="c-social-icons__item">
            <a href="{{ podcast.rss_feed_url }}" aria-label="RSS" target="_blank" rel="noopener noreferrer" title="RSS">
                <span class="c-social-icons__icon icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path d="M6.503 20.752c0 1.794-1.456 3.248-3.251 3.248-1.796 0-3.252-1.454-3.252-3.248 0-1.794 1.456-3.248 3.252-3.248 1.795.001 3.251 1.454 3.251 3.248zm-6.503-12.572v4.811c6.05.062 10.96 4.966 11.022 11.009h4.817c-.062-8.71-7.118-15.758-15.839-15.82zm0-3.368c10.58.046 19.152 8.594 19.183 19.188h4.817c-.03-13.231-10.755-23.954-24-24v4.812z"/></svg>
                </span>
            </a>
        </li>
    </ul>
{% endblock social_icons %}