{% extends "base.html" %}

{% block title %}{{ seo_title }} - Gobii{% endblock %}

{% block head_extras %}
  <link rel="canonical" href="{{ canonical_url }}">
  <meta name="description" content="{{ seo_description }}">
  <meta property="og:type" content="article">
  <meta property="og:title" content="{{ seo_title }}">
  <meta property="og:description" content="{{ seo_description }}">
  <meta property="og:url" content="{{ canonical_url }}">
  <meta property="og:site_name" content="Gobii">
  <meta property="og:image" content="{{ og_image_url }}">
  {% if post.published_at %}
    <meta property="article:published_time" content="{{ post.published_at|date:'c' }}">
  {% endif %}
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="{{ seo_title }}">
  <meta name="twitter:description" content="{{ seo_description }}">
  <meta name="twitter:image" content="{{ og_image_url }}">
  <script type="application/ld+json">{{ structured_data_json|safe }}</script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.5/css/lightbox.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.5/js/lightbox-plus-jquery.min.js" integrity="sha512-/IJVg2oav2TggiFftaMSPgttHNmgu/0RSGP64Nm7wqYwjkxj4hAHLRMJi3QNTa22f4pIkvTsCpB848HEilV6MA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
{% endblock %}

{% block content %}
<article class="bg-white">
  <div class="mx-auto max-w-3xl px-6 py-16">
    <a href="{% url 'proprietary:blog_index' %}" class="inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-700">
      <svg class="mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 19l-7-7 7-7" />
      </svg>
      Back to blog
    </a>

    <h1 class="mt-6 text-4xl text-slate-900">{{ post.meta.title }}</h1>

    <div class="mt-4 flex flex-wrap items-center gap-3 text-sm text-slate-500">
      {% if post.published_at %}
        <time datetime="{{ post.published_at|date:'c' }}">{{ post.published_at|date:"F j, Y" }}</time>
      {% endif %}
      {% if post.meta.author %}
        <span class="h-1 w-1 rounded-full bg-slate-300"></span>
        <span>{{ post.meta.author }}</span>
      {% endif %}
    </div>

    {% if post.summary %}
      <p class="mt-6 text-lg leading-relaxed text-slate-600">{{ post.summary }}</p>
    {% endif %}

    <div class="prose prose-slate prose-headings:font-normal mt-10 max-w-none lg:prose-lg">
      {{ post.html|safe }}
    </div>
  </div>
</article>

{% if recent_posts %}
<section class="bg-slate-50 py-16">
  <div class="mx-auto max-w-5xl px-6">
    <h2 class="text-xl text-slate-900">More from the Gobii blog</h2>
    <div class="mt-6 grid gap-6 md:grid-cols-3">
      {% for recent in recent_posts %}
        <article class="flex h-full flex-col rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:-translate-y-1 hover:shadow-md">
          <h3 class="text-lg text-slate-900">
            <a href="{{ recent.url }}" class="hover:text-blue-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white">{{ recent.title }}</a>
          </h3>
          {% if recent.summary %}
            <p class="mt-3 flex-1 text-sm text-slate-600">{{ recent.summary }}</p>
          {% endif %}
          {% if recent.published_at %}
            <time datetime="{{ recent.published_at|date:'c' }}" class="mt-4 text-xs uppercase tracking-wide text-slate-500">{{ recent.published_at|date:"F j, Y" }}</time>
          {% endif %}
        </article>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}
{% endblock %}