{% 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="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/styles/default.min.css">
  <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/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>
                    {% if category_data.raw_name is not None %}
                        <li><a href="{% url "content:category" category=category_data.raw_name %}">{{ category_data.name }}</a></li>
                    {% endif %}
                    <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>
                <p class="subtitle is-size-6"><strong>Last modified:</strong> {{ github_data.last_modified }}</p>
                <div class="columns is-variable is-8">
                    <div class="column is-two-thirds">
                        {{ article.article|safe }}
                    </div>
                    <div class="column">
                        <div class="card">
                            <div class="card-header">
                                <p class="card-header-title">Contributors</p>
                            </div>
                            <div class="card-content">
                                {% if github_data.contributors|length %}
                                    <div class="tags">
                                        {% for user, profile_url in github_data.contributors.items %}
                                            <span class="tag"><a href="{{ profile_url }}">{{ user }}</a></span>
                                        {% endfor %}
                                    </div>
                                {% else %}
                                <p>N/A</p>
                                {% endif %}
                            </div>
                        </div>

                        {% if relevant_links|length > 0 %}
                        <div class="box">
                            <p class="menu-label">Relevant links</p>
                            <ul class="menu-list">
                                {% for link, value 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 %}