{% extends 'typograph/base.html' %}
{% load static typograph_extras %}

{# --- SEO --- #}
{# В title и description НЕ используем escapejs, так как это HTML, а не JS #}
{% block title %}{% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title|striptags|unescape|safe }}{% endif %} — ETPGRF{% endblock %}
{% block description %}{% if page.seo_description %}{{ page.seo_description }}{% else %}{{ page.excerpt|default:page.content|striptags|unescape|truncatechars:160 }}{% endif %}{% endblock %}
{% block keywords %}{% if page.seo_keywords %}{{ page.seo_keywords }}{% else %}типограф, типографика, блог типограф, онлайн типограф, подготовка текста для веба, html типограф, неразрывные пробелы, кавычки елочки, длинное тире, очистка текста от мусора, интернет верстка, муравьев, лебедев{% endif %}{% endblock %}

{# --- Schema.org --- #}
 {% block schema %}<script type="application/ld+json">
 {
   "@context": "https://schema.org",
   "@type": "WebPage",
   "headline": "{{ page.seo_title|default:page.title|striptags|unescape|escapejs }}",
   "description": "{% if page.seo_description %}{{ page.seo_description|striptags|unescape|escapejs }}{% else %}{{ page.excerpt|default:page.content|striptags|unescape|truncatechars:160|escapejs }}{% endif %}",
   "image": "{% if page.image %}{{ request.scheme }}://{{ request.get_host }}{{ page.image.url }}{% else %}{{ request.scheme }}://{{ request.get_host }}{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}{% endif %}",
   "publisher": {
     "@type": "Organization",
     "name": "ETPGRF",
     "logo": {
       "@type": "ImageObject",
       "url": "{{ request.scheme }}://{{ request.get_host }}{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}"
     }
   },
   "datePublished": "{{ page.published_at|date:'Y-m-d' }}",
   "dateModified": "{{ page.updated_at|date:'Y-m-d' }}"
 }
   </script>{% endblock %}

{% block og_title %}{% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title|striptags|unescape|safe }}{% endif %}{% endblock %}
{% block og_description %}{% if page.seo_description %}{{ page.seo_description }}{% else %}{{ page.excerpt|default:page.content|striptags|unescape|truncatechars:160 }}{% endif %}{% endblock %}
{% block og_image %}{% if page.image %}{{ request.scheme }}://{{ request.get_host }}{{ page.image.url }}{% else %}{{ request.scheme }}://{{ request.get_host }}{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}{% endif %}{% endblock %}
{% block twitter_title %}{% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title|striptags|unescape|safe }}{% endif %}{% endblock %}
{% block twitter_description %}{% if page.seo_description %}{{ page.seo_description }}{% else %}{{ page.excerpt|default:page.content|striptags|unescape|truncatechars:160 }}{% endif %}{% endblock %}
{% block twitter_image %}{% if page.image %}{{ request.scheme }}://{{ request.get_host }}{{ page.image.url }}{% else %}{{ request.scheme }}://{{ request.get_host }}{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}{% endif %}{% endblock %}

{% block content %}
  <div class="row">
    {# Левая колонка: Дата и Картинка #}
    <div class="col-lg-2 align-self-start text-end mb-4">
      <p class="small align-self-end">
        <small class="bg-secondary bg-opacity-10 p-2 text-nowrap">{{ page.published_at|date:"d.M.Y"|lower }}</small>
      </p>
      {% if page.image %}<p class="d-none d-lg-block"><img src="{{ page.image.url }}" class="w-100 rounded" alt="{{ page.title|striptags|unescape|safe }}" /></p>
    {% endif %}</div>

    {# Правая колонка: Контент #}
    <div class="col-lg-10 border-start ps-lg-4 post-page-content">
      <h1 class="display-4 mb-4">{{ page.title|safe }}</h1>

      {% if page.excerpt %}
        <div class="lead bg-secondary bg-opacity-10 p-3 rounded">
          {{ page.excerpt|safe }}
        </div>
      {% endif %}

      <div class="page-content mt-4">
        {{ page.content|safe }}
      </div>

    </div>
  </div>
{% endblock %}