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


{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item active">Hanging Protocols</li>
    </ol>
{% endblock %}

{% block title %}
    Hanging Protocols - {{ block.super }}
{% endblock %}

{% block content %}
    <div class="row col-12 m-0 p-0">
        <h3 class="col-9 p-0">Hanging Protocols</h3>
        <div class="col-3 p-0 text-right"><a class="btn btn-primary" href="{% url 'hanging-protocols:create' %}">Add a hanging protocol</a></div>
    </div>
    <br>
    <div class="card-columns">
        {% for object in object_list %}
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">
                        <span style="stroke: #000">{{ object.svg_icon }}</span>
                        {{ object.title }}
                    </h5>
                    <div class="mb-2">
                        <span class="text-dark">
                            Created by {{ object.creator|user_profile_link }}
                            <br>
                            <p class="py-2">{{ object.description }}</p>
                        </span>
                        <div id="id_json-{{ forloop.counter }}" class="d-none">{{ object.json|json_dumps }}</div>
                        <div id="hpVisualization-{{ forloop.counter }}" class="container-fluid m-1 mb-3 position-relative" style="height: 100px; width:100%; font-size:10px"></div>
                    </div>
                    <div class="text-right">
                        <a href="{% url 'hanging-protocols:detail' slug=object.slug %}"
                           class="btn btn-sm btn-primary "
                           title="View Hanging Protocol">
                            <i class="fa fa-eye"></i> View
                        </a>
                    </div>
                </div>
            </div>
            {% empty %}
            <p>No hanging protocols available.</p>
        {% endfor %}
    </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 %}