{% extends "webadmin/base.html" %}
{% load i18n %}
{% load static %}

{% block title %}Imports Database{% endblock %}

{% block link %}
    {{ block.super }}
{% endblock %}

{% block script %}
    {{ block.super }}
    <script src="{% static 'webclient/javascript/jquery.infieldlabel-0.1.js' %}" type="text/javascript"></script>
    <script>
        $(document).ready(function(){
            var METABASE_SITE_URL = "{{ metabase_site_url }}";
            var token = "{{ metabase_token }}";
            var refreshInterval = 20; // Set the refresh interval to 20 seconds
            var iframeUrl = METABASE_SITE_URL + "/embed/dashboard/" + token + "#bordered=true&titled=true&refresh=" + refreshInterval;

            var iframe = $('<iframe>', {
                src: iframeUrl,
                frameborder: 0
            });

            $('#metabase-dashboard').append(iframe);

            var loadTimeout = setTimeout(function() {
                $('#metabase-dashboard').html('<div class="error">Error loading Metabase dashboard. Please try refreshing the page.</div>');
            }, 30000); // 30 seconds timeout

            iframe.on('load', function() {
                clearTimeout(loadTimeout);
            });

            // Log admin status to console
            console.log("User is " + "{% if is_admin %}an admin{% else %}not an admin{% endif %}");
            console.log("Username: {{ user_name }}");
            console.log("User ID: {{ user_id }}");
        });
    </script>

    <!-- keep-alive ping so that OMERO session doesn't die -->
    {% include "webclient/base/includes/ping.html" %}
{% endblock %}

{% block content %}
    <style>
        .admin-message {
            text-align: center;
            color: black;
            padding: 10px 0;
            font-weight: bold;
        }
    </style>

    {% if is_admin %}
    <div class="admin-message">
        To access the entire Metabase interface login into: <a href="{{ metabase_site_url|add:'/' }}" target="_blank">{{ metabase_site_url|add:'/' }}</a>
    </div>
    {% endif %}

    {{ block.super }}
{% endblock %}

{% block center_details %}
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        #middle_header_wrapper {
            flex: 0 0 auto;
        }

        #content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 0 20px;
        }

        #center_details {
            flex: 1;
            overflow: hidden;
            margin: 20px 0;
            border-radius: 10px;
            border-color: black;
            width: 100%;
        }

        #metabase-dashboard {
            width: 100%;
            height: 100%;
            border: none;
        }

        #metabase-dashboard iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>

    <div id="metabase-dashboard"></div>
{% endblock %}