{% extends "base.html" %}

{% block title %}{{package_name}} in {{suite}}/{{section}}{% endblock %}

{% block head_extra %}
<link rel="stylesheet" href="{{root_url}}/static/css/highlight.css">
{% endblock %}

{% block header_content %}
<a class="backlink" href=".">⇦ |</a>
<span>{{package_name}}</span> <span style="font-size:16px;">[{{section}}]</span>
{% endblock %}

{% block float_right %}
<small>Last updated on: {{time}}</small>
{% endblock %}

{% block content %}
<h1>Metadata for {{package_name}} in {{section}}</h1>

<div class="wrapper">
  {% for cpt in cpts %}
  <h2>
    {{cpt.component_id}}
    {% for arch in cpt.architectures %}
      <span style="font-size:12px;" class="label label-neutral">⚙ {{arch.arch}}</span>
    {% endfor %}
  </h2>

  <div style="float: right; padding: 6px;">
    <img src="{{cpt.icon_url}}" alt="Icon" />
  </div>

  <div class="well">
    <pre><code class="language-{{metadata_language}}">{{cpt.metadata}}</code></pre>
  </div>
  {% endfor %}

</div>
<script type="module">
import hljs from "{{root_url}}/static/js/highlight/core.min.js";
import xml from "{{root_url}}/static/js/highlight/xml.js";
import yaml from "{{root_url}}/static/js/highlight/yaml.js";

hljs.registerLanguage("xml", xml);
hljs.registerLanguage("yaml", yaml);
hljs.highlightAll();
</script>
{% endblock %}
