{% extends "canister-alignment-container.html" %}


{% block head %}
    {{ block.super }}
    <script>
        $(function () {
            $(document).tooltip();

            $("#{{ current_tab }}").attr("class", "active");

            $.ajax({
            {% if error_only == 'N' %}
                url: "{% if not use_local_fs %}http{% if use_https %}s{% endif %}://{{ dafe_ip }}{% endif %}{% url 'support:load-canister-thumbnails' dafe_id row %}{% if not use_local_fs %}?remote=Y{% endif %}",
            {% else %}
                url: "{% if not use_local_fs %}http{% if use_https %}s{% endif %}://{{ dafe_ip }}{% endif %}{% url 'support:load-regmark-error-thumbnails' dafe_id %}{% if not use_local_fs %}?remote=Y{% endif %}",
            {% endif %}
                type: "GET",
                crossDomain: true,
                success: function (data, status, jqXHR) {
                    $('#canister-images').html(data);
                }
            });

            $("#regmark-full-image").dialog({
                autoOpen: false,
                closeOnEscape: true,
                modal: true,
                draggable: false,
                width: 800,
                open: function (event, ui) {
                    $("#regmark-full-image-content").html('');
                    $.ajax({
                        url: "{% if not use_local_fs %}http{% if use_https %}s{% endif %}://{{ dafe_ip }}{% endif %}{% url 'support:show-canister-regmark-image' dafe_id %}{% if not use_local_fs %}?remote=Y{% endif %}",
                        type: "POST",
                        data: {
                            csrfmiddlewaretoken: '{{csrf_token}}',
                            fname: $("#canister_fname").val()
                        },
                        success: function (data, status, jqXHR) {
                            $('#regmark-full-image-content').html(data);
                        }
                    })
                },
                position: {my: "top", at: "top", of: window},
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });


        });
    </script>
{% endblock %}

{% block sub-content %}
    <form id="canisterImageForm">
        <input type="hidden" id="canister_fname" name="canister_fname" value=""/>
    <div id="canister-images">
        &nbsp;
    </div>
    </form>
    <div id="regmark-full-image" title="Canister Regmark Images" style="margin-left: 2px;">
        <div id="regmark-full-image-content">
            Loading Regmark Images...
        </div>
    </div>
{% endblock %}