          {#- episode ~#}
          <article class="mb-8">
            <header class="mb-1 bg-white dark:bg-black{% if page.type == 'page' %} sticky top-0{% endif %}">
              <time class="text-xs text-slate-400">{{ p.date|format_date('long') }}</time>
              {%- if page.type != 'page' ~%}
              <h2 class="text-2xl text-primary flex items-center"><a href="{{ url(p) }}">{{ p.title }}</a></h2>
              {%- else ~%}
              <h1 class="text-2xl text-primary flex items-center">{{ p.title }}</h1>
              {%- endif ~%}
              {#-{%- if p.categories is defined ~%}
              <div class="uppercase text-sm"><a href="/categories/{{ p.categories[0] }}">{{ p.categories[0] }}</a></div>
              {%- endif ~%}~#}
            </header>
            <div class="mb-2">
              {%- if page.type == 'page' ~%}
              <div class="flex space-x-2 flex-col md:flex-row bg-white dark:bg-black sticky top-[60px]">
                {%~ include 'partials/audioplayer.html.twig' with {page: p} ~%}
                <div class="flex space-x-2 text-primary mb-2 md:mb-0 self-center">
                  <button class="inline-flex items-center" type="button" title="{% trans %}Download{% endtrans %}">
                    <a href="{{ asset(page.episode.file)|url }}" download>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                    </a>
                  </button>
                  <button class="inline-flex items-center" id="check-button-text-{{ p.id }}" type="button" title="{% trans %}Mark as read / unread{% endtrans %}">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                  </button>
                  <button class="inline-flex items-center" id="share-button-text-{{ p.id }}" type="button" title="{% trans %}Share this episode{% endtrans %}">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewbox="0 0 20 20" fill="currentColor"><path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z"/></svg>
                  </button>
                </div>
                <script>{% apply minify_js ~%}
                  // share button script
                  const shareButton = document.getElementById('share-button-text-{{ p.id }}');
                  if (navigator.share) {
                    shareButton.addEventListener('click', event => {
                      navigator.share({text: '{{ p.title }}', url: '{{ url(p) }}'}).then(() => {
                        console.log('Thanks for sharing!');
                      }).catch(console.error);
                    });
                  } else {
                    shareButton.remove();
                  }
                  // mark as read button script
                  const checkButton = document.getElementById('check-button-text-{{ p.id }}');
                  checkButton.addEventListener('click', event => {
                    if (audioplayer.currentTime == audioplayer.duration) {
                      audioplayer.currentTime = 0;
                    } else {
                      audioplayer.currentTime = audioplayer.duration;
                    }
                  });
                {% endapply ~%}</script>
              </div>
              <div class="markdown dark:markdown-invert dark:text-slate-300">
                {{ p.content }}
              </div>
              {%- endif ~%}
              <div class="markdown dark:markdown-invert dark:text-slate-300">
                {{ p.content|excerpt_html }}
              </div>
            </div>
            {%- if page.type != 'page' ~%}
            {#- audio player state ~#}
            <ol class="flex space-x-2">
              <li class="border border-slate-300 rounded-full">
                <a href="{{ url(p) }}#autoplay" class="transition-colors duration-150 text-primary focus:shadow-outline">
                <div class="flex space-x-1 px-2 py-1 hover:brightness-75">
                  <svg id="player-button-{{ p.id }}" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewbox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/></svg>
                  <span class="uppercase" id="player-button-text-{{ p.id }}">{% trans %}Play{% endtrans %}</span>
                </div>
                </a>
              </li>
            </ol>
            <script>{% apply minify_js ~%}
              // reading state
              window.addEventListener('DOMContentLoaded', (event) => {
                const startTime = localStorage.getItem('{{ asset(p.episode.file) }}');
                if (startTime !== null && startTime !== '0') {
                  console.log('Resume "{{ p.title }}" at', startTime);
                  const button = document.getElementById('player-button-{{ p.id }}');
                  const buttonText = document.getElementById('player-button-text-{{ p.id }}');
                  if (startTime == 'ended') {
                    button.parentElement.className += ' text-slate-500';
                    buttonText.innerText = '{% trans %}Ended{% endtrans %}';
                  } else {
                    buttonText.innerText = '{% trans %}Resume{% endtrans %}';
                  }
                }
              });
            {% endapply ~%}</script>
            {%- endif ~%}
          </article>