{% extends "base/base.html" %}
{% load crispy_forms_tags %}
{% load static %}

{% block css %}
<link rel="stylesheet" href="{% static "css/material-table.css"%}">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
<style>
.btn-sm {
  margin-top:20px !important;
}

#id_spec {
     position: absolute;
     height:800px;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
}
</style>
{% endblock %}

{% block content %}
<div id="fh5co-portfolio">

<!-- Error messages for builds will be added here-->
{% include 'messages/message.html' %}

<!-- Meta data about container-->
<div class="row">

    <div class="col-md-12">
        <div class="card" style="padding:20px">
            <div class="header">
                <a href="{% url 'collection_details' container.collection.id %}"><h2 class="title">{{ container.name }}</h2></a>
                <p>Version {{ container.version }}</a></p>
                <h3>
                     <span class="icon-controls" style="position:relative;top:-70px">
                     </span>
                </h3>
            </div>
        </div>
    </div>
</div>

<div class="row">

    <div class='col-md-12'>

    {% if container.tags %}
        {% for tag in container.tags.all %}
        <a href="{% url 'view_tag' tag.id %}"><button class="btn btn-xsm btn-default">{{ tag.name }}</button></a>
        {% endfor %}
    {% else %}
     <p class="alert alert-info">This container does not have any tags.</p>
    {% endif %}
     </div>

</div>
{% endblock %}

{% block scripts %}
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<script src="{% static "js/materialize.min.js"%}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script>
$(document).ready(function(){

    // Load highlighter for highlight js (log)
    hljs.initHighlightingOnLoad();

})
</script>
{% endblock %}
