{% extends "base.html" %}
{% load url %}
{% load crispy_forms_tags %}
{% load static %}
{% load evaluation_extras %}
{% load profiles %}
{% load guardian_tags %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'hanging-protocols:list' %}">Hanging Protocols</a></li>
        <li class="breadcrumb-item"><a href="{{ object.get_absolute_url }}">{{ object.title }}</a></li>
    </ol>
{% endblock %}

{% block title %}
    Hanging Protocol - {{ object.title }} - {{ block.super }}
{% endblock %}

{% block content %}
    <h3>
        <span style="stroke: #000">{{ object.svg_icon }}</span>
        {{ object.title }}
    </h3>
    {% get_obj_perms request.user for object as "user_perms" %}
    <div class="row col-12 p-0 m-0">
        <span class="col-10 p-0 d-flex align-items-center">Created by {{ object.creator|user_profile_link }}</span>
        {% if 'change_hangingprotocol' in user_perms %}
            <div class="col-2 text-right p-0"><a class="btn btn-primary" href="{% url 'hanging-protocols:update' slug=object.slug %}">Edit</a></div>
        {% endif %}
    </div>
    <br>
    <div>
        {% if object.description %}
            <h5>Description</h5>
            {{ object.description }}
            <br><br>
        {% endif %}
        <h5>Schematic sketch of hanging protocol</h5>
        <div id="hpVisualization" class="container-fluid m-1 mb-3 position-relative w-100" style="height: 300px"></div>
        <h5>Json schema</h5>
        <pre id="id_json" class="bg-light p-3 rounded">{{ object.json|json_dumps }}</pre>
    </div>
{% endblock %}

{% block script %}
    {{ block.super }}
    {{ viewport_names|json_script:"possibleViewPorts" }}
    <script type="text/javascript"
            src="{% static "js/hanging_protocols/hanging_protocol_static_views_add_on.js" type="module" defer %}">
    </script>
    <script type="text/javascript"
            src="{% static "js/hanging_protocols/hanging_protocol_visualization.js" type="module" defer %}">
    </script>
{% endblock %}