{% extends 'generic/object.html' %}

{% load static %}
{% load render_table from django_tables2 %}

{% block head %}
<script src="{% static 'nb_itsm/mermaid.min.js' %}"></script>
{% endblock %}



{% block content %}
<div class="row">
    <div class="col col-md-6">
        <div class="card">
            <h5 class="card-header">Relation</h5>
            <div class="card-body">
                <table class="table table-hover attr-table">
                    <tr>
                        <td>Service</td>
                        <td><a href="{{ object.service.get_absolute_url  }}">{{ object.service }}</a></td>
                      </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="col col-md-6">
        <div class="card">
            <h5 class="card-header">Diagram</h5>
            <div class="mermaid" style="text-align: center; width: 100%; ">
                {{ object.diagram | safe }}
            </div>
        </div>
    </div>

</div>


{% endblock %}