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

{% block title %}{{ article.metadata.title }}{% endblock %}
{% block head %}
  <meta property="og:title" content="Python Discord - {{ article.metadata.title }}" />
  <meta property="og:type" content="website" />
  <meta property="og:description" content="{{ article.metadata.short_description }}" />
  <link rel="stylesheet" href="{% static "css/content/articles.css" %}">
  <link rel="stylesheet"
    href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/atom-one-dark-reasonable.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
{% endblock %}

{% block content %}
    {% include "base/navbar.html" %}

    <section class="breadcrumb-section section">
        <div class="container">
            <nav class="breadcrumb is-pulled-left" aria-label="breadcrumbs">
                <ul>
                    <li><a href="{% url "content:articles" %}">Articles</a></li>
                    {% for item in breadcrumb_items %}
                        <li><a href="{% url "content:article_category" location=item.path %}">{{ item.name }}</a></li>
                    {% endfor %}
                    <li class="is-active"><a href="#">{{ article.metadata.title }}</a></li>
                </ul>
            </nav>
        </div>
    </section>

    <section class="section">
        <div class="content">
            <div class="container">
                <h1 class="title">{{ article.metadata.title }}</h1>
                <div class="columns is-variable is-8">
                    <div class="column is-two-thirds">
                        {{ article.article|safe }}
                    </div>
                    <div class="column">
                        {% if relevant_links|length > 0 %}
                        <div class="box">
                            <p class="menu-label">Relevant links</p>
                            <ul class="menu-list">
                                {% for value, link in relevant_links.items %}
                                    <li><a class="has-text-link" href="{{link}}">{{ value }}</a></li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </section>

{% endblock %}