{%- set cover_image = site.podcast.image -%}
{%- set cover_title = site.title ~ ' cover' -%}
{%- if page.episode.image is defined -%}
	{%- set cover_image = page.episode.image -%}
	{%- set cover_title = page.title ~ ' cover' -%}
  {#- set image = cover_image -#}
{%- endif -%}
{%- set cover = asset(cover_image) -%}
{%- set cover_mobile = asset(cover_image)|resize(225) -%}
<!DOCTYPE html>
<html lang="{{ site.language }}">
  <head>
    {%- block head ~%}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    {%- include 'partials/metatags.html.twig' with {title: title|default} ~%}
    <meta name="copyright" content="{{ site.author }}" />
    {%- if getenv('CECIL_ENV') == 'production' ~%}
    <style>
      {{- asset('styles.css')|inline ~}}
    </style>
    {%- else ~%}
    <link rel="stylesheet" href="{{ asset('styles.css', {minify: false, fingerprint: false}) }}" />
    {%- endif ~%}
    <link rel="manifest" href="{{ url('manifest') }}">
    {%- include 'partials/regsw.js.twig' ~%}
    {%- include 'partials/identity.html.twig' ~%}
    {%- endblock ~%}
    <meta name="theme-color" media="(prefers-color-scheme: light)" content="{{ site.manifest.theme_color }}">
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
  </head>
  <body class="bg-slate-200 dark:bg-slate-900 dark:text-slate-300">
    <div class="container mx-auto">
      <div class="grid gap-4 grid-cols-0 md:grid-cols-[300px,1fr]">
        {#- main ~#}
        <main class="px-4 md:px-14 bg-white dark:bg-black md:min-h-screen">
          <header class="mt-4 md:mt-10">
            <div class="flex flex-row space-x-2">
              <div>
                <div class="text-2xl md:text-3xl uppercase font-bold">
                {%- if page.type == 'homepage' ~%}
                  <span class="text-primary">{{ site.title }}</span>
                {%- else ~%}
                  <a href="{{ url(site.home) }}">{{ site.title }}</a>
                {%- endif ~%}
                </div>
                {#-<p class="text-sm text-slate-500">{{ site.podcast.author }}</p>~#}
                <p class="text-base mt-2">{{ site.description }}</p>
              </div>
              {#- cover image ~#}
              <div class="block md:hidden">
                <img class="rounded-lg" src="{{ cover_mobile|url }}" alt="{{ cover_title }} cover" width="{{ cover_mobile.width }}" height="{{ cover_mobile.height }}">
              </div>
            </div>
            {#- navigation ~#}
            {%- set menu = menu|default('main') ~%}
            <nav class="mt-4 mb-6">
              <ol class="flex space-x-2">
                {%- for item in attribute(site.menus, menu)|sort_by_weight ~%}
                <li>
                  <a href="{{ url(item.url) }}" class="inline-flex items-center h-8 px-4 text-sm font-bold border-2 border-primary rounded-full hover:shadow-lg hover:border-primary hover:bg-primary hover:text-slate-50{% if url(page) == url(item.url) %} text-slate-50 bg-primary{% endif %}">{{ item.name }}</a>
                </li>
                {%- endfor ~%}
              </ol>
            </nav>
          </header>
          {#- content ~#}
          {%- block content ~%}
          <h1 class="text-lg mb-2">{{ page.title }}</h1>
          <div class="markdown markdown-code:text-xs dark:markdown-invert dark:text-slate-300">
            {{ page.content }}
          </div>
          {%- endblock ~%}
          {#- footer ~#}
          <footer class="pt-2 mt-4 mb-6 md:mb-10 border-t border-slate-300">
            {%- set powered_by = '<a href="https://staticast.cecil.app">Staticast</a> &amp; <a href="' ~ cecil.url ~ '">Cecil</a>' ~%}
            <div class="text-sm text-slate-500">
              © {{ "now"|date('Y') }} {{ site.author}} ·
              {% trans %}Powered by %powered_by%{% endtrans %} ·
              {%- for item in site.menus.footer|default() ~%}
              <a href="{{ url(item.url) }}" class="text-slate-500">{{ item.name }}</a>
              {%- endfor ~%}
            </div>
          </footer>
        </main>
        {#- sidebar ~#}
        <aside class="px-4 md:p-6 self-start md:order-first bg-slate-200 dark:bg-slate-900 sticky top-0">
          {#- cover image ~#}
          <div class="pb-5 hidden md:block">
            <img class="rounded-lg" src="{{ cover|url }}" alt="{{ cover_title }}" width="{{ cover.width }}" height="{{ cover.height }}">
          </div>
          {#- subscribe in ~#}
          <div class="mb-5">
            <div class="font-medium mb-2">{% trans %}Subscribe in{% endtrans %}</div>
            <ol class="text-sm">
              {%- set rss_icon = asset('icons/rss.png')|resize(30) ~%}
              <li>
                <a class="flex p-2 space-x-1 items-center hover:bg-slate-300 dark:hover:bg-black rounded-lg" href="{{ url('episodes/rss.xml') }}">
                  <img class="mr-2" src="{{ rss_icon }}" width="{{ rss_icon.width }}" height="{{ rss_icon.height }}" alt="RSS">
                  <span class="grow text-slate-500 dark:text-slate-300">RSS</span>
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-slate-500 dark:fill-slate-300" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg>
                </a>
              </li>
              {%- for subscribe in site.podcast.subscribe ~%}
              {%- set icon = asset('icons/' ~ subscribe.name ~ '.png')|resize(30) ~%}
              <li>
                <a class="flex p-2 space-x-1 items-center hover:bg-slate-300 dark:hover:bg-black rounded-lg" href="{{ url(subscribe.url) }}">
                  <img class="mr-2" src="{{ icon }}" width="{{ icon.width }}" height="{{ icon.height }}" alt="{{ subscribe.title }}">
                  <span class="grow text-slate-500 dark:text-slate-300">{{ subscribe.title }}</span>
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-slate-500 dark:fill-slate-300" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg>
                </a>
              </li>
              {%- endfor ~%}
            </ol>
          </div>
          {#- hosted by ~#}
          <div class="pt-4 md:pt-6 border-t border-white">
            <div class="font-medium mb-3">{% trans %}Hosted by{% endtrans %}</div>
            {%- for hoster in site.podcast.hoster ~%}
            <div class="flex items-center space-x-4 mb-4">
              {%- set avatar = asset(hoster.avatar) ~%}
              <img class="flex-none w-14 h-14 rounded-full object-cover" src="{{ avatar }}" alt="{{ hoster.name }}" width="{{ avatar.width }}" height="{{ avatar.height }}">
              <div class="flex-auto">
                <div class="text-base font-semibold dark:text-slate-300">
                  {{ hoster.name }}
                </div>
                <a href="https://twitter.com/{{ hoster.twitter }}">
                  <div class="mt-0.5 text-base text-slate-600 dark:text-slate-300">{{ hoster.twitter }}</div>
                </a>
              </div>
            </div>
            {%- endfor ~%}
          </div>
        </aside>
      </div>
    </div>
  </body>
</html>