{% extends 'blog/base.html' %}{% load i18n blog wagtailimages_tags %}

<!---->
{% block title %} {{ block.super }} | {{ article.get_parent }} | {{ article }}
{% endblock %}

<!---->
{% block meta %}
<meta
  name="description"
  content="{% trans 'Django Blog' %} | {{ article.get_parent }} | {{ article.title }}"
/>
<meta property="og:url" content="{{ article.get_full_url }}" />
<meta property="og:type" content="website" />
<meta
  property="og:title"
  content="{% trans 'Django Blog' %} | {{ article.get_parent }} | {{ article.title }}"
/>
<meta
  property="og:description"
  content="{% trans 'Django Blog' %} | {{ article.get_parent }} | {{ article.title }}"
/>
<meta
  property="og:image"
  content="{% image_url article.image 'fill-1920x1080' %}"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="{{ article.get_full_url }}" />
<meta property="twitter:url" content="{{ article.get_full_url }}" />
<meta
  name="twitter:title"
  content="{% trans 'Django Blog' %} | {{ article.get_parent }} | {{ article.title }}"
/>
<meta
  name="twitter:description"
  content="{% trans 'Django Blog' %} | {{ article.get_parent }} | {{ article.title }}"
/>
<meta
  name="twitter:image"
  content="{% image_url article.image 'fill-1920x1080' %}"
/>
{% endblock %}

<!---->
{% block content %}
<section class="container flex flex-col gap-8 mx-auto px-4 py-20">
  {% include 'blog/components/breadcrumbs.html' %}

  <div
    class="mx-auto prose prose-sm prose-video:rounded-box xl:prose-lg 2xl:prose-xl prose-headings:text-primary prose-headings:font-serif rtl:prose-headings:font-kufi prose-img:rounded-box prose-img:w-full"
  >
    <figure class="skeleton overflow-clip">
      {% image article.image fill-1920x1080 %}
    </figure>

    <div class="not-prose mb-8">
      <div class="flex items-center gap-2">
        {% if article.owner.wagtail_userprofile.avatar %}
        <div class="avatar">
          <div class="mask mask-squircle size-10 lg:size-16">
            <img
              src="{{ article.owner.wagtail_userprofile.avatar.url }}"
              alt="{{ article.owner }}"
            />
          </div>
        </div>
        {% else %}
        <div class="avatar avatar-placeholder">
          <div
            class="mask mask-squircle flex items-center justify-center bg-primary text-primary-content size-10 lg:size-16"
          >
            <span class="text-xl uppercase font-bold lg:text-4xl">
              {{ article.owner.username|slice:':1' }}
            </span>
          </div>
        </div>
        {% endif %}

        <div class="grid gap-1">
          <h2 class="text-primary text-lg font-bold lg:text-xl">
            {{ article.owner.get_full_name }}
          </h2>
          <div
            class="tooltip tooltip-bottom tooltip-primary"
            data-tip="{% trans 'Date published' %}"
          >
            <small class="text-primary">
              {{ article.latest_revision_created_at|date }}
            </small>
          </div>
        </div>
      </div>
    </div>

    <h1>{{ article.title }}</h1>

    <p class="lead">{{ article.description }}</p>

    {{ article.content }}
  </div>

  <div class="flex mx-auto flex-wrap items-center gap-4">
    {% for tag in article.tags.all %}
    <span
      class="badge {% cycle 'badge-primary' 'badge-secondary' 'badge-success' 'badge-info' 'badge-warning' 'badge-error' %}"
    >
      {{ tag }}
    </span>
    {% endfor %}
  </div>

  <section class="grid gap-8">
    <h1 class="font-bold text-primary text-xl md:text-3xl lg:text-4xl">
      {% trans 'Suggested' %}
    </h1>

    <ol class="grid grid-cols-12 grid-rows-[auto] gap-4">
      {% for article in article.get_ordered_siblings.specific %}
      <!---->
      {% include 'blog/components/article-1.html' %}
      <!---->
      {% endfor %}
    </ol>
  </section>
</section>
{% endblock %}

<!---->
{% block drawer_content %}
<li>
  <a href="{% page_url article.get_parent LANGUAGE_CODE %}">
    <i data-lucide="arrow-left" class="size-4 md:size-6 rtl:rotate-180"></i>
    {{ article.get_parent.title }}
  </a>
</li>
{% endblock %}