{% load static %}
<link rel="stylesheet" href="{% static 'csp_observer/css/clientui.css' %}">
<script language="javascript" type="text/javascript" src="{% static 'csp_observer/js/clientui.js' %}"></script>
<script language="javascript" type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(){
        var userInterface = new CSPObserverUserInterface({
            'sessionId': '{{ session_id }}',
            'visibility': '{{ visibility }}',
            'resultUri': '{{ result_uri}}',
            'detailpageUri': '{{ detailpage_uri }}'
        });
        userInterface.init();
    });
</script>
<div id="cspo-clientui">
    <div class="clientui-header">
        <p class="clientui-title">Browser Extension Scan</p>
        <button class="close" aria-label="close" @click="close">x</button>
    </div>
    <div class="clientui-body">
        <div class="status">
            <div class="icon">
                <img id="cspo-icon-alert" class="result-icon" src="{% static 'csp_observer/img/alert-circle.svg' %}" alt="Image showing a warning symbol">
                <img id="cspo-icon-check" class="result-icon" src="{% static 'csp_observer/img/check-circle.svg' %}" alt="Image showing a checkmark symbol">
                <div id="cspo-icon-spinner" class="result-icon spinner">
                    <div class="double-bounce1"></div>
                    <div class="double-bounce2"></div>
                </div>
            </div>
            <div class="content">
                <p id="cspo-status-message">
                    Clientui not initialized
                </p>
            </div>
        </div>
        <div class="spoiler">
            <p class="help">
                <img id="cspo-icon" width="50" src="{% static 'csp_observer/img/cspo-logo-64px.png' %}" alt="The CSP Observer Logo: A small telescope with the letter CSP above it.">
                
                <a href="https://github.com/flxn/django-csp-observer" target="_blank" rel="noopener nofollow noreferrer">CSP Observer</a> is passively scanning your browser's activity to detect malicious extensions.<br />
                Your privacy is our top priority <a href="{% url 'privacy' %}" target="_blank">click here to learn about our privacy policy</a>.
            </p>
        </div>
        
    </div>
</div>