{% extends "./base.html" %}
{% load i18n %}
{% load static %}

{% load wagtailcore_tags %}
{% load wagtailimages_tags %}

{% load django_vite %}

{% if comments_are_enabled %}
  {% load comments %}
{% endif %}

{% block css %}
  {{ block.super }}
  {% if comments_are_enabled %}
    <link rel="stylesheet" type="text/css" href="{% static 'fluent_comments/css/ajaxcomments.css' %}" />
  {% endif %}
{% endblock css %}

{% block meta %}
  {{ block.super }}
  {% if blog.noindex %}
    <meta name="robots" content="noindex">
  {% endif %}
  {% block social_meta %}
    <!-- twitter card / opengraph -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ page.seo_title }}">
    <meta name="twitter:image" content="{{ social_cover_image_url }}">
    <meta name="twitter:image:alt" content="{{ cover_alt_text }}">
    <meta name="twitter:description" content="{{ page.search_description }}">

    <meta property="og:url" content="{{ page_url }}">
    <meta property="og:title" content="{{ page.seo_title }}">
    <meta property="og:image" content="{{ social_cover_image_url }}">
    <meta property="og:image:alt" content="{{ cover_alt_text }}">
    {% if social_cover_image_url %}
      <meta property="og:image:width" content="{{ social_cover_image_width }}">
      <meta property="og:image:height" content="{{ social_cover_image_height }}">
    {% endif %}
    <meta property="og:type" content="article">
    <meta property="og:description" content="{{ page.search_description }}">
    <meta property="og:updated_time" content="{{ updated_timestamp }}">
    <!--
      todo
      <meta name="twitter:creator" content="@ephes">
    -->
  {% endblock social_meta %}
  {% if use_audio_player %}
    <link rel="preconnect" href="https://cdn.podlove.org" />
  {% endif %}
{% endblock %}

{% block body_class %}template-blogpage{% endblock %}

{% block title %}{% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title }}{% endif %}{% endblock title %}

{% block content %}
  <main>
    {% include "./post_body.html" with render_detail=True %}

    {% if comments_are_enabled %}
      {% render_comment_list for page %}
      {% render_comment_form for page %}
    {% endif %}


    <p><a href="{{ blog_url }}">Return to blog</a></p>
  </main>

{% endblock %}

{% block javascript %}
  {{ block.super }}
  {% vite_hmr_client app="cast-bootstrap5" %}
  {% vite_asset 'src/gallery/image-gallery-bs5.ts' app="cast-bootstrap5" %}
  {% vite_asset 'src/audio/podlove-player.ts' app="cast-bootstrap5" %}

  <!-- full query is needed for comments -->
  <script defer src="{% static 'cast_bootstrap5/js/jquery/jquery-3.7.1.min.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'fluent_comments/js/ajaxcomments.js' %}"></script>

{% endblock javascript %}