{% extends "templates/one-column.html" %}

{% block title %}{{ article.title.rendered|safe }}{% endblock %}

{% block meta_description %}{{ article.excerpt.raw }}{% endblock %}

{% block meta_image %}{{ article.image.source_url }}{% endblock %}

{# Change canonical URL for "snapcraft.io" articles (2996 is the ID of the "snapcraft.io" tag) #}

{% block body_class %}blog-article{% endblock %}

{%- block canonical_url -%}
  {%- if article.author and article.author.id == 217 -%}
    https://canonical.com/blog/{{ article.slug }}
  {%- elif 2996 in article.tags -%}
    https://snapcraft.io/blog/{{ article.slug }}
  {%- elif 4059 in article.tags -%}
    https://juju.is/blog/{{ article.slug }}
  {%- elif 1304 in article.tags or 3681 in article.tags -%}
    https://maas.io/blog/{{ article.slug }}
  {%- else -%}
    https://ubuntu.com/blog/{{ article.slug }}
  {%- endif -%}
{%- endblock canonical_url -%}

{% block extra_metatags %}
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@id": "https://ubuntu.com/#article",
      "@type": "Article",
      "name": "{{ article.title.renderered|safe }}",
      "headline": "{{ article.excerpt.raw }}",
      "author": {
        "@type": "Person",
        "name": "{{ article.author.name }}"
      },
      "datePublished": "{{ article.date_gmt }}",
      {% if article.image and article.image.source_url %}
      "image": "{{ article.image.source_url }}",
      {% endif %}
      "url": "{{ request.url }}",
      "publisher": {
        "@type": "Organization",
        "name": "Ubuntu"
      }
    }
  </script>
{% endblock %}

{% block content %}
  <article>
    <header class="p-strip--image is-shallow"
            style="background-image: url(https://assets.ubuntu.com/v1/f8a323a7-image-background-paper.png)">
      <div class="row">
        <div class="col-8">
          <h1>{{ article.title.rendered|safe }}</h1>
        </div>
      </div>

      <div class="row">
        <div class="col-8">
          <div class="p-media-object">
            {% if article.author and article.author.id == 217 %}
              <img src="https://assets.ubuntu.com/v1/f16c40d0-Favicon+-+CoF.svg"
                   class="p-media-object__image"
                   alt="" />
            {% else %}
              <img src="{{ article.author.avatar_urls['96'] }}"
                   class="p-media-object__image is-round"
                   alt="" />
            {% endif %}

            <div class="p-media-object__details">
              {% if article.author %}
                <h3 class="p-media-object__title">
                  <a href="/blog/author/{{ article.author.slug }}"
                     title="More about {{ article.author.name }}">{{ article.author.name }}</a>
                </h3>
              {% endif %}
              <p class="p-media-object__content">on {{ article.date }}</p>
            </div>
          </div>
        </div>

        <div class="col-4">
          <ul class="p-inline-list-icons u-no-padding--left u-no-margin--left">
            <li class="p-inline-list__item">Share on:</li>

            <li class="p-inline-list__item">
              <a class="p-icon--facebook"
                 title="Share on Facebook"
                 href="https://www.facebook.com/sharer/sharer.php?u=https://www.ubuntu.com/blog/{{ article.slug }}">
                Facebook
              </a>
            </li>

            <li class="p-inline-list__item">
              <a class="p-icon--twitter"
                 title="Share on Twitter"
                 href="https://twitter.com/share?text={{ article.title.rendered|safe|urlencode }}&amp;url=https://www.ubuntu.com/blog/{{ article.slug }}&amp;hashtags=ubuntu">
                Twitter
              </a>
            </li>

            <li class="p-inline-list__item">
              <a class="p-icon--linkedin"
                 title="Share on LinkedIn"
                 href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https://www.ubuntu.com/blog/{{ article.slug }}&amp;title={{ article.title.rendered|safe|urlencode }}">
                LinkedIn
              </a>
            </li>
          </ul>
        </div>
      </div>
      {% if tags %}
        <div class="row">
          <div class="col-10">
            <p>
              <strong>Tags:</strong>
              {% for tag in tags %}
                <a href="/blog/tag/{{ tag.slug }}">{{ tag.name }}</a>
                {% if not loop.last %},{% endif %}
              {% endfor %}
            </p>
          </div>
        </div>
      {% endif %}
    </header>

    <section class="p-strip is-shallow" style="overflow-x: initial;">
      <div class="row u-equal-height">
        <div class="col-8">
          {% if 'difference_in_years' in blog_notice %}
            <div class="p-notification--information is-borderless is-inline u-no-margin--bottom">
              <div class="p-notification__content">
                <p class="p-notification__message u-text--muted" id="date-notice">
                  {% if blog_notice.updated %}
                    This article was last updated <strong>{{ blog_notice.difference_in_years }} year{% if blog_notice.difference_in_years > 1 %}s{% endif %} ago</strong>.
                {% else %}
                  This article is more than <strong>{{ blog_notice.difference_in_years }} year{% if blog_notice.difference_in_years > 1 %}s{% endif %} old</strong>.
              {% endif %}
            </p>
          </div>
        </div>
        <hr class="p-rule--muted" />
      {% endif %}
      <div class="p-post__content">{{ article.content.rendered|safe }}</div>
    </div>
    {% if article.slug != 'canonical-standing-with-ukraine' %}
      <div class="col-4">
        {% include 'blog/product-cards.html' %}
        <div>{% include 'blog/newsletter-form.html' %}</div>
      </div>
    {% endif %}
  </div>
</section>
</article>

{% for tag in tags %}
  {% if tag.name == 'robotics' %}
    <section class="p-strip--image is-dark"
             style="background-image: linear-gradient(44deg, #171717 0%, #181818 9%, #262626 34%, #2D2D2D 67%, #383838 88%, #2E2E2E 100%, #393939 100%)">
      <div class="row">
        <div class="col-8">
          <h3>Are you building a robot on top of Ubuntu and looking for a partner? Talk to us!</h3>
          <p>
            <a href="/internet-of-things/contact-us?product=robotics"
               class="p-button--positive">Contact Us</a>
          </p>
        </div>

        <div class="col-4 u-align--center u-vertically-center u-hide--medium u-hide--small">
          {{ image(url="https://assets.ubuntu.com/v1/39ebd977-robot.svg",
                    alt="",
                    height="157",
                    width="100",
                    hi_def=True,
                    loading="lazy") | safe
          }}
        </div>
      </div>
    </section>
  {% endif %}
{% endfor %}

{% if related_articles %}
  <section class="p-strip--light is-shallow">
    <div class="row">
      <div class="col-8">
        <h3>Related posts</h3>
      </div>
    </div>

    <div class="row p-divider">
      {% for related_article in related_articles %}
        <div class="col-4 p-divider__block">
          <h4>
            <a href="/blog/{{ related_article.slug }}">{{ related_article.title.rendered|safe }}</a>
          </h4>
          <p>{{ related_article.excerpt.raw.replace('[…]', '') |truncate(162) }}</p>
        </div>
      {% endfor %}
    </div>
  </section>
{% endif %}
{% endblock %}