{% extends "generic/object_list.html" %}
{% load buttons %}
{% load static %}
{% load helpers %}

{% block extra_styles %}
{{ block.super }}
<style>
  #actions {
    position: relative;
    display: inline-block;
    text-align: center;
    vertical-align: left;
  }
  #actions #actiontext {
    visibility: hidden;
    background-color: LightSlateGray;
    color: #ffffff;
    text-align: center;
    border-radius: 6px;
    width:175px;
    position:absolute;
    z-index: 1;
    top: -5px;
    right: 110%;
  }
  #actions:hover #actiontext {
    visibility: visible;
  }
  </style>
{% endblock extra_styles %}
{% block content %}
  {{ block.super }}

<div class="modal fade" id="db-docs-modal" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title">Design Documentation</h1>
            </div>
            <div id="db-docs-modal-body" class="modal-body">
            </div>
            <div class="modal-footer">
                <button id="close" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block javascript %}
<script src="{% static 'js/tableconfig.js' %}"></script>
<script>
    $( document ).ready(function(){
        $('#db-docs-modal').on('show.bs.modal',function(event){
            var dataURL = event.relatedTarget.dataset.href;
            $('#db-docs-modal-body').load(dataURL);
        });
    });
</script>
{% endblock javascript %}